1. create_design(prompt, ...) → kicks off AI generation2. get_design_status(editorId) → poll every 60s until isGenerating=false
With an existing design:
1. get_editor_id_from_url(url) → resolve a Magic Patterns URL to an editorId2. get_design_status(editorId) → check current state before acting3. send_prompt(editorId, prompt) → send prompt (returns immediately)4. get_design_status(editorId) → poll every 60s until isGenerating=false
1. create_design() → no prompt, creates blank design instantly2. get_design_status(editorId) → confirm active artifact is ready3. create_new_artifact(artifactId, name) → create a working branch4. read_artifact_files(artifactId, fileNames) → read existing scaffolding5. write_artifact_files(artifactId, files) → write one or more files at once6. publish_artifact(artifactId, editorId) → compile + activate
Author a reusable design system (components, styling, and rules) by writing files
directly. You write the code here — Magic Patterns does not generate it for you.
Load the design_system_authoring_guide prompt first for the full file contract.
1. list_design_systems() → find an existing design system ID, or…2. create_design_system(name) → create a new blank design system3. get_design_system(designSystemId) → resolve active artifact + file list (always first)4. read_design_system_files(designSystemId, fileNames) → read existing files before editing5. write_design_system_files(designSystemId, files, baseArtifactId) → save files (permissive)6. publish_design_system(designSystemId) → publish an immutable version (strict)
Publish a shareable magicpatterns.com/inspiration/<id> link that renders 4
design concepts side by side. The preferred flow declares placeholder concepts
first (so the link is publishable immediately), then streams each concept’s
content in one at a time.
1. create_inspiration_document(title, files) → declare concepts (with or without html), get the shareable URL2. inspiration_add_variant(inspirationId, variantId, html) → fill in each placeholder concept3. get_inspiration_document(inspirationId) → read concepts back (e.g. to implement one)4. inspiration_update_variant(inspirationId, variantId, html) → revise a single filled concept in place5. inspiration_clear_variants(inspirationId) → reset every concept back to a placeholder
Slide decks share the design/artifact tooling: create_slide_deck(prompt)
kicks off AI generation just like create_design, then you poll
get_design_status the same way.
Collaborative editing: Magic Patterns is a collaborative editor — the user
can make changes in the UI at any time. Always call get_design_status before
starting new work to get the latest active artifact. Never assume state from a
previous call is still current.
Polling: AI generation typically takes 2–10 minutes. Poll
get_design_status no more frequently than every 60 seconds. Slow
generation is normal — do not treat it as an error.
Design systems — write vs. publish:write_design_system_files is
permissive — it saves your files and returns validationErrors without
blocking, so you can build incrementally. publish_design_system is strict
— it refuses while any validation errors remain. Clear every
validationErrors entry before publishing. Design systems are also
collaborative: always call get_design_system first and pass its
artifactId as baseArtifactId on writes so concurrent edits are detected
(a 409 means re-read and retry).
Optional editor ID of an existing design to use as a template. The design
is forked before any prompt is applied. You can find the editor ID in the
design URL (magicpatterns.com/c/<id>) or resolve it with
get_editor_id_from_url.
Show Returns
editorId — the editor ID for subsequent operations - editorUrl — URL to
edit the design - previewUrl — URL to preview the design -
activeArtifactId — the currently active artifact ID - availableFiles —
array of file paths
This tool requires credits when used with a prompt.
Creates a new Magic Patterns slide deck and kicks off AI generation. A slide deck is a 16:9, full-bleed, one-slide-at-a-time React presentation where each slide maps to a screen in the canvas.Unlike create_design, a prompt is required — there is no blank-deck path. Generation is long-running (2–10 minutes); poll get_design_status every 60s.
Gets the current status of a design: whether AI generation is active, the active artifact ID, and available files.Always call this before starting new work on an existing design — the user may have changed state since you last checked. Also used to poll for completion after create_design (with prompt) or send_prompt.
The editor ID from create_design or get_editor_id_from_url.
Show Returns
isGenerating — true if AI is still generating - activeArtifactId — the
current active artifact ID - availableFiles — list of file names in the
active artifact
When isGenerating=true, wait at least 60 seconds before polling again. Generation can take up to 10 minutes.
Sends a natural language prompt to the Magic Patterns AI for an existing design. Returns immediately with a request ID. The generation runs in the background.
Reads the recent chat item history for a design. Returns the last 10 items (user prompts, AI responses, artifact versions, edits). Use skip to paginate backwards.Code contents are omitted to keep the response concise — use read_artifact_files to read full file contents.
Gets the active artifact for a design, including its ID and list of files.Always call this (or get_design_status) to get the latest active artifact — do not rely on a previously cached artifact ID.
Creates a new artifact by cloning an existing one. The new artifact becomes the active artifact.
Call this before making file changes with write_artifact_files so the
user can revert to the previous artifact if needed. Always call
get_design_status or get_artifact first to get the current active artifact
ID.
These tools let an agent author a Magic Patterns design system — a reusable,
versioned collection of components, styling, and rules — by writing files
directly. This is distinct from the design/artifact tools above: here you
write the code, rather than delegating to Magic Patterns’ AI.
Load the design_system_authoring_guide prompt before writing any files. It
documents the full file/folder contract (component trios, named-export rules,
index.css import order, allowed providers, and more).
A design system’s writable files follow this structure:
components/<Name>/index.tsx — component source (PascalCase folder, named exports only)
components/<Name>/<Name>.previews.tsx — preview definitions (required per component)
components/<Name>/Context.md — AI/usage documentation (required per component)
index.css — design system styles / Tailwind imports (editable, cannot be deleted)
tailwind.config.js — Tailwind configuration (editable, cannot be deleted)
rules/<slug>.md — design rules (rules/setup.md is the special “Setup” rule)
Shell / auto-generated files (root index.tsx, library.ts, registry.ts, etc.) are stripped automatically if sent.
Resolves a design system’s active artifact and lists its files. Always call this first — design systems are collaborative, so the active artifact ID can change between calls. Never reuse a cached artifactId.
Creates a new, blank design system owned by you and returns its ID and editor URL. Seeds an empty initial version so you can immediately write files into it.
This creates a blank design system. Forking from an existing design system
is not supported through the MCP. After creating, load the
design_system_authoring_guide prompt and write files with
write_design_system_files.
Creates or overwrites files in a design system. Incoming files are merged onto the existing artifact (existing files are preserved), then compiled and activated immediately.
This tool is permissive: it saves your files and returns
validationErrorswithout blocking, so you can build incrementally. Fix all
validation errors before calling publish_design_system, which is strict.
Array of files to create or overwrite. Each entry has: - fileName — the
file path (e.g. components/Button/index.tsx, index.css,
rules/setup.md) - content — the full file contents to write
Publishes the design system’s active artifact as a new immutable version.
This tool is strict: it refuses if the active artifact has validation
errors. Run write_design_system_files and clear all validationErrors
first. A breaking change (e.g. a removed component or prop) bumps the major
version; otherwise the minor version is incremented.
These tools publish and manage a Magic Patterns inspiration document — a
shareable magicpatterns.com/inspiration/<id> link that renders 4 design
concepts (variants) side by side. Each concept is a self-contained sketch
of a UI direction.
Creates an inspiration document and returns a shareable URL. Declare each concept’s name/descriptionwithouthtml to publish the link immediately, then stream each concept in with inspiration_add_variant. You may also pass html inline to publish concepts fully in one call.
1–8 concepts, each with: - name — the concept name - description —
one-line description of the direction - html — the full, self-contained
concept content (omit to declare a placeholder to fill later)
Optional baseline the variants diverge from: { html, focus, sharedCopy, baselineStyle } where html is a faithful recreation of the current UI’s content.
Show Returns
id — the inspiration document ID
url — the shareable URL (login may be required)
variants — array of { id, name }; pass each id to inspiration_add_variant
Fills in one placeholder concept with its content. The concept renders live on the shared page as soon as its content arrives; the document flips to “ready” once every concept is filled.
Loads an inspiration document by its ID. Use this to read concepts back — for example, to implement a specific concept (“Implement Concept B from inspiration <id>”).
Revises a single already-filled concept in place, replacing its content (and optionally its name/description). Use this to update a subset of concepts without touching the others.
Resets every concept back to an empty placeholder — dropping each concept’s content and its pre-created “Iterate” room. Use this to replace all concepts with a fresh set of directions.
