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 or Claude. It provides important context to AI agents from a Magic Patterns design, such as the underlying code available.
1

Add to your MCP Config to a MCP Client

In compatible tools like Cursor or Claude Code, add the following MCP config.
If you are using Cursor, create a .cursor/mcp.json in your project for project-specific tools. Cursor instructions here.
{
  "mcpServers": {
    "magic-patterns": {
      "url": "https://mcp.magicpatterns.com/mcp"
    }
  }
}
IMPORTANT: If Cursor browses the web versus using the MCP tools, it means it’s not working!Ensure the MCP is actually turned on after and not globally ignored. You can check this in Cursor’s settings. Check “magic-patterns” to on!
Importing a website via URL
2

Authenticate the Remote Magic Patterns MCP Server in Claude Code

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

Reference your designs

The Magic Patterns MCP server introduces a set of tools that help LLMs translate designs. Once connected, you can prompt your MCP client 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