Visual Artifacts & Interactive Sandboxes

The Artifacts Canvas is a dedicated, interactive split-screen workspace in isagent.io/app. When an agent generates structured content—such as code files, architecture diagrams, live React applications, or technical reports—it renders them inside an independent right-hand canvas rather than cluttering the chat stream.


┌─────────────────────────────────┬──────────────────────────────────┐
│  Chat Timeline (Left)           │  Artifacts Canvas (Right)        │
│                                 │                                  │
│  User: Create a real-time       │  [Preview] [Code] [Diff] [Share] │
│  order tracking dashboard.      ├──────────────────────────────────┤
│                                 │  📦 React Dashboard Sandbox      │
│  Agent: I have generated the    │  • Order #10492: In Transit      │
│  React component and rendered   │  • Carrier: FedEx International  │
│  it in the live preview.        │  • ETA: 2h 15m (Real-time sync)  │
└─────────────────────────────────┴──────────────────────────────────┘

Supported Artifact Types

Type	Identifier	Renderer / Capabilities
Interactive Web (React/HTML)	`application/vnd.isa.react`	In-browser Sandpack live runtime; execute interactive UI without local setup.
Code Source	`text/x-[language]`	Monaco / Shiki syntax highlighter for 40+ languages; one-click copy and download.
Git Unified Diff	`text/x-diff`	Side-by-side or unified diff view highlighting added and deleted code lines.
Mermaid Diagrams	`text/vnd.mermaid`	Visual flowcharts, sequence diagrams, entity-relationship diagrams, and statecharts.
Structured Markdown	`text/markdown`	Formatted multi-section reports, technical RFCs, and documentation artifacts.
Data Tables	`text/csv` / `application/json`	Client-side sortable tables with CSV and Excel export options.

Live Sandbox Execution (Sandpack)

For frontend prototypes, the Artifacts Canvas embeds an isolated browser-based WebContainer sandbox:

Zero Local Dependencies: Dependencies like lucide-react, tailwindcss, and @tanstack/react-table are bundled and executed entirely client-side.
Hot Module Reloading: When the agent modifies component code, the live preview updates instantaneously without losing state.
Responsive Viewport Switcher: Toggle preview dimensions between Desktop (1280px), Tablet (768px), and Mobile (375px).

Git Diff Mode

When working on code refactoring or bug fixes, the artifact viewer displays code edits as precise Git diffs:

Red Highlight: Deleted or replaced lines.
Green Highlight: Newly introduced lines.
Copy Patch: Copy standard unified diff format compatible with git apply.

Artifact Versioning & History Rewind

Each artifact retains an immutable version trail across the session:

Version Selector: Switch between v1, v2, and v3 to observe how the agent refined the code or diagram across prompts.
One-Click Revert: Revert to any previous version with a single click.
Export Options: Download artifacts directly as .tsx, .py, .svg, .md, or .pdf.