Implementation:Ucbepic Docetl OperationArgs

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the reusable operation argument input components (prompt, schema, code, guardrails, gleaning) used across DocETL operation editors.

Description

This module exports several form components used to configure operation arguments: PromptInput for editing Jinja2 template prompts with validation warnings, SchemaForm for managing output schema definitions with nested types, OutputSchema for the collapsible schema editor, CodeInput for Python code editing with Monaco editor, Guardrails for configuring validation rules, and GleaningConfig for setting up iterative refinement rounds. The PromptInput validates that prompts contain Jinja2 template variables and provides contextual help for map vs. reduce operations.

Usage

Imported by the operation-specific editor components (MapFilterOperationComponent, ReduceOperationComponent, etc.) to render their configuration forms.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/operations/args.tsx
• Lines: 1-750

Signature

interface PromptInputProps {
  prompt: string;
  onChange: (value: string) => void;
  disableValidation?: boolean;
  placeholder?: string;
  operationType?: "map" | "reduce" | "filter" | "resolve" | "other";
}

interface SchemaFormProps {
  schema: SchemaItem[];
  onUpdate: (newSchema: SchemaItem[]) => void;
  level?: number;
  isList?: boolean;
}

export const PromptInput: React.FC<PromptInputProps>
export const SchemaForm: React.FC<SchemaFormProps>
export const OutputSchema: React.FC<{ ... }>
export const CodeInput: React.FC<{ ... }>
export const Guardrails: React.FC<{ ... }>
export const GleaningConfig: React.FC<{ ... }>

Import

import { PromptInput, SchemaForm, OutputSchema, CodeInput, Guardrails, GleaningConfig } from "@/components/operations/args";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
prompt	string	Yes	Current prompt text (for PromptInput)
onChange	(value: string) => void	Yes	Callback for prompt changes
schema	SchemaItem[]	Yes	Schema items (for SchemaForm)
onUpdate	(newSchema: SchemaItem[]) => void	Yes	Callback for schema updates
operationType	string	No	Type of operation for context-specific help

Outputs

Name	Type	Description
rendered	JSX.Element	Form input components for operation configuration

Usage Examples

<PromptInput
  prompt={operation.prompt}
  onChange={(newPrompt) => updateOperation({ ...operation, prompt: newPrompt })}
  operationType="map"
/>

<SchemaForm
  schema={operation.output?.schema || []}
  onUpdate={(newSchema) => updateOperation({
    ...operation,
    output: { schema: newSchema }
  })}
/>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment