AI Studio

What this area does

AI Studio is the interactive workspace for exploring document extraction, field selection, and prompt-driven analysis. It combines a preview-centric UI with schema and file management controls.

Primary implementation

The AI Studio surface is assembled from src/components/aistudio/ and its playground sub-tree:

AiStudio.jsx
InteractiveWelcome.jsx
components/SchemasPanel.jsx
components/SchemaFieldsPanel.jsx
components/SchemaFieldsSidebar.jsx
components/Sidebar.jsx
components/FileList.jsx
components/FilePreviewSection.jsx
aplayground/AIPlayGround.jsx
aplayground/FieldSelection.jsx
aplayground/PlaygroundResultView.jsx
aplayground/hooks/useAIPlaygroundData.js
aplayground/hooks/usePromptSubmission.js
hooks/useAiStudioState.js
hooks/useZoomControls.js

Main responsibilities

let users inspect files and schemas side by side,
select fields for extraction,
submit prompts and observe results,
manage zoom/pan behavior in preview-centric views,
keep schema and prompt state synchronized with the surrounding workspace contexts.

Relationships to other systems

AI Studio depends on the shared file preview components, schema utilities, and workspace contexts. It is intentionally adjacent to the live test and schema-generator flows because those areas reuse the same document and schema concepts.

Invariants

Zoom state should not leak across unrelated workspace views.
Selected field state must stay consistent with the schema data model used by the rest of the app.
Prompt submission and result views should be decoupled from the chrome so the workspace can evolve without rewriting the data flow.

Validation

The AI Studio workflow is best checked with the component tests around shared preview/state behavior and the browser workflows that traverse agent and schema preflight pages.