Skip to main content
MCP integration requires a paid plan. Upgrade here.
The Magic Patterns MCP (“Model Context Protocol”) can help you bring Magic Patterns designs into other AI tools like Cursor, Claude Code, or directly in Claude.ai. It can also be used to import existing layouts and designs from your codebase into Magic Patterns. The MCP is a standardized way for connecting AI agents, like Magic Patterns, to other tools.

​
Connection Options

Official Claude Connector

One-click setup directly in Claude.ai

Custom MCP Setup

Configure in Cursor, Claude Code, or other MCP clients

API Key Authentication

Authenticate with an API key instead of OAuth

​
Official Claude Connector

Magic Patterns is available as an official Connector directly in Claude.ai. This is the easiest way to get started - no configuration required.
1

Open Claude.ai and navigate to Connectors

In Claude.ai, click on the Connectors icon or navigate to your integrations settings.
2

Find Magic Patterns

Search for “Magic Patterns” in the available connectors and click to connect.
Magic Patterns Connector in Claude.ai
3

Authorize and start using

Complete the authorization flow, and you’re ready to use Magic Patterns directly in Claude conversations.

​
Custom MCP Setup

For tools like Cursor or Claude Code, you can configure the Magic Patterns MCP server manually.
For best results, also add the Integration Skill to Cursor or Claude Code. It tells the agent to treat the design as a spec and adapt it to your codebase’s components and conventions, rather than pasting the prototype verbatim.
1

Add to your MCP config

Create a .cursor/mcp.json in your project for project-specific tools. Cursor instructions here.
{
  "mcpServers": {
    "magic-patterns": {
      "url": "https://mcp.magicpatterns.com/mcp"
    }
  }
}
2

Verify MCP is enabled

IMPORTANT: If Cursor browses the web instead of using the MCP tools, it means it’s not working!Ensure the MCP is actually turned on and not globally ignored. You can check this in Cursor’s settings. Check “magic-patterns” to on!
Ensure MCP is enabled in Cursor settings
3

Reference your designs

Once connected, you can prompt Cursor to access a specific design. For example:
Integrate this design: https://www.magicpatterns.com/c/abcd into my project

​
Cursor Troubleshooting

Ensure that all the Tools are enabled in Cursor’s settings. Go to Cursor > Settings > Cursor Settings > MCP & Tools
Cursor Settings for MCP

​
Read-only mode

If you want to expose Magic Patterns to an AI client without granting permission to create, modify, or publish designs, point the client at the read-only endpoint https://mcp.magicpatterns.com/mcp/readonly instead of https://mcp.magicpatterns.com/mcp. The same OAuth flow and API keys work against both URLs. Only the following tools are exposed on the read-only endpoint:
  • list_design_systems
  • get_editor_id_from_url
  • get_design_status
  • read_recent_message_history
  • list_version_history
  • get_artifact
  • read_artifact_files
  • get_design_system
  • read_design_system_files
Destructive tools (create_design, send_prompt, create_new_artifact, write_artifact_files, publish_artifact, create_design_system, write_design_system_files, publish_design_system) are not registered on this endpoint, so the client cannot list or call them. 
{
  "mcpServers": {
    "magic-patterns": {
      "url": "https://mcp.magicpatterns.com/mcp/readonly"
    }
  }
}

​
API Key Authentication

If you prefer not to use OAuth, you can authenticate the MCP server with a Magic Patterns API key. This is useful for headless environments, CI, or any client where the interactive OAuth flow is impractical. The same API key also works for the v3 REST API and the legacy v2 API.
1

Create an API key

Open Settings → API Keys and click Create Key. Copy the key immediately — you can only see it once.
2

Pass the key as a Bearer token

Configure the MCP server exactly as in Custom MCP Setup, but add an Authorization: Bearer <your-api-key> header. When a key is present, the OAuth flow is skipped entirely.
{
  "mcpServers": {
    "magic-patterns": {
      "url": "https://mcp.magicpatterns.com/mcp",
      "headers": {
        "Authorization": "Bearer mp_your_api_key_here"
      }
    }
  }
}
3

(Optional) Identify your agent

Pass the x-mp-agent-name header to tag requests with your agent or integration name. This is optional but helps with attribution in the Magic Patterns UI.
You can also call the underlying REST endpoints directly (bypassing the MCP transport) with the API key in either the Authorization: Bearer or x-mp-api-key header: 
curl -X POST https://api.magicpatterns.com/mcp/design/create \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer mp_your_api_key_here" \
  -H "x-mp-agent-name: my-custom-agent" \
  -d '{"prompt": "A dashboard with a sidebar and chart"}'
API key authentication requires a paid plan. Usage is billed against your account’s normal credits, the same as OAuth and the web app.

​
Next Steps

Tools & Workflows

Explore the available MCP tools and learn common workflows for design-to-code and code-to-design.

Integration Skill

A drop-in skill that teaches your AI editor to adapt a Magic Patterns design into your codebase the right way.