Source ingest
Adding files or a website to an agent's knowledge, with each one's progress through reading, splitting and indexing.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/source-ingest-upload.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/source-ingest-upload.json
Usage & API
Example
import { SourceUpload } from "@/components/ai/source-ingest-upload"
<SourceUpload
files={[]}
onAddFiles={() => {}}
onCancel={() => {}}
onRetry={() => {}}
/>Props SourceUpload
| Prop | Type & description | Required |
|---|---|---|
files | IngestFile[] | Required |
onAddFiles | (files: { name: string; size: number }[]) => void | Required |
onCancel | (id: string) => void | Required |
onRetry | (id: string) => void | Required |
accept | string | Optional |
hint | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The upload screen is headed Add files, in the preview under a knowledge breadcrumb for one agent. Drag files here is the drop zone, and it names the count when several files are over it. Choose files opens the picker. Each row shows the stage. A working file can be cancelled. A failed file can be retried, and the error text you set is the reason. Ready files contribute their chunk counts to the total. The accept string defaults to pdf, docx, md, txt, csv and xlsx. Dropping or picking calls onAddFiles with the name and the size only.
Example
import { WebsiteCrawl } from "@/components/ai/source-ingest-crawl"
<WebsiteCrawl
config={config}
onConfigChange={() => {}}
state={state}
pages={[]}
onStart={() => {}}
onPause={() => {}}
onResume={() => {}}
onStop={() => {}}
onReset={() => {}}
/>Props WebsiteCrawl
| Prop | Type & description | Required |
|---|---|---|
config | CrawlConfig | Required |
onConfigChange | (c: CrawlConfig) => void | Required |
state | CrawlState | Required |
pages | CrawlPage[] | Required |
onStart | () => void | Required |
onPause | () => void | Required |
onResume | () => void | Required |
onStop | () => void | Required |
onReset | () => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Add a website starts with the URL, include paths and exclude paths, plus steppers for depth and the page limit. The include placeholder is a docs star path, and exclude is a blog star path. Start crawl is the primary action, and the note says it respects robots.txt. Once running, the header counts pages and offers Pause and Stop. Paused offers Resume. A stopped or finished crawl can be reset. The list shows each path, its title and its status, including Fetching, and a filter narrows that list. A rule that matches a path is what marks a page skipped rather than indexed. The empty list says nothing is here yet.
Choosing a layout
Use upload when the person has files on disk and needs to see which stage each one is in, and which ones failed. Use the crawl when the source is a documentation site and the person should limit the paths and the depth before starting, then watch pages arrive. The project knowledge screen is where those files live afterwards, with a token budget and an on-off switch. This pair is only the intake.
Checking whether a question actually retrieved a passage is the retrieval inspector. Pointing at one paragraph inside a file the answer already cited is the source viewer. Ingest is earlier than both. It is the progress from an empty row to a ready file or an indexed page.
Does the crawl download the site inside the component?
No. Start, pause, resume, stop and reset are callbacks, and the page rows are the array you pass, each with a status. The URL, the rules, the depth and the limit are edited locally only through onConfigChange. Fetching is a status you set while your own job runs.
Can a file be removed after it is ready?
Cancel is for a file that has not finished. A ready file stays in the list the upload screen shows. Removing it from the project is the knowledge sources screen, which has a separate remove and restore. Retry only applies to a failed stage.