X (Twitter)LinkedInGitHubDiscordYouTube

Magic Patterns MCP for AI Agents

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/openai @ai-sdk/mcp
Install the Composio SDK for Python or TypeScript
2

Initialize Client and Create Tool Router Session

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

const composio = new Composio({ apiKey: 'your-api-key' });
const session = await composio.create('your-user-id');
console.log(`Tool Router session created: ${session.mcp.url}`);
Import and initialize the Composio client, then create a Tool Router session for Magic Patterns MCP
3

Connect to AI Agent

typescript
import { openai } from '@ai-sdk/openai';
import { experimental_createMCPClient as createMCPClient } from '@ai-sdk/mcp';
import { generateText } from 'ai';

const client = await createMCPClient({
  transport: {
    type: 'http',
    url: session.mcp.url,
    headers: {
      'x-api-key': 'your-composio-api-key',
    },
  },
});

const tools = await client.tools();
const { text } = await generateText({
  model: openai('gpt-4o'),
  tools,
  messages: [{
    role: 'user',
    content: 'YOUR_SPECIFIC_PROMPT_HERE'
  }],
  maxSteps: 5,
});

console.log(`Agent: ${text}`);
Use the MCP server with your AI agent (Anthropic Claude or Mastra)
SETUP GUIDE

Connect Magic Patterns MCP API Tool with your Agent

1

Install Composio

typescript
npm install @composio/openai
Install the Composio SDK
2

Initialize Composio and Create Tool Router Session

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

const composio = new Composio({
  provider: new OpenAIResponsesProvider(),
});
const openai = new OpenAI({});
const session = await composio.create('your-user-id');
Import and initialize Composio client, then create a Tool Router session
3

Execute Magic Patterns MCP Tools via Tool Router with Your Agent

typescript
const tools = session.tools;
const response = await openai.responses.create({
  model: 'gpt-4.1',
  tools: tools,
  input: [{
    role: 'user',
    content: 'YOUR_SPECIFIC_PROMPT_HERE'
  }],
});
const result = await composio.provider.handleToolCalls(
  'your-user-id',
  response.output
);
console.log(result);
Get tools from Tool Router session and execute Magic Patterns MCP actions with your Agent

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 Work logo

ChatGPT Work

Use Magic Patterns MCP with ChatGPT Work

Claude Cowork logo

Claude Cowork

Use Magic Patterns MCP with Claude Cowork

Hermes logo

Hermes

Use Magic Patterns MCP with Hermes

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.

Composio is SOC 2 and ISO 27001 compliant with all data encrypted in transit and at rest. Learn more.

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

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