Knowledge sources
The files and connected apps a project's answers can draw on, and a quick way to narrow them for one question.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/knowledge-sources-project.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/knowledge-sources-project.json
Usage & API
Example
import { KnowledgeSettings } from "@/components/ai/knowledge-sources-project"
<KnowledgeSettings
files={[]}
apps={[]}
limit={1}
onFileToggle={() => {}}
onAppToggle={() => {}}
onRemove={() => {}}
onRestore={() => {}}
onAddFiles={() => {}}
onSync={() => {}}
/>Props KnowledgeSettings
| Prop | Type & description | Required |
|---|---|---|
files | KnowledgeFile[] | Required |
apps | KnowledgeApp[] | Required |
limit | numberToken budget for the whole project. | Required |
onFileToggle | (id: string, on: boolean) => void | Required |
onAppToggle | (id: string, on: boolean) => void | Required |
onRemove | (id: string) => voidRemove a file. The settings page offers undo for ready files. | Required |
onRestore | (file: KnowledgeFile, index: number) => void | Required |
onAddFiles | (files: File[]) => voidFiles dropped on the page or picked from the file dialog. | Required |
onBrowse | () => voidWhen set, the browse button calls this instead of opening the file dialog. | Optional |
onSync | (id: string) => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The project screen is a settings page titled Knowledge, with a note that sources sync on a schedule. A capacity meter shows tokens used against the limit. Search files filters the table, and a file-type menu narrows it to PDFs, docs, sheets, slides or code. Columns are Name, Size, Tokens and In answers, the last a switch. A row can be removed, and a syncing app has a Sync action and a progress state. Dropping files, or browsing, adds them. An empty search says to try another name or look in all types. The preview sits in a project shell with the project name and a member count.
Example
import { ScopedComposer } from "@/components/ai/knowledge-sources-composer"
<ScopedComposer
value="…"
onChange={() => {}}
onSubmit={() => {}}
scope={scope}
onScopeChange={() => {}}
sources={[]}
/>Props ScopedComposer
| Prop | Type & description | Required |
|---|---|---|
value | string | Required |
onChange | (value: string) => void | Required |
onSubmit | (value: string, scope: SourceScope) => void | Required |
scope | SourceScope | Required |
onScopeChange | (scope: SourceScope) => void | Required |
sources | ScopeSource[] | Required |
placeholder | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The composer is a message box with a sources button. The popover leads with All project knowledge, then Files and Connected apps, each row a checkbox, and a search field. A partial selection shows a mixed mark and a count. Search the web is a switch: on, the line says public pages can be read too; off, only your sources. The footer says For this question only, and arrow keys and space move and toggle. Chosen sources can appear as chips on the box, each with a remove button. Send submits the text and the scope together.
Choosing a layout
Use the project screen as the place a person manages what the agent is allowed to read. Use the composer when the library is already set and the next message should see less of it, or should be allowed to search the public web as well. They answer different questions: what exists, and what this message may use.
Uploading and watching a file move through reading, splitting and indexing is source ingest. Checking which passages a test question actually retrieved is the retrieval inspector. This pair assumes the files are already, or are about to be, part of the project.
Does turning a file off delete it?
No. The In answers switch only marks it excluded. Remove is separate, and for a file that is already ready the page can offer restore. A file that is still uploading or reading shows that status instead of a normal row.
Does the composer change the project library?
No. The scope is mode all or some, a list of ids, and a web flag, and the picker says the choice is for this question only. The project screen is where a file or an app is turned off for every later answer.