Magic Patterns MCP Server

Official Magic Patterns MCP server for generating, editing, and round-tripping React, Tailwind, ShadCN, Chakra, and Mantine UI designs from AI clients.

Design by Magic Patterns OAuth2 active

Connect (Remote Server) Docs

Overview

Magic Patterns is an AI design tool for building UI components and full pages from natural language prompts, images, or templates. Its official MCP server, hosted at https://mcp.magicpatterns.com/mcp, lets clients like Claude.ai, Claude Code, and Cursor create new designs, iterate on them via prompts, read and write the underlying source files, and publish new artifact versions, all without leaving the IDE or chat.

The server exposes tools across three groups: general tools (list available design systems), design tools (create, prompt, read history, check status, publish), and artifact tools (get, clone, read, and write the files behind a design). This enables both a prompt-first workflow (generate a design with AI, then poll for completion) and a code-first workflow (clone an artifact as a working branch, edit files directly, then publish).

The official MCP uses OAuth, so no API key is required, but a paid Magic Patterns plan is needed to use the integration. An older community implementation by ryanleecode exists on GitHub but is archived in favor of this hosted server.

Tools

Tool	Description
`list_design_systems`	Retrieves available design systems, both built-in presets and custom.
`create_design`	Initiates a new design, optionally generated by AI from a prompt or based on a template.
`get_editor_id_from_url`	Converts a Magic Patterns design URL into an internal editor ID.
`get_design_status`	Checks current design state, generation status, and the active artifact.
`send_prompt`	Submits a natural language request to update an existing design.
`read_recent_message_history`	Retrieves the last 10 chat items and artifact edits for a design.
`list_version_history`	Lists the 20 most recent artifact versions for a design.
`publish_artifact`	Compiles and activates an artifact as the current design version.
`get_artifact`	Fetches the active artifact and its file list.
`create_new_artifact`	Clones an existing artifact as a new working version (a branch).
`read_artifact_files`	Retrieves file contents from a specific artifact.
`write_artifact_files`	Creates or modifies source files in an artifact.

Setup Guide

Prerequisites

A Magic Patterns account on a paid plan
An MCP-compatible client (Claude.ai, Claude Code, Cursor, etc.)

Option 1: Claude.ai Connector

The simplest setup. Go to claude.ai/settings/connectors, search for Magic Patterns, and complete the OAuth authorization. No config file needed.

Option 2: Cursor

Create .cursor/mcp.json in your project:

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

Then verify magic-patterns is toggled on in Cursor's MCP settings. If Cursor tries to browse the web instead of calling the MCP tools, the integration is not active.

Option 3: Claude Code

Add the server via the CLI:

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

Then run /mcp inside Claude Code to trigger the OAuth flow.

Referencing designs

Once connected, paste a Magic Patterns design URL like https://www.magicpatterns.com/c/abcd into the chat to load it into your project, or ask the model to generate a new one.

Use Cases

Generate React or Tailwind component variations from a written spec inside Cursor or Claude Code, then publish the chosen version back to Magic Patterns.
Pull an existing Magic Patterns design URL into a codebase, read its source files, and adapt them to fit project conventions.
Iterate on a UI by sending follow-up prompts (send_prompt) and polling get_design_status until the AI finishes generating.
Use create_new_artifact plus write_artifact_files as a code-first branching workflow for designers and engineers collaborating on the same component.
Audit recent design changes with read_recent_message_history and list_version_history before publishing a new release.

Example Prompts

"Create a new Magic Patterns design for a pricing page with three tiers using the ShadCN design system."
"Load the design at https://www.magicpatterns.com/c/abcd and copy its hero component into src/components/Hero.tsx."
"Send a prompt to editor xyz123 asking it to make the CTA button larger and switch to a dark theme."
"Show me the last 20 version history entries for this design and tell me which one introduced the sidebar."
"Clone the active artifact as a new branch, rewrite the header file to use our Tailwind tokens, and publish it."

Pros

Official, provider-maintained server with OAuth, so no API key handling is needed.
Comprehensive tool set covering full design lifecycle: create, prompt, read, write, version, publish.
Bidirectional design-to-code and code-to-design workflows, not just one-way generation.
Works out of the box with Claude.ai, Claude Code, and Cursor via a hosted HTTP endpoint.

Limitations

Requires a paid Magic Patterns plan; no free tier for the MCP integration.
Tied to the Magic Patterns hosted platform; designs and artifacts live there, not locally.
Some clients (notably Cursor) need manual verification that the MCP is actually being called instead of the model falling back to web browsing.

Alternatives

Figma Dev Mode MCP for converting Figma frames directly into code.
Magic UI MCP for browsing and inserting prebuilt React/Tailwind components.
21st.dev Magic MCP for AI-generated UI components inside the IDE.