Skip to main content
The Magic Patterns MCP (“Model Context Protocol”) server can help you bring Magic Patterns designs into other AI tools like Cursor, Claude Code, or directly in Claude.ai. It provides important context to AI agents from a Magic Patterns design, such as the underlying code available.

​
Connection Options

Official Claude Connector

One-click setup directly in Claude.ai

Custom MCP Setup

Configure in Cursor, Claude Code, or other MCP clients

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

​
Example Usage in Cursor

MCP example in Cursor