Skip to content
MCP sync — your coding agent now edits the canvasSee how it syncs

Architecture that stays in sync with your code

Describe a system in plain English and refine it on a live canvas. Your coding agent keeps the diagram in sync through MCP. Export a spec you'd commit to the repo.

Free plan, no card required — starts with 14 days of full Pro.

The canvas, exactly as you'll use it

Teammates, the AI agent, and your coding agent over MCP — all editing the same graph.

Two engineers on one canvas — live cursors, presence, and autosave.

Collaborate. Two engineers on one canvas — live cursors, presence, and autosave.

From plain English to a diagram your agent maintains

Generate a diagram from a description, refine it with your team, and give your coding agent a scoped token to keep it current.

Your coding agent edits the diagram

Claude Code, Cursor, or any client that speaks the Model Context Protocol reads your architecture and writes changes back to it — so the diagram is a thing you maintain by working, rather than a wiki page that goes stale. Access is a scoped token you mint, and revoke.

10 tools in all — read on every plan, write on Pro, or $4/mo on its own. Tokens scope to chosen projects and carry an expiry.

See how to connect
Prompt → diagram

Describe it; the agent draws it

Describe your system in plain English, and cancel a run whenever you like. The agent decides the components and how they connect; a deterministic layout engine places them — so you get a readable diagram, not a tangle.

Two architects, one board

Live cursors, presence, and shared undo — plus a distinct cursor for the AI so you can watch it build. Invite teammates by email: 3 per project on Free, 9 on Pro.

Canvas out as Markdown

Generate a Markdown spec from the canvas — overview, architecture, components, data flow, technology stack, design decisions — then download it into the repo.

Direct Edit

Drag it; everyone sees it

Drag nodes, draw edges, reroute connections — every change lands for everyone in the room, undo and redo included, and the whole board autosaves as you work.

Start from a working diagram

Open a working microservices, CI/CD pipeline, or event-driven diagram and edit from there instead of from an empty canvas.

Six shapes, eight identities, real containers

Six shapes and eight color identities, plus containers that group a subsystem — so the diagram encodes structure rather than just boxes.

One canvas, from the first sentence you type to the spec you commit.

Start for free

Connect your coding agent

Loftline runs a Model Context Protocol (MCP) server. Claude Code, Cursor, or any MCP client reads the live graph, then writes changes back. The server reaches your diagram and never your repository; your agent is the only thing that sees both.

Every token

  • Read-only, or read and write — you choose per token
  • Scoped to the projects you choose
  • Expiry from 30 days or never, revocable at any time
  • 60 requests a minute

Your codebase

where the agent works

Claude Code / Cursor

any MCP client

mcp read · mcp write

Solid is a sync call. Dotted is a logical relationship, not an MCP link.

  1. 01

    Mint a scoped token

    In the editor, open Settings → MCP. Choose which projects the token can reach, how long it lasts, and whether it may write. Copy it once — tokens are stored hashed and never shown again.

  2. 02

    Add the server

    Run the connect command. Any client that speaks Streamable HTTP with a bearer header works — Claude Code, Cursor, or your own. Configuring one by hand takes three values: the endpoint https://loftline.dev/api/mcp, transport http, and the header Authorization: Bearer YOUR_TOKEN.

    claude mcp add --transport http loftline https://loftline.dev/api/mcp --header "Authorization: Bearer YOUR_TOKEN"

    Replace the marked YOUR_TOKEN with the token from step 1. If a call comes back 401, that placeholder is still in place: run claude mcp remove loftline and add it again.

  3. 03

    Your agent reads and writes

    It calls get_architecture to see the live graph, then add_node and add_edge to change it. You never send coordinates: Loftline computes the layout, so a diagram an agent wrote is still one a person can read.

Read every plan

  • list_projects

    List the projects this token can reach, and your role on each.

  • get_architecture

    Read a project's live nodes, containers, and edges.

Write Pro, or $4/mo on its own

A write token reaches only the projects you scoped it to, and you can revoke it at any time — those two are the controls. Within that scope an agent can delete nodes, edges and containers as well as add them. Its edit lands live for everyone in the room, and unlike a person's it is not in anyone's undo stack.

8 tools over nodes, edges and containers

nodes

  • add_node

    Add a node. Logical fields only — position is computed for you.

  • update_node

    Change a node's label, shape, color, or container membership.

  • delete_node

    Delete a node, and any edges connected to it.

edges

  • add_edge

    Connect two nodes or containers — solid, dashed, or dotted.

  • delete_edge

    Delete an edge by id.

containers

  • add_container

    Group a logical module into a labeled container.

  • update_container

    Change a container's label or color.

  • delete_container

    Ungroup a container — its nodes survive as top-level nodes.

Start with a read-only token. No JSON config, no OAuth.

A diagram that survives the next hundred commits

Describe a system once. After that your coding agent writes changes back through the Model Context Protocol, so the diagram and the spec keep describing what you actually shipped.

01

Describe the system

Type your architecture in plain English — services, databases, and how they connect.

02

It arrives as a real graph

Nodes and edges land on the canvas as the agent maps your system, placed by a deterministic layout engine.

03

The spec falls out of the graph

A Markdown technical specification, generated from the canvas and ready for the repo — regenerated whenever the graph changes, not exported once.

04

Your agent keeps it true

As you ship, your coding agent writes the change back through MCP — the Model Context Protocol — using a token you scope and can revoke. The graph above updates itself and the spec regenerates from it. Nothing gets re-typed.

A hundred commits later, the diagram still describes the system you actually shipped.

Free to design. Paid to stay in sync.

Every plan starts on the same canvas. Pro is the one your coding agent can write back to.

Annual billing. Free: $0 per month. Includes 14 days of full Pro, no card required. Pro: $9.58 per month. Billed annually at $115 — save 20%.

Free

Design a system and try living sync — free forever.

$0 per month

Includes 14 days of full Pro, no card required

Get started free

No card required.

MCP read access

Your agent can read the canvas, but not change it. How MCP write access works

Projects
15
Canvas storageacross all projects
10 MB
AI tokensper month
50,000
Collaboratorsper project
3
  • Included:All 3 starter templates
  • Included:Real-time collaboration

Pro

Living architecture

Let your coding agent keep every diagram in sync — living architecture.

$9.58 per month

Billed annually at $115 — save 20%.

Start free trial

14-day free trial. No card required. Cancel anytime.

MCP read and write access

Claude Code and Cursor edit the canvas as the code changes. How MCP write access works

Projects
50
Canvas storageacross all projects
40 MB
AI tokensper month
500,000
Collaboratorsper project
9
  • Included:All 3 starter templates
  • Included:Real-time collaboration

Every figure above comes from the same limits the app enforces.

What happens when I hit a limit?

Questions, answered

Everything a technical evaluation usually has to email someone to find out.

Start with 14 days of Pro

How it works

A collaborative workspace for system design. You describe a system in plain English, an AI agent maps it onto a shared canvas, your team refines it together in real time, and you export a technical specification as Markdown. Your coding agent can then keep the diagram in step with the code through MCP.

Your work & your data

Plans & limits