Skip to main content
Our 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. We also have a separate Subframe Docs MCP server that provides access to Subframe documentation (this site).

​
Installation

You can find full MCP setup instructions in the Installation page.

​
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. You can get the MCP link for any design by either:
  1. Copying the link from the browser address bar
  2. Copying the link under Code > Inspect in Subframe
Copy MCP link from Subframe

​
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