Implementation:Ucbepic Docetl APIKeysDialog

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

Overview

Concrete tool for the API keys configuration dialog in the DocETL playground.

Description

The APIKeysDialog provides a form for users to enter and manage their LLM provider API keys. It pre-populates fields for common providers (OpenAI, Azure, Anthropic, Gemini, XAI, TogetherAI) and allows adding custom key-value pairs. Keys are stored only in memory via the PipelineContext and are cleared on page refresh for security. The dialog merges existing keys with defaults on open and filters out empty entries on save.

Usage

Opened from the playground toolbar when the user needs to configure API keys for LLM providers. Required before running pipelines that call external LLM APIs.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/APIKeysDialog.tsx
• Lines: 1-236

Signature

interface APIKeysDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function APIKeysDialog({ open, onOpenChange }: APIKeysDialogProps): JSX.Element

Import

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

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

Outputs

Name	Type	Description
rendered	JSX.Element	API keys configuration dialog with provider fields

Usage Examples

<APIKeysDialog
  open={showApiKeys}
  onOpenChange={setShowApiKeys}
/>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment