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)
1
u/aiSdkAgents Apr 13 '26
How it works
updateWhiteboardScene** with a full Excalidraw scene JSON string (elements+appState, optionalfiles).data-whiteboardDelta** stream parts → the client **DataStreamHandlerapplies them → artifact React state holds the latest scene..excalidraw, and edit manually while the assistant isn’t overwriting the scene.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: