Formats

Pattern

Canvas Draw Artifact

Excalidraw whiteboard artifact with data-whiteboardDelta streaming, uncontrolled canvas, SVG/PNG/.excalidraw export, scene templates (architecture, user flow, org chart), and in-memory versions — no database persistence.

IntermediateApr 2026View the full pattern on desktop
Canvas Draw Artifact preview

Problems solved

  • Stream Excalidraw scene JSON with custom UI data parts
  • Template-style Artifact class without a full chat backend

Use cases

  • Architecture and user-flow whiteboarding
  • Org charts and demos without database wiring

AI SDK APIs

streamTextcreateUIMessageStreamgatewaytool

Tags

aiexcalidrawwhiteboarddiagramarchitecturestreamingai-sdkartifacts

Requirements

Node.js
24+
Memory
256MB
Other
  • Vercel AI Gateway API key

Environment variables

External services

openaiupstash

Ready to use?

View the full interactive pattern with live preview and copy the source code.

View the pattern on desktop

Related patterns

Agent Mermaid Artifact preview

Agent Mermaid Artifact

Template-style Mermaid artifact with data-mermaidDelta streaming, diagram preview and source editor, SVG/PNG export, in-memory versions, and quick prompts — no database persistence.

aimermaid+5
View pattern →
Agent Sheet Artifact preview

Agent Sheet Artifact

Template-style sheet artifact with data-sheetDelta streaming, CSV grid editor, in-memory versions, and quick prompts — no database persistence.

aispreadsheet+5
View pattern →
Agent Slides Artifact preview

Agent Slides Artifact

Template-style slide deck artifact with data-slidesDelta streaming, sortable slide list and preview, Markdown export, in-memory versions, and quick prompts — no database persistence.

aislides+5
View pattern →
Agent Text Artifact preview

Agent Text Artifact

Template-style text artifact with data-textDelta streaming, ProseMirror Markdown editor, in-memory versions, and quick prompts — no database persistence.

aimarkdown+4
View pattern →

You’ve reached the end of this pattern.