agent-integrations
@particle-academy/agent-integrations
MCP-driven agent presence — micro-MCP server, bridges, presence layer, share relay.
$
npm install @particle-academy/agent-integrationsAuthoring surface
Humans compose it
Controlled value + onChange, JSON-friendly props, terse defaults — so people (and agents) build it fast.
Inhabited surface
Agents drive it over MCP
A bridge in @particle-academy/agent-integrations exposes typed tools — agents read and mutate state through stable handles, never DOM scraping.
agent_undoagent_redoagent_history
Why
Agents live in separate processes and can't directly access DOM state — they need a wire protocol (MCP). Existing MCP setups are heavyweight for collab surfaces: they don't bridge stateful UI into agents as first-class participants. Without it, you're back to Playwright-style scraping or awkward one-off glue per surface.
agent-integrations bundles a lightweight MCP server that runs per-session, pluggable bridges to every major Fancy UI package, and a cross-package presence layer so agents show up as visible participants alongside humans.What
A transport-agnostic MCP protocol handler (
MicroMcpServer), a plain in-memory tool registry (ToolRegistry) for in-process agents, and pluggable register*Bridge factories that attach MCP tool kits to controlled state adapters (whiteboard, artboard, flow, sheets, forms, code, charts, slides, scene, screens). Each bridge translates MCP calls into reads and mutations on the surface's state props. The package also ships AgentPanel (chat + activity log), AgentCursor (on-canvas presence), activity-tracking middleware, undo stacks per agent, and token-based session sharing. Bridges are tree-shake-safe: core MCP + presence + undo always bundled; optional-peer bridges (whiteboard, artboard, flow) reach via subpaths to avoid forcing deps. Relay transports let external agents (Claude Code, Cursor) tunnel JSON-RPC frames through Reverb, WebRTC, or SSE+POST.How
Install:
npm install @particle-academy/agent-integrations. For a minimal whiteboard session: import MicroMcpServer, attachInProcess, registerWhiteboardBridge, and AgentPanel from the root barrel; then import the whiteboard bridge from the subpath @particle-academy/agent-integrations/bridges/whiteboard. Create the server, register the bridge with a state adapter (read/write callbacks on notes, shapes, viewport, etc.), attach an in-process transport, and wire AgentPanel to your UI. For external agents over relay: use RelayTransport and attachRelay with a channel (Reverb or SSE). Both in-process and relay agents call callTool("whiteboard_add_sticky", { … }) directly on the registry or the server passes MCP frames over the transport — same bridge, same tools, no duplicates.Components
5 components · click any tile for a full demo, source, and install snippet.