Implementation:Ucbepic Docetl NaturalLanguagePipelineDialog
| Knowledge Sources | |
|---|---|
| Domains | Frontend, React_UI |
| Last Updated | 2026-02-08 00:00 GMT |
Overview
Concrete tool for the natural language pipeline generation dialog in the DocETL playground.
Description
The NaturalLanguagePipelineDialog is a multi-step dialog that allows users to describe their desired data processing pipeline in plain English. It guides users through uploading a dataset, describing their analysis goal, and then uses an LLM to automatically generate a complete pipeline configuration including operations, schemas, and prompts. The dialog extracts sample data from uploaded files to provide context to the LLM, parses XML-tagged responses to create operations, and supports pipeline restoration from the generated YAML.
Usage
Opened from the playground toolbar when the user wants to create a new pipeline from a natural language description rather than manually configuring operations.
Code Reference
Source Location
- Repository: Ucbepic_Docetl
- File: website/src/components/NaturalLanguagePipelineDialog.tsx
- Lines: 1-1051
Signature
// Key helper functions:
function extractTagContent(text: string, tag: string): string | null
const extractSampleData = (jsonData: unknown[], sampleSize?: number): string
const formatFileSize = (bytes?: number | null): string
const getFileExtension = (input?: string | null): string
// Main component (default export)
export default function NaturalLanguagePipelineDialog(props: {
open: boolean;
onOpenChange: (open: boolean) => void;
// ... additional props from the pipeline context
}): JSX.Element
Import
import NaturalLanguagePipelineDialog from "@/components/NaturalLanguagePipelineDialog";
I/O Contract
Inputs (Props)
| Name | Type | Required | Description |
|---|---|---|---|
| open | boolean | Yes | Whether the dialog is visible |
| onOpenChange | (open: boolean) => void | Yes | Callback to toggle dialog visibility |
Outputs
| Name | Type | Description |
|---|---|---|
| rendered | JSX.Element | Multi-step dialog for natural language pipeline generation |
Usage Examples
<NaturalLanguagePipelineDialog
open={showNLDialog}
onOpenChange={setShowNLDialog}
/>