Skip to main content

​
Overview

Artifacts is a structured tool return format used to render rich content (HTML, code, diff, charts, etc.) in the Trajectory area instead of displaying raw text. Rendering adopts a VSCode light style with Prism.js syntax highlighting and line numbers.

​
Background

Current tool return results have the following issues:
  1. Inconsistent formats: Different tools return different formats
  2. Difficult frontend parsing: Relies on regex to detect content types
  3. Limited rendering: Cannot distinguish renderable content from plain text
  4. Poor extensibility: Every new type requires modifying frontend detection logic

​
Data Structure Design

​
ToolResultContent

Structured representation of tool return content with the following fields:
FieldTypeDescription
typestringContent type (see table below)
datastringContent data
languagestring (optional)Programming language identifier
titlestring (optional)Title (also used for language detection via file extension)
metaobject (optional)Additional metadata (e.g. old_content for diff)

​
ToolResult

Standard tool return format:
FieldTypeDescription
successbooleanWhether successful
messagestringResult message (concise, for LLM consumption)
contentToolResultContent (optional)Structured content (for user display)
file_pathstring (optional)Associated file path
filesSandboxFile[] (optional)List of generated files

​
SandboxFile

File metadata returned by sandbox operations:
FieldTypeDescription
namestringFile name
typestringFile type (document, code, image, other)
sandbox_pathstringFile path inside the sandbox
urlstring (optional)Cloud storage URL (e.g. Supabase Storage)
contentstring (optional)File content or base64
sizenumber (optional)File size in bytes

​
Content Types

typeDescriptionRendering Method
textPlain text<pre> or Markdown renderer (auto-detected)
htmlHTML content<iframe> sandbox rendering
markdownMarkdownMarkdown renderer
codeCodePrism.js syntax-highlighted CodeBlock with line numbers
jsonJSON dataPrism.js highlighted JSON viewer with line numbers
imageImage<img>
errorError messageRed error styling

​
Diff Rendering

For edit and write tool results, when meta.old_content is present, the frontend renders a DiffPreview component instead of the standard artifact renderer. This provides a Cursor-like split/unified diff view.

​
How It Works

  1. Backend: The write tool reads the file’s previous content before overwriting, and the edit tool captures the original file content before applying changes. Both store the old content in content.meta.old_content.
  2. Frontend: The WorkspaceArea component detects edit/write results containing meta.old_content and renders a DiffPreview using react-diff-viewer-continued, with Prism.js syntax highlighting based on the file extension.
  3. Fallback: For edit calls where meta.old_content is unavailable, the frontend falls back to diffing parameters.old_string vs parameters.new_string (snippet-level diff).

​
Diff Stats on ToolCallCard

When a tool call completes, the ToolCallCard header displays inline diff statistics (+N / -N) computed from the old and new content. This gives users an at-a-glance view of how much code was added or removed.

​
Frontend Rendering

The frontend selects the corresponding rendering component based on the content.type field:
  • HTML: Sandbox iframe preview with device-width presets (desktop/tablet/mobile) and deploy capability
  • Markdown: Full Markdown renderer
  • Code: VSCode-inspired light-themed table layout with line numbers, Prism.js syntax highlighting, and collapsible long files (>20 lines)
  • JSON: Same table-based layout as code, with JSON-specific highlighting
  • Image: Direct <img> display
  • Error: Red error styling
  • Diff (edit/write): Unified diff view with added/removed line highlighting

​
Raw Mode

The workspace area supports toggling between Preview and Raw mode. Raw mode displays parameters and results as Prism.js-highlighted JSON with a copy button on section headers, replacing the previous Monaco Editor-based approach for lighter weight and faster rendering.

​
Backward Compatibility

  • The frontend supports both new and old formats
  • Old format (plain text) is wrapped as content with type: "text"
  • Progressive migration without affecting existing functionality