## 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](https://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.

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.

- Cursor
- Claude Code

1. Add to your MCP config
   
   Create a `.cursor/mcp.json` in your project for project-specific tools. [Cursor instructions here](https://cursor.com/docs/context/mcp#configuration-locations).
   
   ```json
   {
     "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!

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

1. Add Magic Patterns MCP
   
   Run the following command to add the Magic Patterns MCP server:
   
   ```bash
   claude mcp add --transport http magic-patterns https://mcp.magicpatterns.com/mcp
   ```

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

3. 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
   ```

---

## Next Steps

**Tools & Workflows**  
Explore the available MCP tools and learn common workflows for design-to-code and code-to-design.