Skip to main content
The Subframe MCP server lets AI coding assistants like Claude Code and Cursor access your Subframe designs directly. Instead of copying code manually, AI can fetch components, pages, and themes from your projects automatically. A separate Subframe Docs MCP server provides access to Subframe documentation. Model Context Protocol (MCP) is a standard that lets AI assistants connect to external data sources.

​
Installation

The easiest way to set up the Subframe MCP server is right from Subframe:
  1. Open a page in Subframe
  2. Open Code mode in the top right
  3. Click the Installation tab in the code panel
  4. Follow the instructions for Cursor or Claude Code
To install the Subframe MCP manually, you’ll need an authentication token:
  1. Navigate to https://app.subframe.com/settings/tokens
  2. Generate a new token and copy it
  • Cursor
  • Claude Code
  • Other MCP clients
1

One-click install (recommended)

Click the “Add to Cursor” button in the Code Mode Installation tab in Subframe. This automatically configures Cursor with your MCP servers.
2

Manual configuration

Add this to your Cursor MCP configuration file (~/.cursor/mcp.json):
{
  "mcpServers": {
    "subframe": {
      "url": "https://mcp.subframe.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_AUTH_TOKEN"
      }
    },
    "subframe-docs": {
      "url": "https://docs.subframe.com/mcp"
    }
  }
}
3

Verify installation

Ask Cursor “What tools do you have available?” to verify MCP servers are connected.
This adds two MCP servers:
  • subframe - Access your Subframe projects
  • subframe-docs - Access Subframe documentation

​
Using the MCP server

Once configured, your AI assistant can access Subframe automatically when you prompt or paste an MCP link to a page from the Code panel.

​
Available tools

ToolDescriptionInput ParametersReturns
list_componentsLists all components in your projectprojectId (optional)Array of components with id, name, url
list_pagesLists all pages in your projectprojectId (optional)Array of pages with id, name, url
get_component_infoGets the code and metadata for a componentid, name, or url
projectId (optional)		id, name, files
get_page_infoGets the code for a pageid, name, or url
projectId (optional)		id, name, files
get_themeGenerates the Tailwind theme for the projectprojectId (optional)
cssType (optional)		theme config
If projectId is not specified, the tool will use the first project you have access to. When prompting we recommend using the MCP link found in the Code Inspect panel for a page. 
Implement the design at https://app.subframe.com/design/...
To get the latest version of components in your project, run npx @subframe/cli@latest sync to sync components.

​
Example prompts

Create a new page using the Subframe page at
https://app.subframe.com/PROJECT_ID/design/DESIGN_ID/edit as reference.

Wire up relevant app logic (API calls, hooks, routing) where applicable. 
Keep it consistent with existing project conventions.

Update the existing page to match the Subframe design at
https://app.subframe.com/PROJECT_ID/design/DESIGN_ID/edit.

Preserve all existing functionality unless the new design requires a change.

Review the Subframe design at
https://app.subframe.com/PROJECT_ID/design/DESIGN_ID/edit and add proper
accessibility attributes to the existing page.

Add ARIA labels, roles, and descriptions, and proper semantic HTML throughout.

Migrate the components on the existing page to use Subframe components instead
of the old components.

Get all components in my Subframe project and preserve all existing
functionality unless the new design requires a change.

Get the Button component from Subframe and use it in this file

Show me all components in my Subframe project

Get my Subframe theme configuration

​
Troubleshooting

Check that:
  • Your API token is correct and hasn’t expired
  • You copied the entire token without extra spaces
  • The token is in the Authorization header as Bearer YOUR_AUTH_TOKEN
Generate a new token at app.subframe.com/settings/tokens.
Make sure your AI tool:
  • Has MCP support enabled
  • Has the Subframe server in its MCP configuration
  • Has been restarted after adding the configuration
Check your tool’s logs for MCP-related errors.
Use list_components or list_pages to see what’s available.Verify:
  • The component/page exists in your Subframe project
  • The name or URL matches exactly
  • You have access to the project
If the MCP server is unreachable:
  • Check your internet connection
  • Verify the URL is https://mcp.subframe.com/mcp
  • Reach out to the Subframe team for support