> Agent-readable docs index: /llms.txt. Download /docs.zip to grep all markdown files locally.

---
title: 'Connecting Framer MCP Server across Developer Tools'
sidebarTitle: 'Connect Framer MCP'
icon: lucide:plug
url: 'https://localhost:8040/mcp/connect?userId=123&secret=abc'
description: 'Quick reference for integrating https://mcp.unframer.co/mcp with popular AI-assisted editors and the OpenAI Responses API.'
---

import { McpCodeBlock, InstallInCursorButton } from '../components/mcp-guide-components.tsx'

# How to connect Framer MCP server

> **Note:** All code snippets below already include your user session ID and secret. Do not share these URLs with others.

> **Important:** Using **Framer MCP** requires that the *Framer MCP plugin is open inside the Framer app*. Only one MCP plugin can be open at any time; the server will control whichever Framer project currently has the plugin open.

## Automatic Install

Run the following command to automatically install Framer MCP to your preferred AI client:

<McpCodeBlock snippet="install" />

This will prompt you to choose which client to install to: Cursor, Claude Code, Claude Desktop, VS Code, Zed, and more.

***

## Manual Install

Below are manual configuration instructions for each AI client.

### Cursor

<InstallInCursorButton />

Or configure manually:

<McpCodeBlock snippet="cursorConfig" />

1. Save to project root, or `~/.cursor/mcp.json`.
2. Restart Cursor and enable Agent mode.
3. Ask in the agent panel: "What tools do you have available?" to make sure Framer MCP is connected.
4. Enable the Framer MCP tool in Cursor settings if it is still disabled.

***

### Claude Code

Use the following command from the current project directory:

> **Important:** You must keep the quotes around the URL or Claude can drop some query params.

<McpCodeBlock snippet="claudeCli" />

This generates the following file:

<McpCodeBlock snippet="claudeProjectConfig" />

> **Important:** The config above only makes Framer MCP available when you call `claude` from the same directory as `.mcp.json`. Omit `-s project` only if you want the MCP globally available.

***

### Claude Desktop without a Max subscription

Without a Max subscription, Claude Desktop may not support remote MCP directly. Bridge through `mcp-remote` instead:

<McpCodeBlock snippet="claudeDesktopConfig" />

***

### OpenCode

Create `opencode.json` in your project root, or use `~/.config/opencode/opencode.json` globally:

<McpCodeBlock snippet="opencodeConfig" />

1. Save the config.
2. OpenCode detects and connects to the MCP server.
3. Ask "What tools do you have available?" to verify Framer MCP access.

***

### Claude Website with a Max subscription

1. Open **Settings → Connectors → Create**.
2. Name the connector `Framer`.
3. Copy and paste this URL:

<McpCodeBlock snippet="mcpUrl" />

4. Save and enable the connector.

***

### Claude Desktop with a Max subscription

If you have a Max subscription, follow the website steps above. The same MCP connector is also available in the desktop app.

***

### Zed

Add this to `~/.config/zed/settings.json`:

<McpCodeBlock snippet="zedConfig" />

Reload the Agent panel. A green dot means the server is connected.

***

### VS Code and GitHub Copilot

1. Use VS Code 1.102 or newer with an active Copilot subscription.
2. Open the command palette and run `MCP: Add Server`.
3. Paste the MCP URL. VS Code creates this file:

<McpCodeBlock snippet="vscodeConfig" />

4. Switch Copilot Chat to Agent mode to invoke tools.

***

### Programmatic control via OpenAI JS SDK Responses API

<McpCodeBlock snippet="openaiAgent" />

The agent streams tool calls to Framer MCP and returns status when complete.

***

### Codex CLI and VS Code extension

Add this to `~/.codex/config.toml`:

<McpCodeBlock snippet="codexConfig" />

1. Create or edit `~/.codex/config.toml`.
2. Add the Framer MCP server configuration above.
3. Restart Codex CLI for changes to take effect.
4. Ask Codex "What tools do you have available?" to verify the connection.

If you get a connection timeout, install `mcp-remote` globally:

```bash
npm i -g mcp-remote
```

Then update your config to use `mcp-remote` directly:

<McpCodeBlock snippet="codexConfigAlt" />

***

### VS Code native MCP support

For VS Code's built-in MCP support, create `.vscode/mcp.json`:

<McpCodeBlock snippet="vscodeConfig" />

VS Code 1.99 or newer is required. Make sure `chat.mcp.enabled` is enabled.

***

### Remote MCP bridge for stdio-only clients

If your tool only supports stdio transport, use `mcp-remote` to bridge remote HTTP:

<McpCodeBlock snippet="remoteBridge" />

This creates a local stdio process that forwards to the remote HTTP server.

***

## How to check MCP availability

Ask your assistant:

> Do you have access to the Framer MCP tool?

Then try a small action:

> Rewrite the current page text.

If the integration is successful, the tool should respond or attempt the requested action. If you receive an error about tool access, check that the Framer MCP plugin is open and your configuration matches the relevant section above.

***

## Troubleshooting cheatsheet

| Symptom                          | Quick fix                                                                      |
| -------------------------------- | ------------------------------------------------------------------------------ |
| Timeouts or very slow calls      | Ensure the **Framer MCP plugin is open**. If it is hung, close and reopen it.  |
| App does not see Framer MCP      | Open the Framer MCP plugin **before** opening Cursor or Claude.                |
| MCP loading fails in Claude Code | Make sure you used quotes around the URL in the `claude mcp add` command.      |
| Switching projects               | Close the MCP plugin in the current project and open it in the target project. |
| Cursor cannot see server         | Ensure Agent mode is enabled and Pro subscription is active.                   |
| Copilot does not list server     | Update to VS Code 1.102 or newer and enable MCP support.                       |

***

## Unframer CLI

You can also use the `unframer` CLI to interact with Framer MCP directly from your terminal, without needing an AI assistant.

First, save your MCP URL:

<McpCodeBlock snippet="unframerLogin" />

After login, all MCP commands become available. Run `npx unframer --help` to see the full list.

```bash
# Get project structure as XML
npx unframer mcp getProjectXml

# Get a specific node by ID
npx unframer mcp getNodeXml --nodeId "abc123"

# Update a node's text or attributes
npx unframer mcp updateXmlForNode --nodeId "abc123" --xml '<Text nodeId="abc123">New text</Text>'

# Search for available fonts
npx unframer mcp searchFonts --query "Inter"

# List all CMS collections
npx unframer mcp getCMSCollections

# Get items from a CMS collection
npx unframer mcp getCMSItems --collectionId "col123"

# Export React components
npx unframer mcp exportReactComponents

# Run any command with --help for detailed options
npx unframer mcp updateXmlForNode --help
```