Shipping a real-time collaborative whiteboard where agents and humans co-author diagrams requires wiring together five separate layers—canvas control, MCP server, presence, session sharing, and activity logging—each time. Without SharedWhiteboard, apps have to hand-stitch MicroMcpServer, the whiteboard bridge, relay transports, and UI components into a working whole. That work is mechanical and repetitive; one missing piece breaks agent mutability or presence tracking.

SharedWhiteboard is a drop-in component that bundles the full agent-collaborative whiteboard stack: a Board (fancy-whiteboard) with sticky notes, shapes, connectors, and strokes; an in-page MicroMcpServer with the whiteboard bridge pre-registered (exposing tools like whiteboard_add_sticky, whiteboard_update_shape, whiteboard_set_agent_cursor); an optional SSE-based relay for external agents; share controls and session management; an AgentPanel (chat + activity log); live presence cursors and activity highlights. State is controlled via props—initialNotes, initialShapes, initialConnectors, initialStrokes, initialViewport—and broadcasts state changes to external agents on interval when broadcastEdits is true. The agent prop stamps the agent's id, name, and color into all mutations and the presence cursor. Optional onRegisterSession callback hooks session registration into the host’s relay broker; shareBaseUrl (default /whiteboard-share) points to the relay HTTP endpoints.

Import from @particle-academy/agent-integrations/components/shared-whiteboard, pass the initial board state and agent identity, and drop it into the view: <SharedWhiteboard initialNotes={notes} agent={{ id: "claude", name: "Claude", color: "#7c3aed" }} />. The component manages its own MCP server, relay attachment, and state mutations; for deeper control (e.g., custom transports or separate agent logic), use the lower-level MicroMcpServer, registerWhiteboardBridge, and Board components directly.