SIGN UPLOG IN
X (Twitter)LinkedInGitHubDiscordYouTube

How to connect Magic Patterns MCP to Claude

Connect Claude Web, Desktop and Cowork to Magic Patterns MCP. Create a responsive sign-up form prototype, publish approved header and footer artifacts, and more using natural language, with authentication handled for you.

Get started for freeGet a demo
Magic Patterns MCP logoMagic Patterns MCP
Dcr Oauth

Magic Patterns MCP is a design management platform for interface artifacts and workflows. Use it to iterate on designs, manage artifacts, and publish approved UI pieces.

23 Tools

Introduction

Claude is Anthropic's AI assistant, available on the web, in the desktop app, and on mobile. Cowork is its agent for knowledge work, and it runs on all of those surfaces too. Connected to your apps, Claude can work with your files and services to accomplish complex tasks on your behalf.

This guide walks you through the easiest and most secure way to connect your Magic Patterns account to Claude via Composio Connect, enabling it to create a responsive sign-up form prototype, publish approved header and footer artifacts, list recent design iterations for product page, and more such actions on your behalf without compromising your account security.

Setup is the same on Claude Web, Desktop, and Cowork, and you only need to do it once. The connector is tied to your account, so it's available in all three.

Also integrate Magic Patterns MCP with

ChatGPTHermesAtomic Agent

Connecting Magic Patterns to Claude Web, Desktop, and Cowork

Two ways to add the Composio connector. Pick whichever you prefer.

1. Add with one click

Click the button. Claude opens with the Composio connector filled in. Click Add, then go to step 2.

Add to Claude

Add manually

In Claude Desktop, click Customize in the left sidebar, then select Connectors and click the + icon at the top.

Claude Desktop connectors screen with Add custom connector selected

Click Add custom connector and paste in the Composio MCP server URL:

bash
https://connect.composio.dev/mcp
Add custom connector dialog with Composio MCP server URL

2. Authorize in your browser

Click Connect. You'll be redirected to a browser window where you can authorize Composio to continue.

Composio authorization screen for Claude Web, Desktop, and Cowork

3. Connect your Magic Patterns account

Back in Claude, ask it to connect to Magic Patterns or give it any Magic Patterns-related task.

For example, ask Claude to:

  • "Create a responsive sign-up form prototype"
  • "Publish approved header and footer artifacts"
  • "List recent design iterations for product page"

It will prompt you to authenticate and authorize access.

That's it. Composio's tools are now available in Claude, and your Magic Patterns account is ready to use.

What is the Magic Patterns Claude Connector, and what's possible with it?

The Magic Patterns MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Magic Patterns account. It provides structured and secure access so your agent can perform Magic Patterns operations on your behalf.

Troubleshooting

1. Why does Claude not use the Composio connector for Magic Patterns?

The connector can show as connected, but Claude must use it in each Magic Patterns conversation.

  • Click + at the lower left of the chat, or type /.
  • Hover Connectors.
  • Turn on Composio.
  • Ask Claude to connect to Magic Patterns again.

2. Why does Claude show an MCP server error before Magic Patterns connects?

Claude can show Couldn't reach the MCP server or Authorization with the MCP server failed when you add the connector for Magic Patterns.

  • Check that the connector URL is https://connect.composio.dev/mcp.
  • Connectors run from Anthropic's cloud, so your device network is usually not the problem.
  • Add the connector again from Customize > Connectors, then ask Claude to connect Magic Patterns.
  • If it fails again, send the error and the ofid_ reference id to support@composio.dev.

3. Why does the Magic Patterns authorization link not work?

The Composio connector is one server. Your Magic Patterns account connects separately when Claude asks for it.

  • If the browser does not open, or the link expires, ask Claude to retry the Magic Patterns connection.
  • Composio creates a fresh Magic Patterns authorization link.
  • Open that link in your browser and finish the Magic Patterns sign-in.

4. Why do Magic Patterns actions fail after they worked before?

The Magic Patterns connection can expire or lose permission.

  • Ask Claude to inspect the Magic Patterns connection.
  • If the connection is unhealthy, disconnect it when Claude prompts you.
  • Reconnect the Magic Patterns account and retry the action.
  • If Claude shows a permission prompt, approve it before Claude changes data in Magic Patterns.
  • If the action still fails with a permission error, check that the connected account has that permission in Magic Patterns itself.

5. How do I switch to a different Magic Patterns account?

Claude can manage the Magic Patterns connection for you.

  • Ask Claude to disconnect or delete the current Magic Patterns account.
  • Ask Claude to connect Magic Patterns again.
  • Open the new Composio authorization link for Magic Patterns.
  • Sign in with the other Magic Patterns account in the browser.
  • After the account connects, ask Claude to retry the Magic Patterns task.

6. Why is my Magic Patterns connection missing in Claude Desktop or on a Team plan?

The connector belongs to your Claude account, so your Magic Patterns connection works in Claude Web, Desktop, and Cowork.

  • In Claude Desktop, open Customize > Connectors.
  • Next to Composio, click ⋮ and click Clear cache.
  • If Magic Patterns tools still do not appear, click ⋮, disconnect, remove the connector, and add it again.
  • On Team or Enterprise, an Owner or Primary Owner must enable the connector before you can connect Magic Patterns.
TOOLS

Supported Tools

Every Magic Patterns MCP action and event your agent gets out of the box.

Create design

Creates a new Magic Patterns design.

Create design system

Creates a new, blank design system owned by you and returns its ID + editor URL.

Create inspiration document

Creates a Magic Patterns inspiration document and returns a shareable magicpatterns.

Create new artifact

Creates a new artifact by cloning an existing artifact.

Create slide deck

Creates a new Magic Patterns slide deck and kicks off AI generation.

Get artifact

Gets the active artifact for a design, including its ID and list of files.

Get design status

Gets the current status of a design: whether AI generation is active, the active artifact ID, and available files.

Get design system

Resolves a design system's active artifact and lists its files.

Get editor id from url

Resolves a Magic Patterns URL to an editor ID.

Get inspiration document

Loads a Magic Patterns inspiration document by its id.

Inspiration add variant

Fills in one concept of an existing Magic Patterns inspiration document with its self-contained HTML.

Inspiration clear variants

Resets every concept of an existing Magic Patterns inspiration document back to an empty placeholder — dropping each concept's html and its pre-created "Iterate" room.

Inspiration update variant

Revises a single already-filled concept of a Magic Patterns inspiration document in place, replacing its html (and optionally its name/description).

List design systems

Lists the design systems available to the authenticated user.

List version history

Lists the artifact version history for a design.

Publish artifact

Compiles an artifact's source files and sets it as the active artifact for the design.

Publish design system

Publishes the design system's active artifact as a new immutable version.

Read artifact files

Reads the contents of one or more files from an artifact.

Read design system files

Reads the contents of one or more files from a design system's active artifact.

Read recent message history

Reads the recent chat item history for a design.

Send prompt

Sends a natural language prompt to the Magic Patterns AI for an existing design.

Write artifact files

Creates or overwrites one or more files in an artifact.

Write design system files

Creates or overwrites files in a design system.

FRAMEWORKS

How to build Magic Patterns MCP Agent with another framework

ChatGPT logo

ChatGPT

Use Magic Patterns MCP with ChatGPT

Hermes logo

Hermes

Use Magic Patterns MCP with Hermes

Atomic Agent logo

Atomic Agent

Use Magic Patterns MCP with Atomic Agent

FAQ

Frequently asked questions

With a standalone Magic Patterns MCP server, the agents and LLMs can only access a fixed set of Magic Patterns tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Magic Patterns and many other apps based on the task at hand, all through a single MCP endpoint.

Yes, you can. Claude Cowork fully supports MCP integration. You get structured tool calling, message history handling, and model orchestration while Tool Router takes care of discovering and serving the right Magic Patterns tools.

Yes, absolutely. You can configure which Magic Patterns scopes and actions are allowed when connecting your account to Composio. You can also bring your own OAuth credentials or API configuration so you keep full control over what the agent can do.

All sensitive data such as tokens, keys, and configuration is fully encrypted at rest and in transit. Composio is SOC 2 Type 2 compliant and follows strict security practices so your Magic Patterns data and credentials are handled as safely as possible.

Start with Magic Patterns MCP.It takes 30 seconds.

Managed auth, hosted MCP servers, and every Magic Patterns MCP tool your agent needs.Free to start.

Start building