Knowledge base manager

A React block (a whole screen) in Beamline's Blocks category.

What your assistant knows and whether it is fresh: sources with live sync status (syncing with progress, out of date, failed with the reason and Retry), the chunks each source became, and a test bench where you ask a question and see the cited answer beside the chunks it was built from.

Use it for

The admin screen behind an AI assistant: connect sources, watch them sync, fix failures, and test what the assistant answers from them.
Any retrieval system whose owners need to see its sources, their freshness and what a question retrieves.

Not for

The conversation itself (support-chat, agent-workspace).
Showing what one answer retrieved inside a chat (context-cards).
A file browser (tree-view, data-grid).

Anatomy

header: title, totals (sources, chunks rolling as they grow, last sync) and the one primary action, Add source
sources: a filter (all / needs attention), then one row per source: kind icon, name, where it lives, chunk count, and its state in words with a glyph (synced and when, syncing with a progress bar, queued, out of date with Sync now, failed with the reason and Retry); a row menu syncs or removes
test bench (tab): a question field and Ask; the answer streams with numbered citations, and the chunks it retrieved sit beside it, scored, the ones the answer used checked
gaps (on an idle bench): this week's questions with no good answer and how often each was asked, each with Test
chunks (tab): the selected source's chunks with a search that marks the words

Variants

0: room: one column under 48rem (sources, then the bench); sources and bench side by side from 48rem; chunks in a grid from 64rem

States

loading (skeleton rows)
no sources yet (what goes here, Add source)
every source synced / some need attention (the filter counts them)
source syncing (progress, or a moving bar when the total is unknown), queued, out of date, failed
chunk count unknown (—)
test: idle (suggested questions), searching, answering, answered, nothing relevant found (says so and which sources were searched), error with Retry

Keyboard

Sources are a list of buttons: Tab or arrows reach each, Enter selects it for the Chunks tab
Each row's menu: Enter or Space opens; Sync now and Remove
Question field: Enter asks
Tabs: arrows move between Test and Chunks

Motion

A syncing source fills its bar and its chunk count rolls up; when it finishes the spinner closes into a check and the words morph (Syncing → Synced just now). A new answer flows in at reading pace, then its sources list arrives. Rows that change state never move. Idle: nothing runs.

Props

Prop	Type	Default	Description
`sources` (required)	`KnowledgeSource[]`	—	Each source with its kind, chunk count and sync state, as your indexer reports it.
`selected / defaultSelected / onSelectedChange`	`string`	—	The source whose chunks the Chunks tab shows.
`chunks`	`ContextChunk[] \| null`	—	Chunks of the selected source; null while they load.
`test`	`KnowledgeTest`	—	The current test question and where its answer stands.
`suggestions`	`string[]`	—	Questions to try on an empty bench.
`gaps`	`{ question: string; count: number }[]`	—	Questions customers asked that found no good answer, most asked first; each can be tested in one press.
`loading`	`boolean`	—
`onAsk`	`(question: string) => void`	—
`onSync`	`(id: string) => void`	—	Sync one source now (also Retry for a failed one).
`onRemove`	`(id: string) => void`	—
`onAddSource`	`() => void`	—	The header's primary action; open your connect flow.
`className / classNames / style / ref`	`string / KnowledgeBaseClassNames / CSSProperties / Ref<HTMLElement>`	—

Built from

item
badge
progress
spinner
text-morph
chip-group
tabs
search-field
input
button
dropdown-menu
citations
context-cards
text-shimmer
empty-state
skeleton
slot-text

Dependencies

lucide-react

Import

import { KnowledgeBase } from "@/blocks/knowledge-base/knowledge-base";

Get it

Knowledge base manager is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent