Tools in MCP

The Magic Patterns MCP server offers the following tools. The recommended workflow for making code changes is:

get_design (url) or create_blank_design to obtain an editorId and artifactId
create_new_artifact (editorId) to create a safe edit session
read_files (artifactId) to understand existing code before making changes
write_files / edit_files (artifactId) to make changes
compile_artifact_changes (artifactId) to compile

list_design_systems

Tool

Lists the design systems available to the authenticated user. Returns both built-in (reserved) design systems (like Base, Shadcn, MUI) and any custom design systems you have created or have access to.

Use this tool to discover available design systems before creating a design. You can then pass the ID or name to create_design or create_blank_design.

Show Parameters

This tool takes no parameters.

Show Returns

Returns JSON containing an array of design systems, each with:

id: The unique design system ID to pass to create_design
name: The human-readable name (e.g., “Shadcn”, “MUI”)
isReserved: Whether it is a built-in preset
isActive: Whether this is your currently active design system

Results are sorted with the active design system first, then by most recently created.

create_blank_design

Tool

Creates a new blank Magic Patterns design with default scaffold files. No AI agent is involved — the design is immediately ready.

The response includes editorId and artifactId so you can skip calling get_design afterwards.

Show Parameters

name

string

Optional name for the design. Defaults to “Untitled”.

designSystemId

string

Optional design system ID. Use list_design_systems to discover available IDs.

designSystem

string

Optional design system name (e.g., “Shadcn”, “MUI”) or ID.

Show Returns

Returns JSON containing:

id: The design ID
editorId: The editor ID for subsequent operations
artifactId: The active artifact ID
editorUrl: URL to edit the design
previewUrl: URL to preview the design
availableFiles: Array of default file paths

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.

You can specify a design system by name (e.g., “Shadcn”, “MUI”) or by ID. If no design system is specified, your default design system is used.

Show Parameters

prompt

string

required

A natural language description of the UI component or page you want to create.Example prompts:

"Create a modern login form with email and password fields"
"Build a dashboard with a sidebar navigation and stats cards"

imageUrls

string[]

Optional array of image URLs to use as visual references.

designSystemId

string

Optional design system ID. Use list_design_systems to discover available IDs.

designSystem

string

Optional design system name or ID.

Show Returns

Returns JSON containing:

id: The unique design ID
editorId: The editor ID
artifactId: The active artifact ID
editorUrl: URL to edit the design
previewUrl: URL to preview the published design
availableFiles: Array of generated file paths

This tool requires credits to use.

get_design

Tool

Retrieves metadata about a Magic Patterns design, including its name, editorId, active artifactId, and a list of all available files.Use this tool first to obtain the editorId and artifactId needed for subsequent operations.

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:

name: The design name
editorId: The editor ID (pass to create_new_artifact)
artifactId: The active artifact ID (pass to file operation tools)
availableFiles: Array of file paths

create_new_artifact

Tool

Creates a new artifact by cloning the current active artifact for the given editor. The new artifact becomes the active artifact automatically.

Call this before making any file changes so the user can easily revert to the previous artifact if needed.

Show Parameters

editorId

string

required

The editor ID obtained from get_design or create_blank_design.

Show Returns

Returns JSON containing:

artifactId: The new artifact ID to use for file operations
files: Array of file names cloned from the previous artifact

list_files

Tool

Lists all files in a Magic Patterns artifact.

Show Parameters

artifactId

string

required

The artifact ID.

Show Returns

Returns JSON containing an array of file names.

read_files

Tool

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

Always read files before making changes with write_files or edit_files.

Show Parameters

artifactId

string

required

The artifact ID.

fileNames

string[]

required

An array of file names or paths to read.

Show Returns

Returns JSON containing the file contents for each requested file.

write_files

Tool

Creates or overwrites files in a Magic Patterns artifact. Does not compile — call compile_artifact_changes when done.

Show Parameters

artifactId

string

required

The artifact ID.

files

array

required

Array of objects with fileName (string) and code (string).

Show Returns

Returns a success message and list of all files in the artifact.

edit_files

Tool

Edits existing files in a Magic Patterns artifact by replacing their full contents. Returns an error if a file is not found. Does not compile — call compile_artifact_changes when done.

Show Parameters

artifactId

string

required

The artifact ID.

edits

array

required

Array of objects with fileName (string) and code (string).

Show Returns

Returns a success message and list of all files in the artifact.

compile_artifact_changes

Tool

Compiles the current source files in a Magic Patterns artifact. Call this after finishing all file changes with write_files and/or edit_files.

Show Parameters

artifactId

string

required

The artifact ID.

Show Returns

Returns a success message and list of compiled file names.

update_design_from_prompt

Tool

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

Use this when you want to provide high-level instructions in plain language instead of writing code directly. This tool sends a prompt, not direct code edits.

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.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.

Overview

Tips and Tricks

Designs

Design Systems

Team Collaboration

Import & Export

Publishing Your Website

Integrations

Tutorial Videos

Security & Legal

API