Implementation:Ucbepic Docetl AIChatPanel

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

Overview

Concrete tool for the draggable AI chat panel that assists users with pipeline authoring in the DocETL playground.

Description

The AIChatPanel is a floating, resizable, and draggable chat window that communicates with the /api/chat endpoint. It provides contextual AI assistance for pipeline development, including prompt refinement, Jinja2 templating help, and operation review. The panel serializes the current pipeline state as context for the LLM, supports both hosted and personal OpenAI API keys, and offers suggestion prompts for common tasks.

Usage

Opened from the playground UI when the user requests AI assistance. Floats above the main workspace and can be repositioned by dragging.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/AIChatPanel.tsx
• Lines: 1-512

Signature

interface AIChatPanelProps {
  onClose: () => void;
}

const AIChatPanel: React.FC<AIChatPanelProps> = ({ onClose }) => { ... }

Import

import AIChatPanel from "@/components/AIChatPanel";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
onClose	() => void	Yes	Callback to close the chat panel

Outputs

Name	Type	Description
rendered	JSX.Element	Draggable, resizable chat panel with AI conversation

Usage Examples

<AIChatPanel onClose={() => setShowChat(false)} />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment