Back to components
ComponentAI & ChatFree
Knowledge Source Map React component
An interactive context map linking documents, web pages and databases to an answer, with source search, selection and excerpts.
About the Knowledge Source Map component
An interactive context map linking documents, web pages and databases to an answer, with source search, selection and excerpts.
When to use it
Explain the application-provided sources behind an answer.
Let users inspect individual source excerpts without leaving the conversation.
Installation
Add the Knowledge Source Map component to your project with the shadcn CLI. It lands in components/knowledge-source-map.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/knowledge-source-mapOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion lucide-react clsx tailwind-mergeProps
<KnowledgeSourceMap /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| sources | { id: string; title: string; kind: "document" | "web" | "database"; excerpt: string; href?: string; updated?: string }[] | seed |
| answerTitle | string | "Your workspace, connected." |
| onSourceSelect | (source: KnowledgeSource) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- sources{ id: string; title: string; kind: "document" | "web" | "database"; excerpt: string; href?: string; updated?: string }[]Default: seed
- answerTitlestringDefault: "Your workspace, connected."
- onSourceSelect(source: KnowledgeSource) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Knowledge Source Map FAQ
- Does the map discover or verify sources?
- No. Pass the actual sources used by your application. Lines show those supplied relationships; the component does not perform retrieval, verify citations or infer confidence.
- Can I open a source?
- Supply an HTTP(S) or root-relative href to display an Open source link. onSourceSelect receives the source selected in the map. Search filters the displayed source nodes.
