Artifact Preview Panel (Canvas View)

[jezweb]

Summary

Add a side-panel preview for AI-generated content, similar to Claude Artifacts or Google Gemini's canvas view.

Current State

All content (text, tool outputs, visualizations) renders inline within the chat message flow. This works well for conversational interfaces but limits the ability to view and interact with generated artifacts.

Desired Behavior

Implement a split-view layout:

• Left side: Chat messages (conversation flow)
• Right side: Artifact preview panel (generated content)

When the AI generates an artifact (code, document, visualization, etc.), it appears in the preview panel where users can:

• View formatted content (syntax highlighting, markdown rendering)
• Edit content directly
• Copy or download
• Toggle between multiple generated artifacts
• Collapse panel when not needed

Use Cases

Content Creation:

• Content rewriting with before/after comparison
• Document editing with live preview
• Blog post generation with formatting preview

Code Generation:

• Generated code with syntax highlighting
• Multiple files in tabs
• Direct copy or download

Data Visualization:

• Charts and graphs in dedicated space
• Interactive data exploration
• Export visualizations

Analysis & Reports:

• Long-form reports separate from chat
• Formatted tables and data
• Multi-section documents

UI Layout Mockup

┌──────────┬─────────────────┬──────────────────┐
│          │                 │                  │
│ Sidebar  │  Chat Messages  │  Artifact Panel  │
│          │                 │                  │
│ - Chats  │  User: "Write   │ ┌──────────────┐ │
│ - Agents │   a blog post"  │ │ # Blog Post  │ │
│ - MCP    │                 │ │              │ │
│          │  AI: "Here's    │ │ Content with │ │
│          │   your post"    │ │ formatting   │ │
│          │                 │ │              │ │
│          │                 │ │ [Copy] [↓]   │ │
│          │                 │ └──────────────┘ │
└──────────┴─────────────────┴──────────────────┘

Technical Implementation Suggestions

Layout Changes:

• Modify /src/app/(chat)/layout.tsx to support three-column layout
• Add new <ArtifactPanel> component
• Make panel collapsible/expandable

Message System:

• Add new message part type: artifact
• Or extend existing tool-ui part type
• State management for active artifact (Zustand store)

Component Structure:

New files:
- /src/components/artifact-panel.tsx
- /src/components/artifact-renderer.tsx
- /src/types/artifact.types.ts

Modified files:
- /src/app/(chat)/layout.tsx (add split-view)
- /src/components/message.tsx (handle artifact parts)
- /src/app/store/index.ts (artifact state)

Supported Artifact Types

Phase 1 (MVP):

• Markdown documents
• Code files (with syntax highlighting)
• Plain text

Phase 2 (Future):

• HTML previews
• React components (sandboxed)
• Mermaid diagrams
• Data tables

Acceptance Criteria

• Split-view layout with collapsible artifact panel
• Artifacts render separately from chat flow
• Support for markdown, code, and text content
• Syntax highlighting for code artifacts
• Copy and download buttons
• Multiple artifacts can be toggled/tabbed
• Panel state persists across page navigation
• Responsive design (collapse on mobile)
• Works with existing features (agents, MCP, workflows)

Inspiration / References

• Claude Artifacts: https://support.anthropic.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them
• Google Gemini Canvas: https://blog.google/products/gemini/google-gemini-deep-research/
• ChatGPT Canvas: https://openai.com/index/introducing-canvas/

Notes

This is a more significant architectural change than Enable Agents to Generate Downloadable Files but would greatly enhance the user experience for content generation, code creation, and document editing workflows.

The existing inline visualization system (charts, tables, code execution) would continue to work as-is. Artifacts would be opt-in for specific use cases where side-panel viewing is beneficial.

[cgoinglove]

Yes, I also think this task would be the top priority if I were to take on the next project. I'll try to schedule it soon.

[pat-mw]

@jezweb @cgoinglove I have a project where this is needed, happy to help contribute.
If you've put any more thought into this @cgoinglove / have a spec on implementation details, I can give it a go.