Chalkline

What it is

Chalkline is an architecture diagram canvas that a person and an AI agent edit at the same time, on the same model. Describe a system in plain language and the agent draws it: services, databases, queues, caches, users, labelled edges, auto-layout. Then drag boxes, rename them in place, draw your own arrows, delete what you don't like. The agent reads the live canvas through WebMCP before every change, so it builds on your edits instead of overwriting them.

Live: https://chalkline-steel.vercel.app · Code: https://github.com/chinesepowered/chalkline

Why this is a strong fit for WebMCP

Diagram tools are famously hostile to agents. The state lives in an SVG or a canvas; there is no reliable DOM to click, and screenshots lose the graph structure. Chalkline turns the diagram itself into ten structured tools registered with document.modelContext.registerTool:

get_diagram, add_node, update_node, remove_node, connect, disconnect, auto_layout, highlight_nodes, clear_diagram, export_mermaid

Any WebMCP-capable agent, whether ChatGPT's in-app browser, Chrome with WebMCP enabled, or the built-in co-author, sees exactly the model the human is manipulating on screen. Nodes are addressable by id or label, results come back as text the agent can reason about, and read-only / destructive hints are set on the annotations.

How it creates a better experience

• No description overhead. You don't have to explain your changes to the agent. You just make them. The agent calls get_diagram and sees the renamed node, the moved box, the new arrow.
• Visible agency. Every agent action is shown as a tool call with its arguments and latency. Agent-added nodes pulse in and carry an "agent" badge; nodes you touch are badged "you".
• Shared attention. Ask "what's the single point of failure?" and the agent answers and highlights the nodes on the canvas with highlight_nodes, so you are literally looking at the same thing.
• Portable output. export_mermaid returns the diagram as Mermaid source for docs and READMEs.

What people and agents can do together that was hard before

Before: paste a description into a chat, get back Mermaid text, render it somewhere else, edit by hand, lose the agent. Or let an agent click around a whiteboard app by screenshot and watch it flail.

Now: the diagram is one live artifact with two authors. The human does what humans are good at (taste, layout, naming, "no, not like that") and the agent does what agents are good at (filling in the twenty nodes of a microservice diagram in ten seconds, rewiring edges, reviewing the design). Neither has to wait for the other to finish.

How WebMCP is implemented

• lib/webmcp.ts is a tiny registry: it registers each tool with document.modelContext.registerTool(..., { signal }) and unregisters via AbortController when the canvas unmounts, so the tool set always matches what's on screen. Native calls from the browser agent and calls from the in-page agent go through the same execute and are logged in one activity feed.
• lib/tools.ts defines the ten tools with JSON Schema input, natural-language descriptions and annotations.
• lib/diagram.ts is the shared store (React Flow nodes/edges + dagre layout); both the UI and the tools mutate it, which is the whole point.
• The built-in co-author (components/AgentPanel.tsx + app/api/agent/route.ts) is a Gemini function-calling loop that discovers tools from the registry and dispatches through WebMCP, with a model fallback chain for free-tier rate limits.

Tested in Chrome 153 with chrome://flags/#enable-webmcp-testing (DevTools → Application → WebMCP shows all ten tools and lets you run them by hand) and with the in-page Gemini agent.

Stack

Next.js 16 · React Flow · dagre · Tailwind 4 · Gemini function calling · WebMCP · Vercel

Built With

• dagre
• gemini
• next.js
• react
• react-flow
• tailwind
• typescript
• vercel
• webmcp