Tools in MCP

The Magic Patterns MCP server offers four main tools.

create_design

Tool

Creates a new Magic Patterns design from a natural language prompt. The AI generates a complete UI component or page based on your description.

This tool creates a new design and waits for the AI to generate the initial code. The response includes the design ID, URLs, and a list of generated files.

Show Parameters

prompt

string

required

A natural language description of the UI component or page you want to create. Be specific about the layout, components, and functionality you want.Example prompts:

"Create a modern login form with email and password fields"
"Build a dashboard with a sidebar navigation and stats cards"
"Design a pricing page with three tier cards"
"Create a user profile card with avatar, name, and bio"

imageUrls

string[]

Optional array of image URLs to use as visual references for the design. The AI will analyze these images and use them as inspiration for generating the UI.Example:

["https://example.com/screenshot.png", "https://example.com/mockup.jpg"]

Show Returns

Returns JSON containing:

id: The unique design ID
editorUrl: URL to edit the design in Magic Patterns
previewUrl: URL to preview the published design
availableFiles: Array of generated file paths

Use read_files to retrieve the generated code.

This tool requires credits to use. If you receive an insufficient credits error, upgrade your plan or add credits at magicpatterns.com/settings.

get_design

Tool

Retrieves metadata about a Magic Patterns design, including its name and a list of all available files.Use this tool first to explore what’s in a design before reading specific files.

Show Parameters

url

string

required

The Magic Patterns URL. Supported formats:

Design: magicpatterns.com/c/<id> or https://www.magicpatterns.com/c/<id>
Published: project-<slug>.magicpatterns.app
Canvas: magicpatterns.com/s/<canvasId>?nodeIds=<nodeId>

Show Returns

Returns JSON containing the design name and an array of available file paths that can be read with read_files.

read_files

Tool

Reads the contents of one or more files from a Magic Patterns design.

Call get_design first to see available files before using this tool.

Show Parameters

url

string

The Magic Patterns URL (same formats as get_design).

fileNames

string[]

required

An array of file names or paths to read from the design.

Show Returns

Returns JSON containing the file contents for each requested file. If no matching files are found, returns a message suggesting to use get_design to see available files.

update_design

Tool

required

Sends a natural language prompt to update a Magic Patterns design. The Magic Patterns AI interprets your prompt and applies changes to the design.

This tool sends a prompt, not direct code edits. Describe changes in natural language and the AI will determine how to implement them.

Show Parameters

url

string

required

The Magic Patterns URL (same formats as get_design).

prompt

string

required

A natural language description of the changes you want. You can include code snippets as examples or references.Example prompts:

"Change the primary button color to blue"
"Add a loading spinner when the form is submitting"
"Make the layout responsive for mobile devices"

Show Returns

Returns a confirmation message with a request ID. Use read_files after updating to see the resulting changes.

This tool requires credits to use. If you receive an insufficient credits error, upgrade your plan or add credits at magicpatterns.com/settings.

Overview

Tips and Tricks

Best Practices

Features & Integrations

Tutorial Videos

Security & Legal

API