AI Whiteboard
Real-time CRDT canvas · Structured AI agent · System design workspace
A collaborative system-design workspace where developers can visually model software architectures and use AI to analyze, explain, and modify them.
What is AI Whiteboard?
Unlike generic drawing tools that treat canvases as dumb pixel arrays or freeform vector paths, this whiteboard models software architecture as a semantic, queryable graph of typed components, protocols, and data boundaries.
The core engine combines real-time multi-user CRDT synchronization (powered by Yjs and WebSockets) with an AI Copilot that inspects structured board state, proposes validated AST mutations, and presents staged visual diffs requiring explicit developer confirmation before anything mutates.
Engineering Highlights
04 Core PillarsCRDT-Driven State Synchronization
Conflict-free multi-user canvas replication
Utilizes Yjs CRDT documents over WebSockets with client-side peer awareness to deliver sub-50ms cursor tracking and concurrent, lock-free diagram editing.
Structured AI Tool Execution
Deterministic JSON AST mutations
AI agents do not produce unstructured prose; they execute validated operations (createNode, updateNode, deleteNode, createEdge, moveNode) against typed board models.
Human-in-the-Loop Diff Verification
Visual staged change inspection
All AI-proposed modifications enter an isolated staging layer that renders visual additions, updates, and deletions for explicit user approval before mutating the shared canvas.
Viewport Virtualization & Spatial Indexing
High-density graph performance
Implements spatial bounding-box indexing to cull off-screen nodes and connectors, maintaining fluid 60 FPS pan and zoom interactions across hundreds of architecture elements.
Technology Stack
Frontend & Canvas
Real-Time & Collaboration
AI & Tool Execution Engine
Storage & Infrastructure
Want to see how it was built?
Explore the detailed technical case study covering database transactions, auth primitives, fail-fast validation, and lessons learned.