Skip to main content
This feature is currently in private beta. Contact our team for early access.
The Magic Patterns MCP server helps developers implement designs quickly and accurately by providing important context to AI agents that generate code from a Magic Patterns design.
1

Create a new MCP API Key

From your settings page, create a new MCP API Key.Make sure to store this key securely.
2

Add to your MCP Config to a MCP Client

In compatible tools like Cursor, add the following MCP config.
{
  "magic-patterns": {
    "url": "https://mcp.magicpatterns.com/mcp",
    "headers": {
      "X-MCP-KEY": "<your MCP API Key here>"
    }
  }
}
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