Connect your AI agent over MCP

Connect Cursor, Claude Code, Codex, or any MCP client to your M2 canvas over the Model Context Protocol.

Overview

You can think of an MCP (Model Context Protocol) server as an authenticated API that an AI agent can use to read and write data in a specific app.

M2 runs an MCP server, so any MCP-compatible agent can join your canvas and build production UI alongside your team — placing, inspecting, and rearranging components in real time. This guide connects an agent to your hosted M2 workspace.

Before you start

You’ll need:

• An M2 account with a workspace — sign up free.
• An API key, created in your workspace settings under API keys.

Every agent connects to the same remote endpoint over Streamable HTTP:

https://mcp.m2ui.ai/mcp

Authentication is via OAuth or an API key passed as a bearer token.

Connect your agent

Pick your agent below. The CLI clients take a single command; everything else uses a small JSON config.

Cursor

Add M2 to your Cursor MCP config — ~/.cursor/mcp.json (global) or .cursor/mcp.json (per project):

{
  "mcpServers": {
    "m2ui": {
      "url": "https://mcp.m2ui.ai/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Claude Code

claude mcp add m2 --transport http "https://mcp.m2ui.ai/mcp"

Authenticate with OAuth when prompted, or pass your API key as a bearer token.

Codex

codex mcp add m2 --transport http "https://mcp.m2ui.ai/mcp"

opencode

opencode mcp add m2-canvas --type remote --url "https://mcp.m2ui.ai/mcp"

Other MCP clients

Any client that supports remote Streamable HTTP MCP works. Point it at the endpoint and pass your API key as a bearer token:

{
  "mcpServers": {
    "m2ui": {
      "url": "https://mcp.m2ui.ai/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Verify the connection

Open a canvas and ask your agent to read the current state — for example, “list the nodes on my canvas.” If it returns your canvas contents, you’re connected. Your agent also shows up as connected in the canvas Connect panel.

Troubleshooting

tl;dr — most issues are an invalid API key or no open canvas.

• The agent can’t see your canvas. Make sure you’ve opened a canvas, and that your API key belongs to that workspace.
• Unauthorized or connection refused. Double-check the endpoint (https://mcp.m2ui.ai/mcp) and that your bearer token is a current, valid API key.
• The tools don’t show up. Restart your agent after adding the server so it re-reads its MCP config.

What your agent can do

Once connected, your agent has tools to read and build on the canvas:

• Read — list nodes, inspect a node, read the tree, get the current selection, design tokens, and available component types.
• Build — add compositions and nodes, update props, add / move / remove children, resize, duplicate, and batch-add nodes.
• Visual — screenshot the canvas or capture a single node, so the agent can see what it built.
• Components — create and list custom components.

Agents share one live canvas, so every change appears instantly for your teammates and any other connected agent.

Next steps

• Open the Connect panel on any canvas to copy a ready-made setup for your agent.
• Bring more than one — M2 is multiplayer for humans and agents.