Build with AI

Your AI, building in livediagram

Connect the AI tool you already use, then ask it for a diagram, a board, a sheet or a deck. It lands in your account, ready to edit together. Set up takes about a minute.

Your AI tool needs one address:

https://mcp.livediagram.app/mcp

Pick your AI tool How it works

Works with Claude, ChatGPT, Claude Code, Codex, Gemini CLI, Cursor, VS Code, Windsurf and any MCP client. Free, with a free account you can make while you connect.

How it works

Three steps, about a minute

One address, one approval, then you just ask. There is nothing to install or run on your computer.

Step 1
Add livediagram
Paste the address into your AI tool, or click once in Cursor and VS Code.
Step 2
Approve
A livediagram page opens. Sign in or create a free account, check where access goes, and choose Connect.
Step 3
Ask
Ask for a diagram, a board, a sheet or a deck. It lands in your account, ready to edit and share.

Connect

Pick your AI tool

Step-by-step for the tools people use most. Choose yours, follow the steps, and approve when livediagram asks.

Connect Claude

On the web and the desktop app

Open Settings, then Connectors, in Claude.
Open Claude connectors (opens in a new tab)
2
Choose Add custom connector, name it livediagram and paste the address as its URL.
URL
```
https://mcp.livediagram.app/mcp
```
Choose Connect, then approve on the livediagram page that opens.

A connector you add on the web shows up in Claude Desktop too. On a Team or Enterprise plan, an owner may need to add it first.

Connected? Try a prompt

Connect ChatGPT

Connectors in developer mode

In ChatGPT, open Settings, then Apps & Connectors, then Advanced settings, and switch on Developer mode.
Open ChatGPT settings (opens in a new tab)
2
Choose Create, name it livediagram, paste the address as the MCP server URL and pick OAuth.
URL
```
https://mcp.livediagram.app/mcp
```
Approve on the livediagram page that opens, then pick livediagram from the tools menu in a new chat.

Developer mode depends on your ChatGPT plan, and OpenAI moves its menus now and then: look for custom connectors in Settings.

Connected? Try a prompt

Connect Claude Code

One command in your terminal

Add livediagram for every project:

Terminal

claude mcp add --transport http --scope user livediagram https://mcp.livediagram.app/mcp

2
In a Claude Code session, run /mcp, choose livediagram and Authenticate. Approve in the browser.
In Claude Code
```
/mcp
```

Working in a repository? The livediagram CLI is another way in, on the same account.

Connected? Try a prompt

Connect Codex

OpenAI's coding agent

Add the server:

Terminal

codex mcp add livediagram --url https://mcp.livediagram.app/mcp

2
Sign in, and approve in the browser:
Terminal
```
codex mcp login livediagram
```

Prefer config files? Add [mcp_servers.livediagram] with url = "https://mcp.livediagram.app/mcp" to ~/.codex/config.toml.

Connected? Try a prompt

Connect Gemini CLI

Google's agent in your terminal

Add the server:

Terminal

gemini mcp add --transport http livediagram https://mcp.livediagram.app/mcp

2
In Gemini CLI, sign in and approve in the browser:
In Gemini CLI
```
/mcp auth livediagram
```

Connected? Try a prompt

Connect Cursor

One click, or one line of config

Add livediagram to Cursor in one click:
Add to Cursor

Or add it by hand to ~/.cursor/mcp.json:

mcp.json

{
  "mcpServers": {
    "livediagram": {
      "url": "https://mcp.livediagram.app/mcp"
    }
  }
}

In Cursor’s MCP settings, choose to sign in to livediagram, then approve in the browser.

Connected? Try a prompt

Connect VS Code

GitHub Copilot’s agent mode

Add livediagram to VS Code in one click:
Add to VS Code

Or add it by hand to .vscode/mcp.json:

json

{
  "servers": {
    "livediagram": {
      "type": "http",
      "url": "https://mcp.livediagram.app/mcp"
    }
  }
}

Start the server when VS Code asks, allow the sign-in, and use it from Copilot Chat in agent mode.

Connected? Try a prompt

Connect Windsurf

Cascade’s MCP config

In Cascade, open the MCP settings and choose to view the raw config (mcp_config.json).

Add livediagram to it:

json

{
  "mcpServers": {
    "livediagram": {
      "serverUrl": "https://mcp.livediagram.app/mcp"
    }
  }
}

Refresh the servers, then sign in to livediagram and approve in the browser.

Connected? Try a prompt

Connect Any client

