Connect AI agents#

How to register figma-agent-mcp in popular MCP clients. Install the Figma plugin first and keep the bridge green before testing tools.

#Shared prerequisites

1. Node.js ≥ 20 on your PATH (node -v, npx -v)
2. Figma Desktop + Figma Agent Kit plugin running (MCP Bridge connected)
3. Prefer unpinned npx -y figma-agent-mcp (always latest); pin with @x.y.z only for frozen installs
4. Optional custom bridge port (must match the plugin):

"env": { "FIGMA_AGENT_MCP_PORT": "1998" }

#Common stdio snippet (JSON clients)

Most editors accept this shape under mcpServers:

{
  "mcpServers": {
    "figma-agent-mcp": {
      "command": "npx",
      "args": ["-y", "figma-agent-mcp"]
    }
  }
}

#Smoke test (any client)

With a frame selected in Figma, ask the agent to:

1. list_files
2. get_selection
3. get_node / get_screenshot

You should see 37 tools once the MCP process is healthy.

#Cursor

Docs / UI: Cursor Settings → MCP (or edit JSON directly).

Paste the common JSON snippet, save, then restart / refresh MCP.

Verify in Cursor’s MCP list: figma-agent-mcp · 37 tools enabled.

#Claude Code

Official guide: Claude Code MCP quickstart

#CLI (recommended)

# User scope — available in all projects
claude mcp add --scope user figma-agent-mcp -- npx -y figma-agent-mcp

# Or project scope — writes .mcp.json (share with the team)
claude mcp add --scope project figma-agent-mcp -- npx -y figma-agent-mcp

Custom port:

claude mcp add --scope user figma-agent-mcp \
  --env FIGMA_AGENT_MCP_PORT=1998 \
  -- npx -y figma-agent-mcp

#Config files

Example .mcp.json:

{
  "mcpServers": {
    "figma-agent-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-agent-mcp"]
    }
  }
}

Restart Claude Code, then run /mcp to confirm the server is connected. Approve project .mcp.json servers on first use if prompted.

#Codex (OpenAI)

Official guide: Codex MCP

Codex uses TOML (~/.codex/config.toml, or project .codex/config.toml for trusted projects). ChatGPT desktop / Codex CLI / IDE extension share this config.

#CLI

codex mcp add figma-agent-mcp -- npx -y figma-agent-mcp

# With custom port
codex mcp add figma-agent-mcp \
  --env FIGMA_AGENT_MCP_PORT=1998 \
  -- npx -y figma-agent-mcp

codex mcp list

#config.toml

[mcp_servers.figma-agent-mcp]
command = "npx"
args = ["-y", "figma-agent-mcp"]

With env:

[mcp_servers.figma-agent-mcp]
command = "npx"
args = ["-y", "figma-agent-mcp"]

[mcp_servers.figma-agent-mcp.env]
FIGMA_AGENT_MCP_PORT = "1998"

Restart Codex / the IDE extension after editing.

#Qoder

Official guide: Qoder MCP

1. Open Qoder Settings (avatar, or ⌘⇧, / Ctrl+Shift+,)
2. Left nav → MCP
3. My Servers → + Add
4. Paste the common JSON snippet (STDIO: command npx, args as above)
5. Save — a link icon means connected; expand to see tools

Use Agent mode in Chat so the model can call MCP tools (confirm prompts as needed).

Alternatively browse MCP Square if the server appears there; for this package, manual STDIO add is the reliable path.

#CodeBuddy

Official guide: CodeBuddy Config MCP

1. Sidebar chat → CodeBuddy Settings (top-right)
2. Open the MCP tab
3. Add MCP (or install from MCP Market if listed)
4. Paste JSON, for example:

{
  "mcpServers": {
    "figma-agent-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-agent-mcp"],
      "description": "Local Figma Desktop bridge (Figma Agent Kit)"
    }
  }
}

5. Confirm green status; optional Try to Run, then use Craft Agent with Figma open

#Trae

Official guide: Trae — Add MCP servers · 中文

#UI (global)

1. Settings → MCP
2. Add → Add Manually (or marketplace if available)
3. Paste the common JSON snippet and confirm

You can also open Raw Config (JSON) and merge into Trae’s mcp.json.

#Project-level

1. Create .trae/mcp.json in the project root with the same mcpServers JSON
2. In Settings → MCP, enable project-level MCP if your Trae build exposes that toggle

SOLO / Work mode: if tools are flaky, prefer project-level config and explicitly ask the agent to use figma-agent-mcp / list_files.

#Local build instead of npx

Point any JSON client at a built binary:

{
  "mcpServers": {
    "figma-agent-mcp": {
      "command": "node",
      "args": ["/ABS/PATH/figma-agent-kit/packages/figma-agent-mcp/dist/index.js"]
    }
  }
}

Codex TOML:

[mcp_servers.figma-agent-mcp]
command = "node"
args = ["/ABS/PATH/figma-agent-kit/packages/figma-agent-mcp/dist/index.js"]

See Getting started — from source.

#Troubleshooting

More: FAQ.