Artifact & Editor UI Components
Relevant source files
The following files were used as context for generating this wiki page:Artifact & Editor UI Components provide a specialized interface for interacting with non-conversational AI outputs such as code, documents, and spreadsheets. This system separates the chat history from high-fidelity content, allowing users to view, edit, and execute generated material in a persistent side panel.
The architecture centers around a modular definition system where each content type (kind) specifies its own rendering logic, toolbar actions, and streaming handlers. The state is synchronized across the chat interface and the side panel using shared hooks and SWR-based local state.
Sources: components/chat/artifact.tsx:34-47, artifacts/text/client.tsx:21-25, hooks/use-artifact.ts:25-30
Core Architecture and Data Flow
The artifact system relies on a central state object, UIArtifact, which tracks the current document's metadata, visibility, and streaming status. The UI transitions from an inline DocumentPreview within the chat to a full-screen or side-panel Artifact component based on user interaction or automated triggers.
The diagram shows the lifecycle of an artifact from the initial AI tool execution to its final rendering in a specialized editor.
Sources: lib/ai/tools/create-document.ts:16-30, hooks/use-artifact.ts:5-20, components/chat/document-preview.tsx:85-105
UIArtifact State Model
The state is managed globally using SWR under the "artifact" key.
| Field | Type | Description |
|---|---|---|
documentId | string | Unique identifier for the document, or "init". |
title | string | The display name of the artifact. |
kind | text | code | sheet | image | Determines which definition and editor to load. |
content | string | The raw text, code, or CSV data. |
status | streaming | idle | Indicates if the AI is currently generating content. |
isVisible | boolean | Controls whether the side panel is rendered. |
boundingBox | Object | Stores coordinates for smooth transition animations. |
Sources: components/chat/artifact.tsx:35-47, hooks/use-artifact.ts:5-17
The Artifact Class and Definitions
The system uses a generic Artifact class to standardize how different content types behave. Each "kind" must provide a configuration that includes a content component, actions (like Copy or Run), and logic for handling stream parts.
Sources: components/chat/create-artifact.tsx:75-97
Text Artifact (text)
The text artifact utilizes a rich text editor and supports a "diff" mode to compare versions. It specifically handles data-suggestion and data-textDelta stream parts.
- Initialize: Fetches suggestions for the document.
- Actions: View changes (toggle diff), Version navigation, Copy.
- Toolbar: Polish text, Request suggestions.
Sources: artifacts/text/client.tsx:21-65
Code Artifact (code)
The code artifact provides a code editor and a console for execution. It leverages Pyodide for client-side Python execution.
- Execution Logic: Captures
stdout, loads packages from imports, and handles Matplotlib plots for graphical output. - Console: Displays "in_progress", "loading_packages", "completed", or "failed" statuses.
- Actions: "Run" button to execute Python code.
Sources: artifacts/code/client.tsx:56-115
Sheet Artifact (sheet)
The sheet artifact manages tabular data using the SpreadsheetEditor.
- Parsing: Uses
papaparseto handle CSV data conversion for clipboard copying. - Actions: "Copy as .csv" cleans empty rows and columns before copying.
- Toolbar: "Format and clean data", "Analyze and visualize data".
Sources: artifacts/sheet/client.tsx:11-30
UI Components and Interaction
Artifact Side Panel
The PureArtifact component serves as the primary container. It handles versioning, manual edits, and auto-scrolling during streaming.
This sequence illustrates the debounced saving mechanism used when a user manually edits an artifact.
Sources: components/chat/artifact.tsx:135-175
Versioning and Persistence
The VersionFooter component allows users to navigate through the document's history.
- Version Change: Users can toggle between "edit" and "diff" modes.
- Restore: Users can restore a previous version by sending a DELETE request to the document API with a specific timestamp.
- Latest: Quickly jumps to the most recent version and enters edit mode.
Sources: components/chat/version-footer.tsx:34-75
Document Preview Card
The DocumentPreview component appears inline within the chat flow. It acts as a gateway to the full side panel.
- HitboxLayer: Captures clicks and calculates the
boundingBoxto trigger the side panel opening animation. - Header: Displays the artifact title and an icon representing the "kind" (e.g.,
CodeIcon,ImageIcon). - Skeleton: Displays
InlineDocumentSkeletonwhile the document is fetching or streaming initial data.
Sources: components/chat/document-preview.tsx:34-80, components/chat/document-preview.tsx:145-175
Code Execution (Python/Pyodide)
The codeArtifact implementation contains specific logic to run Python in the browser.
// Example execution flow from artifacts/code/client.tsx
const currentPyodideInstance = await globalThis.loadPyodide({
indexURL: "https://cdn.jsdelivr.net/pyodide/v0.23.4/full/",
});
currentPyodideInstance.setStdout({
batched: (output) => {
// Detects images vs text
outputContent.push({
type: output.startsWith("data:image/png;base64") ? "image" : "text",
value: output,
});
},
});
Sources: artifacts/code/client.tsx:135-155
Summary
The Artifact & Editor UI Components system provides a robust framework for handling diverse content types generated by AI. By combining a centralized state hook (useArtifact) with kind-specific definitions, the application maintains a responsive and interactive environment for document editing, spreadsheet manipulation, and code execution. The separation of chat and content ensures that high-fidelity work remains accessible and version-controlled throughout a session.