RAG and knowledge-base ingestion with parse, chunk, embed and index stages.
"use client"
import { simulateBackendStep } from "@/examples/_demo"
import {
DocumentIngest,
INGEST_STAGES,
type IngestProcess,
} from "@/components/document-ingest"
/**
* After the bytes are stored, follow server-side ingestion. Here each stage
* calls a demo endpoint; in production you'd poll a job or listen to SSE.
*/
const ingest: IngestProcess<unknown> = async (item, { setStage, signal }) => {
for (const stage of INGEST_STAGES.slice(1)) {
setStage(stage)
// Your ingestion pipeline does the work; here a stand-in waits.
await simulateBackendStep(item.name, stage, signal)
}
}
export default function AiDocumentUploadExample() {
return <DocumentIngest ingest={ingest} />
}
Installation
npx shadcn@latest add @uploadcn/document-ingestUsage
import { DocumentIngest } from "@/components/document-ingest"<DocumentIngest
ingest={async (item, { setStage, signal }) => {
const { jobId } = await startIngestion(item.result.key, { signal })
for await (const stage of watchJob(jobId, { signal })) setStage(stage)
}}
/>Stages are upload, parse, chunk, embed and index. Report them from polling, server-sent events or webhooks: the UI only reflects what your backend says.
Props
Prop
Type