Your AI, building in livedesign

Connect Claude

On the web and the desktop app

1. 1

   Open Settings, then Connectors, in Claude.

   Open Claude connectors (opens in a new tab)
2. 2

   Choose Add custom connector, name it livedesign and paste the address as its URL.

   URLCopy

   https://mcp-staging.livedesign.app/mcp

3. 3

   Choose Connect, then approve on the livedesign 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.

Connect ChatGPT

Connectors in developer mode

1. 1

   In ChatGPT, open Settings, then Apps & Connectors, then Advanced settings, and switch on Developer mode.

   Open ChatGPT settings (opens in a new tab)
2. 2

   Choose Create, name it livedesign, paste the address as the MCP server URL and pick OAuth.

   URLCopy

   https://mcp-staging.livedesign.app/mcp

3. 3

   Approve on the livedesign page that opens, then pick livedesign 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.

Connect Claude Code

One command in your terminal

1. 1

   Add livedesign for every project:

   TerminalCopy

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

2. 2

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

   In Claude CodeCopy

   /mcp

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

Connect Codex

OpenAI's coding agent

1. 1

   Add the server:

   TerminalCopy

   codex mcp add livedesign --url https://mcp-staging.livedesign.app/mcp

2. 2

   Sign in, and approve in the browser:

   TerminalCopy

   codex mcp login livedesign

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

Connect Gemini CLI

Google's agent in your terminal

1. 1

   Add the server:

   TerminalCopy

   gemini mcp add --transport http livedesign https://mcp-staging.livedesign.app/mcp

2. 2

   In Gemini CLI, sign in and approve in the browser:

   In Gemini CLICopy

   /mcp auth livedesign

Connect Cursor

One click, or one line of config

1. 1

   Add livedesign to Cursor in one click:

   Add to Cursor
2. 2

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

   mcp.jsonCopy

   {
     "mcpServers": {
       "livedesign": {
         "url": "https://mcp-staging.livedesign.app/mcp"
       }
     }
   }

3. 3

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

Connect VS Code

GitHub Copilot’s agent mode

1. 1

   Add livedesign to VS Code in one click:

   Add to VS Code
2. 2

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

   jsonCopy

   {
     "servers": {
       "livedesign": {
         "type": "http",
         "url": "https://mcp-staging.livedesign.app/mcp"
       }
     }
   }

3. 3

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

Connect Windsurf

Cascade’s MCP config

1. 1

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

2. 2

   Add livedesign to it:

   jsonCopy

   {
     "mcpServers": {
       "livedesign": {
         "serverUrl": "https://mcp-staging.livedesign.app/mcp"
       }
     }
   }

3. 3

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

Connect Any client

Anything that speaks remote MCP

1. 1

   Add a remote MCP server (HTTP, sometimes called Streamable HTTP) with this address:

   URLCopy

   https://mcp-staging.livedesign.app/mcp

2. 2

   If the tool can sign in to servers (OAuth), it finds livedesign’s sign-in by itself: there is no client id or secret to enter.

3. 3

   If it can’t, create an API token in livedesign’s Settings, under Account, API Tokens, and send it as a header:

   HeaderCopy

   Authorization: Bearer lwt_…