Implementation:Ucbepic Docetl PromptImprovementDialog

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

Overview

Concrete tool for the AI-powered prompt improvement dialog that helps users iteratively refine operation prompts in the DocETL playground.

Description

The PromptImprovementDialog provides a multi-step workflow for improving operation prompts. Users first select a prompt type (for resolve operations: comparison or resolution prompt), then enter an analysis mode where the AI reviews current outputs, suggests improvements, and shows diffs between the original and proposed prompts. It supports multiple revision rounds with feedback connections between them, bookmarked output samples for context, and handles both simple prompts and resolve operation dual-prompt configurations. The component uses the Vercel AI SDK's useChat for streaming LLM responses.

Usage

Opened from the OperationCard's "Improve Prompt" button. Guides users through analyzing outputs and iteratively refining prompts with AI assistance.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/PromptImprovementDialog.tsx
• Lines: 1-1270

Signature

interface PromptImprovementDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  currentOperation: Operation;
  onSave: (
    newPrompt: string | { comparison_prompt: string; resolution_prompt: string },
    schemaChanges?: Array<[string, string]>
  ) => void;
}

export function PromptImprovementDialog(props: PromptImprovementDialogProps): JSX.Element

Import

import { PromptImprovementDialog } from "@/components/PromptImprovementDialog";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
open	boolean	Yes	Whether the dialog is visible
onOpenChange	(open: boolean) => void	Yes	Toggle dialog visibility
currentOperation	Operation	Yes	The operation whose prompt is being improved
onSave	function	Yes	Callback with the new prompt and optional schema changes

Outputs

Name	Type	Description
rendered	JSX.Element	Multi-step prompt improvement dialog with diff views

Usage Examples

<PromptImprovementDialog
  open={showImproveDialog}
  onOpenChange={setShowImproveDialog}
  currentOperation={selectedOperation}
  onSave={(newPrompt, schemaChanges) => {
    updateOperationPrompt(newPrompt);
    if (schemaChanges) applySchemaChanges(schemaChanges);
  }}
/>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment