Loading pattern preview
BlocksArtifacts
Canvas Draw Artifact
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.
Use this when an agent should stream an Excalidraw scene into chat that users can keep drawing on by hand and export as SVG, PNG, or .excalidraw.
Loading pattern preview
Problems solved
Technical challenges this implementation handles out of the box.
- Stream Excalidraw scene JSON with data-whiteboardDelta UI parts
- Draw on an uncontrolled Excalidraw canvas inside the artifact
- Export SVG, PNG, or .excalidraw files
- Start from architecture, user-flow, or org-chart scene templates
Use cases
Products and workflows this pattern is designed to support.
- Architecture whiteboarding agents
- User-flow mapping sessions
- Org chart drafting in chat
- Excalidraw artifact prototypes
Compare with
Similar patterns, and when each one is the better fit.
Agent Slides ArtifactUse this when you are prototyping an agent that builds slide decks as a sortable, editable artifact streamed through data-slidesDelta parts.
Agent Sheet ArtifactUse this when a chat agent should stream CSV table updates into a side artifact panel the user can edit as a grid, with versions kept in memory.
Agent Mermaid ArtifactUse this when users iterate on agent-drawn Mermaid diagrams in the browser, keeping versions in memory and exporting the result as SVG or PNG.
Agent Text ArtifactUse this when an agent should stream Markdown text into a document the user can edit in a rich editor next to the chat, with versions kept in memory.
Setup
Requirements, wiring steps, and what this pattern adds to your project.
Getting started
Pick how you want to pull this pattern in. Then wire env vars and routes the same way.
- 1
Download → Next.js app
Use Download → Next.js app in the preview toolbar. You get a zip scaffold (Pro downloads rewrite preview `/view/.../api/*` paths to `/api/*` automatically).
- 2
Extract the zip and install dependencies
Unzip the archive, then run `pnpm install` (or npm / yarn) in the project folder.
- 3
Fill .env.local
The download includes .env.local placeholders when needed. Add real values for: AI_GATEWAY_API_KEY.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions in the generated project for your product.
- 5
Run the app and open the pattern route
Run `pnpm dev`, open the setup/checklist page if present, then navigate to the generated pattern route and verify responses.
Environment variables
AI_GATEWAY_API_KEYGet key
Capabilities
AI SDK APIs
streamTextcreateUIMessageStreamgatewaytoolProviders
OpenAI
External services
Upstash
Files added
22 files
app/page.tsxapp/layout.tsxapp/api/agent-canvas-draw-artifact/route.tsexcalidrawWrapper.tsxexcalidraw-client.tsxcomponents/agent-canvas-draw-demo.tsxcomponents/whiteboard-artifact-tool.tsxcomponents/whiteboard-artifact-panel.tsxcomponents/data-stream-provider.tsxcomponents/data-stream-handler.tsxcomponents/empty-state.tsxhooks/use-artifact.tsxlib/types.tslib/auto-save.tslib/create-artifact.tslib/whiteboard-artifact.tsxlib/whiteboard-document.tslib/scene-templates.tslib/artifacts.tslib/rate-limit.tslib/request-utils.tsREADME.md
Dependencies
15 total
npm packages
11AISDK@excalidraw/excalidrawUpstashdate-fnslucide-reactnanoidNext.jsReactsonnerusehooks-tsZod
Registry components
buttondraweremptytooltip
Critical files
2 files
lib/whiteboard-artifact.tsxDefines whiteboardArtifact with onStreamPart for data-whiteboardDelta, Excalidraw panel, and export actions.
agent-canvas-draw-artifact/route.tscreateUIMessageStream merges streamText with updateWhiteboardScene tool; emits data-id, data-title, data-kind, data-whiteboardDelta, data-finish.
Requirements
- Complexity
- Intermediate
- Setup time
- ~10 minutes
- Node
- 24+
- Memory
- 256MB
Upstash Redis
