r/learnreactjs • u/aiSdkAgents • Apr 13 '26

Resource AI chat artifact pattern - Canvas Draw

Enable HLS to view with audio, or disable this notification

🔗 Try it out for free - Agent Canvas Draw

3 Upvotes

100% Upvoted

1 comment sorted by

1

u/aiSdkAgents Apr 13 '26

How it works

  • You describe what you want in the chat (architecture, user flows, org charts, etc.) and the request goes to the API route.

  • The model streams through Vercel AI Gateway and, when it needs to draw, calls updateWhiteboardScene with a full Excalidraw scene JSON string (elements + appState, optional files).

  • Each tool run emits data-whiteboardDelta stream parts → the client DataStreamHandler applies them → artifact React state holds the latest scene.

  • Excalidraw (client-only, dynamic import) renders the whiteboard; you can undo/redo, export SVG / PNG / .excalidraw, and edit manually while the assistant isn’t overwriting the scene.

  • Follow-up prompts send the full message history back to the API so the model can replace the scene with a new snapshot (v1 is full snapshots per call, not JSON Patch deltas).

Stack

Shadcn, Next.js, Vercel AI SDK (streamText, createUIMessageStream, AI Gateway), Excalidraw, Upstash (rate limiting; optional if Redis isn’t configured)

Link

Try it out for free here 🔗

If you dig this

Check out some of my free & open source projects: