Overview of MCP

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, Codex, 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

Official Cursor Plugin

One-click install from the Cursor Marketplace

Custom MCP Setup

Configure in Cursor, Claude Code, Codex, 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.

Open Claude.ai and navigate to Connectors

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

Find Magic Patterns

Search for “Magic Patterns” in the available connectors and click to connect.

Authorize and start using

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

Official Cursor Plugin

Magic Patterns is available as an official plugin in the Cursor Marketplace. This is the easiest way to use Magic Patterns from Cursor. Installing the plugin wires up the MCP server for you and bundles a set of skills that teach the agent Magic Patterns workflows.

Magic Patterns plugin in the Cursor Marketplace

Open the Cursor Marketplace

In Cursor, go to Settings → Plugins (or open the Marketplace) and search for Magic Patterns.

Install the plugin

Click Install. The plugin registers the Magic Patterns MCP server automatically and adds the Magic Patterns skills.

Authenticate and start building

Complete the OAuth flow to connect your Magic Patterns account, then prompt Cursor to prototype, generate inspiration with “/inspiration”, upload local UI, or integrate a design.

The plugin bundles these skills:

Skill	What it does
`prototype`	Prototype an idea in Magic Patterns, seeded from your local UI, then iterate into a live design and open it in the browser.
`inspiration`	Generate four bold, meaningfully-different design directions and publish a shareable comparison link.
`upload-to-magic-patterns`	Port local UI into a hosted design, then return the editor link.
`integrate-magic-patterns-design`	Adapt a Magic Patterns design into your existing codebase as production code.

The plugin is a superset of the MCP. It installs the same MCP server, but also ships skills the raw MCP can’t, most notably /inspiration, which recreates a faithful baseline of your current UI and generates several distinct design directions as a shareable magicpatterns.com/inspiration/<id> link.

Custom MCP Setup

For tools like Cursor, Claude Code, or Codex, 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.

Cursor
Claude Code
Codex

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"
    }
  }
}

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

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

Add Magic Patterns MCP

Run the following command to add the Magic Patterns MCP server:

claude mcp add --transport http magic-patterns https://mcp.magicpatterns.com/mcp

Authenticate

Run /mcp inside Claude Code to trigger the OAuth authentication that enables the Magic Patterns Remote MCP Server.

Reference your designs

Once connected, you can prompt Claude Code to access a specific design. For example:

Integrate this design: https://www.magicpatterns.com/c/abcd into my project

Codex does not support OAuth, so you must authenticate with a Magic Patterns API key passed as a custom header.

Create an API key

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

Add a custom MCP in Codex

In Codex, go to Settings → Plugins → MCP and choose Connect to a custom MCP. Fill in the form:

Name: magic-patterns
Type: select Streamable HTTP
URL: https://mcp.magicpatterns.com/mcp

Then add two custom headers:

Key	Value
`Authorization`	`Bearer mp_your_api_key_here`
`x-mp-agent-name`	`codex`

The Authorization header authenticates you with your API key, and x-mp-agent-name identifies the agent for attribution in the Magic Patterns UI.

Save and reference your designs

Click Save. Once connected, you can prompt Codex to access a specific design. For example:

Integrate this design: https://www.magicpatterns.com/c/abcd into my project

If you’d rather not paste the key directly, store it in an environment variable and use Codex’s Bearer token env var field (or Headers from environment variables) instead of a plain header.

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_inspiration_document
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, create_slide_deck, send_prompt, create_new_artifact, write_artifact_files, publish_artifact, create_design_system, write_design_system_files, publish_design_system, create_inspiration_document, inspiration_add_variant, inspiration_update_variant, inspiration_clear_variants) are not registered on this endpoint, so the client cannot list or call them.

Cursor
Claude Code
Codex

{
  "mcpServers": {
    "magic-patterns": {
      "url": "https://mcp.magicpatterns.com/mcp/readonly"
    }
  }
}

claude mcp add --transport http magic-patterns https://mcp.magicpatterns.com/mcp/readonly

Follow the Codex setup as usual, but enter https://mcp.magicpatterns.com/mcp/readonly in the URL field instead.

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.

Create an API key

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

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.

Cursor
Claude Code
Codex

{
  "mcpServers": {
    "magic-patterns": {
      "url": "https://mcp.magicpatterns.com/mcp",
      "headers": {
        "Authorization": "Bearer mp_your_api_key_here"
      }
    }
  }
}

claude mcp add --transport http magic-patterns https://mcp.magicpatterns.com/mcp \
  --header "Authorization: Bearer mp_your_api_key_here"

Codex doesn’t support OAuth, so the API key is the only way to connect. In Settings → Plugins → MCP, add a custom MCP with type Streamable HTTP and an Authorization: Bearer mp_your_api_key_here header. See the Codex tab in Custom MCP Setup for the full walkthrough.

(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.

Overview

Prompting

Importing

Exporting

Publishing

Integrations

API

Enterprise and security

Connection Options

Official Claude Connector

Official Cursor Plugin

Custom MCP Setup

API Key Authentication

Official Claude Connector

Official Cursor Plugin

Custom MCP Setup

Cursor Troubleshooting

Read-only mode

API Key Authentication

Next Steps

Tools & Workflows

Integration Skill

​Connection Options

Official Claude Connector

Official Cursor Plugin

Custom MCP Setup

API Key Authentication

​Official Claude Connector

​Official Cursor Plugin

​Custom MCP Setup

​Cursor Troubleshooting

​Read-only mode

​API Key Authentication

​Next Steps

Tools & Workflows

Integration Skill

Connection Options

Official Claude Connector

Official Cursor Plugin

Custom MCP Setup

Cursor Troubleshooting

Read-only mode

API Key Authentication

Next Steps