Anything that speaks remote MCP

1
Add a remote MCP server (HTTP, sometimes called Streamable HTTP) with this address:
URL
```
https://mcp.livediagram.app/mcp
```
If the tool can sign in to servers (OAuth), it finds livediagram’s sign-in by itself: there is no client id or secret to enter.
3
If it can’t, create an API token in livediagram’s Settings, under Account, API Tokens, and send it as a header:
Header
```
Authorization: Bearer lvd_…
```

Running your own livediagram? Use your own MCP host in place of mcp.livediagram.app, still ending in /mcp.

Connected? Try a prompt

Try it

Your first prompts

Connected? Paste one of these into your AI tool, or ask in your own words. Mentioning livediagram helps it pick the right tool.

Map a codebase
“Read this repository and draw its architecture as a livediagram diagram: the main services, what each one owns, and how requests flow between them.”
Turn steps into a flowchart
“Make a livediagram flowchart of how a new customer signs up, from landing page to first invoice, with a decision for each place they can drop off.”
Plan a launch
“Create a livediagram kanban board for launching our new website, with cards for design, copy, build, testing and go-live, and share a link I can send the team.”
Build a deck
“Build a five-slide livediagram deck that explains our product to a new hire: the problem, who it is for, how it works, what is next, and how to get help.”
Write it up
“Write up the decisions from this conversation as a livediagram article, with a short summary first and a section per decision.”
Find and improve
“Find my livediagram document about onboarding, show it to me, and suggest three ways to make it clearer. Make the changes once I agree.”

What it can do

Everything you make in livediagram

Your AI gets the same building blocks you have in the editor, and everything it makes is yours to change.

Diagrams from a sentence
Flowcharts, architecture, org charts, mind maps and state machines. Your AI names the boxes and links; livediagram lays them out. Mermaid works too.
Boards and templates
Kanban, sprints, retros, SWOT and more from the template library, with Plan cards your AI can add, edit and move.
Sheets
Spreadsheets with formulas, formatting, dropdowns and sorting, built from rows or CSV and read back by cell.
Slides, posters and logos
Decks from ready-made slide layouts, infographics and logo artboards, all on Illustrate pages you can polish by hand.
Articles
Written up in Markdown and flowed onto pages, then read back and revised whenever you ask.
Find and read
Searches your documents and your teams’, and reads any tab back as an outline and a picture.
Share links
Turns a document into a link for your team, as a Participant link unless you ask for another role.
Live, and undoable
Changes land on an open canvas as they happen, outlined so you can see them, with Undo one click away.

In your control

Safe to connect

Connecting needs a free livediagram account, so your AI's work is saved to you. The canvas itself never needs one.

Create a free account Read the full guide

You approve every connection
The approval page says exactly which site the access goes to. Nothing connects until you choose Connect.
Read-only, if you prefer
Switch on Read-only access and the AI can find and read your documents, but never change them. Our server enforces it.
Revoke it any time
Each connection is an API token named after the tool, in Settings › Account › API Tokens, and lasts six months. Revoke it and access stops at once.
Your AI does the thinking
livediagram runs no AI model of its own here. It checks, lays out and saves what your tool asks for.

If it doesn't connect

The page says the request has expired

A connection request lasts ten minutes. Start the connection again from your AI tool.

It says I have reached my limit of API tokens

You can have ten unexpired tokens. Revoke one in Settings › Account › API Tokens, then connect again.

My tool keeps asking me to sign in

The token it held may have expired (they last six months) or been revoked. Remove the connection in your tool and add it again.

I run my own livediagram

Use your own MCP host in place of mcp.livediagram.app, still ending in /mcp. The MCP server is optional and needs accounts set up on your deployment.

Still stuck? The Connecting AI Tools guide covers every tool in more depth, or get in touch.

Your AI, building in livediagram

Three steps, about a minute

Add livediagram

Approve

Ask

Pick your AI tool

Connect Claude

Connect ChatGPT

Connect Claude Code

Connect Codex

Connect Gemini CLI

Connect Cursor

Connect VS Code

Connect Windsurf

Connect Any client

Your first prompts

Map a codebase

Turn steps into a flowchart

Plan a launch

Build a deck

Write it up

Find and improve

Everything you make in livediagram

Diagrams from a sentence

Boards and templates

Sheets

Slides, posters and logos

Articles

Find and read

Share links

Live, and undoable

Safe to connect

You approve every connection

Read-only, if you prefer

Revoke it any time

Your AI does the thinking

If it doesn't connect