Implementation:Ucbepic Docetl PipelineSettings

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

Overview

Concrete tool for the pipeline settings dialog that configures global pipeline parameters in the DocETL playground.

Description

The PipelineSettings component renders a dialog for configuring pipeline-wide settings including pipeline name, default LLM model, optimizer model, dataset file selection, auto-optimization toggle, and extra YAML-based configuration (such as rate limits). It includes a ModelInput sub-component with autocomplete suggestions for common LLM model names (GPT-4o, Claude, Gemini, etc.) and supports custom YAML configuration that is merged into the pipeline config.

Usage

Opened from the playground toolbar settings button. All settings are passed down as props and managed by the parent component.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/PipelineSettings.tsx
• Lines: 1-398

Signature

interface PipelineSettingsProps {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  pipelineName: string;
  setPipelineName: (name: string) => void;
  currentFile: File | null;
  setCurrentFile: (file: File | null) => void;
  defaultModel: string;
  setDefaultModel: (model: string) => void;
  optimizerModel: string;
  setOptimizerModel: (model: string) => void;
  autoOptimizeCheck: boolean;
  setAutoOptimizeCheck: (check: boolean) => void;
  files: File[];
  apiKeys: Array<{ name: string; value: string }>;
  extraPipelineSettings: Record<string, unknown> | null;
  setExtraPipelineSettings: (settings: Record<string, unknown> | null) => void;
}

export const ModelInput: React.FC<ModelInputProps>

Import

import PipelineSettings from "@/components/PipelineSettings";
import { ModelInput } from "@/components/PipelineSettings";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
isOpen	boolean	Yes	Whether the dialog is visible
onOpenChange	(open: boolean) => void	Yes	Toggle dialog visibility
pipelineName	string	Yes	Current pipeline name
setPipelineName	(name: string) => void	Yes	Update pipeline name
defaultModel	string	Yes	Default LLM model name
setDefaultModel	(model: string) => void	Yes	Update default model
optimizerModel	string	Yes	Optimizer LLM model name
setOptimizerModel	(model: string) => void	Yes	Update optimizer model
currentFile	File or null	Yes	Currently selected dataset file
setCurrentFile	(file: File or null) => void	Yes	Update selected file
autoOptimizeCheck	boolean	Yes	Whether auto-optimization is enabled
setAutoOptimizeCheck	(check: boolean) => void	Yes	Toggle auto-optimization
files	File[]	Yes	Available dataset files
apiKeys	Array	Yes	Configured API keys
extraPipelineSettings	Record or null	Yes	Additional YAML settings
setExtraPipelineSettings	function	Yes	Update extra settings

Outputs

Name	Type	Description
rendered	JSX.Element	Pipeline settings dialog

Usage Examples

<PipelineSettings
  isOpen={settingsOpen}
  onOpenChange={setSettingsOpen}
  pipelineName={name}
  setPipelineName={setName}
  currentFile={file}
  setCurrentFile={setFile}
  defaultModel="gpt-4o-mini"
  setDefaultModel={setModel}
  optimizerModel="gpt-4o"
  setOptimizerModel={setOptimizerModel}
  autoOptimizeCheck={autoOptimize}
  setAutoOptimizeCheck={setAutoOptimize}
  files={files}
  apiKeys={apiKeys}
  extraPipelineSettings={extraSettings}
  setExtraPipelineSettings={setExtraSettings}
/>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment