SIGN UPLOG IN
X (Twitter)LinkedInGitHubDiscordYouTube

Magic Patterns MCP server for AI agents and assistants

Securely connect your AI agents and chatbots (Claude, ChatGPT, Cursor, etc) with Magic Patterns MCP or direct API to create and iterate on interface designs, inspect design status and history, read or modify artifact files, and publish authorized design artifacts through natural language.

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

Try Magic Patterns MCP now

Type what you want done — sign in and watch it run live in the Tool Router playground.

TOOL ROUTER PLAYGROUND
Magic Patterns MCP
Try asking
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.

SETUP GUIDE

Connect Magic Patterns MCP Tool with your Agent

1

Install Composio

typescript
npm install @composio/core ai @ai-sdk/mcp @ai-sdk/openai
Install the Composio SDK and your agent framework
2

Create a session with MCP enabled

typescript
import { Composio } from "@composio/core";

const composio = new Composio();
const { mcp } = await composio.create("your-user-id", {
  toolkits: ["magic_patterns_mcp"],
  mcp: true,
});
Create a session scoped to Magic Patterns MCP and read its MCP URL and headers
3

Connect your agent to the MCP server

typescript
import { createMCPClient } from "@ai-sdk/mcp";
import { openai } from "@ai-sdk/openai";
import { generateText, stepCountIs } from "ai";

const client = await createMCPClient({
  transport: { type: "http", url: mcp.url, headers: mcp.headers },
});

const { text } = await generateText({
  model: openai("gpt-5.6-sol"),
  tools: await client.tools(),
  prompt: "Create a responsive sign-up form prototype",
  stopWhen: stepCountIs(10),
});

console.log(text);
await client.close();
Pass the session's MCP URL and headers to your agent and run a Magic Patterns MCP request
SETUP GUIDE

Connect Magic Patterns MCP API Tool with your Agent

1

Install Composio

typescript
npm install @composio/core @composio/openai openai
Install the Composio SDK, the OpenAI provider, and the OpenAI SDK
2

Create a Composio session

typescript
import OpenAI from "openai";
import { Composio } from "@composio/core";
import { OpenAIResponsesProvider } from "@composio/openai";

const composio = new Composio({ provider: new OpenAIResponsesProvider() });
const client = new OpenAI();

const session = await composio.create("your-user-id", { toolkits: ["magic_patterns_mcp"] });
const tools = await session.tools();
Initialize Composio with the OpenAI Responses provider and create a session scoped to Magic Patterns MCP
3

Run Magic Patterns MCP tools with your agent

typescript
let response = await client.responses.create({
  model: "gpt-5.6-sol",
  tools,
  input: [{ role: "user", content: "Create a responsive sign-up form prototype" }],
});

while (response.output.some((o) => o.type === "function_call")) {
  const outputs = await composio.provider.handleToolCalls(session, response.output);
  response = await client.responses.create({
    model: "gpt-5.6-sol",
    tools,
    previous_response_id: response.id,
    input: outputs,
  });
}

console.log(response.output_text);
Send a request, execute the Magic Patterns MCP tool calls through the session, and print the final answer

Why Use Composio?

AI Native Magic Patterns MCP Integration

  • Supports both Magic Patterns MCP and direct API based integrations
  • Structured, LLM-friendly schemas for reliable tool execution
  • Rich coverage for reading, writing, and querying your Magic Patterns MCP data

Managed Auth

  • Built-in OAuth handling with automatic token refresh and rotation
  • Central place to manage, scope, and revoke Magic Patterns MCP access
  • Per user and per environment credentials instead of hard-coded keys

Agent Optimized Design

  • Tools are tuned using real error and success rates to improve reliability over time
  • Comprehensive execution logs so you always know what ran, when, and on whose behalf

Enterprise Grade Security

  • Fine-grained RBAC so you control which agents and users can access Magic Patterns MCP
  • Scoped, least privilege access to Magic Patterns MCP resources
  • Full audit trail of agent actions to support review and compliance
FRAMEWORKS

Use Magic Patterns MCP with any AI Agent Framework

Choose a Framework you want to connect Magic Patterns MCP with

ChatGPT logo

ChatGPT

Use Magic Patterns MCP with ChatGPT

Claude Cowork logo

Claude Cowork

Use Magic Patterns MCP with Claude Cowork

Hermes logo

Hermes

Use Magic Patterns MCP with Hermes

Atomic Agent logo

Atomic Agent

Use Magic Patterns MCP with Atomic Agent

Rolling this out across your team?

Give your team centralized access control across every framework with Composio’s MCP Gateway.

EXPLORE MCP GATEWAY
FAQ

Frequently asked questions

Yes, Magic Patterns MCP requires you to configure your own Dcr Oauth credentials. Once set up, Composio handles secure credential storage and management for you.

Yes! Composio's Tool Router enables agents to use multiple toolkits. Learn more.

Yes. Composio is SOC 2 Type II compliant and is built to keep your Magic Patterns connection and credentials secure. OAuth tokens and API keys are encrypted, and sensitive customer data is protected at rest and in transit.

Composio also undergoes independent security testing and continuously monitors its systems for security threats. You can review the latest reports and policies in the Composio Trust Center.

Composio maintains and updates all toolkit integrations automatically, so your agents always work with the latest API versions.

When you connect a Magic Patterns account through Composio, every action runs under that account, so anything the agent creates, sends, or changes shows up in Magic Patterns as done by you. Keep an approval step in your prompt for actions with side effects, such as sending or deleting, and have the agent draft first.

Whatever the credentials you connect allow inside Magic Patterns. If Magic Patterns lets you scope a key to specific permissions, create a scoped one so the agent can only do what you intend. You can revoke the key inside Magic Patterns at any time.

Yes. Composio supports multiple connected accounts for the same app, and that works in Claude, ChatGPT, or any other assistant you connect through Composio. Give each Magic Patterns connection a name such as work or personal, and the assistant uses the one you mention in the request. Each account keeps its own credentials and nothing is merged.

Composio's free plan includes 100,000 tool calls per month with no credit card, which covers most personal Magic Patterns use. Paid plans add higher limits and team features. Your Magic Patterns plan and its API limits still apply as usual.

Built-in connectors usually give one AI access to a limited set of apps. Many people use Composio because it lets their AI connect to more apps than it normally supports, or connect to multiple accounts for the same app (e.g. connect Claude to multiple Magic Patterns accounts).

With Composio, you connect Magic Patterns once and then use it across different AI assistants without setting it up separately in each one. Connect your apps to Composio once, then connect Composio to whichever AI you use, whether that's Claude, ChatGPT, Hermes, or your own custom assistant.

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