Magic Patterns

Lists the design systems available to the authenticated user. Returns both built-in (reserved) design systems and any custom design systems the user has created or has access to. Use this when the user mentions a specific design system (e.g. "use Shadcn", "with my company design system") so you can resolve the correct ID to pass to create_design. Each result includes: - id: The unique design system ID to pass to create_design - name: The human-readable name - isReserved: Whether it is a built-in preset (e.g. Base, Shadcn, MUI) - isActive: Whether this is the user's currently active design system

Resolves a Magic Patterns URL to an editor ID. Use this when the user shares a Magic Patterns link and you need the editorId for subsequent operations like send_prompt or get_design_status. NEXT STEPS: Use the returned editorId with send_prompt, get_design_status, get_artifact, or other editor-scoped tools.

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 or other agents may have changed the active artifact, sent prompts, or made edits in the UI since you last checked. This is your source of truth for the current state. Also use this to poll for completion after create_design (with prompt) or send_prompt. RESPONSE: - isGenerating: true if AI is still working - activeArtifactId: the current active artifact ID (use for create_new_artifact, read_artifact_files, etc.) - availableFiles: list of file names in the active artifact NEXT STEPS: - If isGenerating=true: Wait at least 60 seconds before polling again. Generation can take up to 10 minutes. - If isGenerating=false: Use activeArtifactId with create_new_artifact (for code-first edits) or read_artifact_files (to inspect generated code).

Reads the recent chat item history for a design. Returns the last 10 chat items (user prompts, AI responses, artifact versions, edits). Use the skip parameter to paginate backwards through older items. Because the editor is collaborative, the user may have sent prompts or made changes in the UI between your tool calls. Use this to catch up on what happened and understand the current context before acting. Note: Code contents are omitted from the response to keep it concise. Use read_artifact_files to read full file contents.

Lists the artifact version history for a design. Returns the most recent 20 versions with their artifact IDs, version labels, and titles. Use the skip parameter to paginate backwards. Because the editor is collaborative, new versions may have been created by the user or AI since you last checked. Use this alongside get_design_status to understand the full picture. Each version corresponds to a snapshot of the design's code at a point in time. Use the artifactId from a version entry to read_artifact_files for that version, or create_new_artifact to branch from it.

Gets the active artifact for a design, including its ID and list of files. Use this to discover the current artifact before reading files or creating a new artifact branch. Because the editor is collaborative, always call this (or get_design_status) to get the LATEST active artifact — do not rely on a previously cached artifact ID. NEXT STEPS: - Call read_artifact_files(artifactId, fileNames) to read code. - Call create_new_artifact(artifactId, name) to create a working copy before making changes.

Reads the contents of one or more files from an artifact. IMPORTANT: Always read files BEFORE making changes with write_artifact_files so you understand the current state. This code is meant as a starting point or inspiration. It is NOT production-ready. You should adapt this code to match the user's project style, frameworks, libraries, and conventions.

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. Returns: - artifactId: the current active artifact (pass as baseArtifactId to write_design_system_files to detect drift) - files: the persisted files (e.g. components/<Name>/*, index.css, tailwind.config.js, rules/*) - hasUnpublishedChanges: whether the active artifact differs from the latest published version - guide: pointer to the design_system_authoring_guide prompt — load it before writing files NEXT STEPS: - read_design_system_files(designSystemId, fileNames) to read file contents - write_design_system_files(designSystemId, files) to create or update files - publish_design_system(designSystemId) to publish a new version

Reads the contents of one or more files from a design system's active artifact. Design system file structure: - components/<Name>/index.tsx — component source (named exports only) - components/<Name>/<Name>.previews.tsx — preview definitions - components/<Name>/Context.md — AI/usage documentation - index.css — design system styles / Tailwind imports - tailwind.config.js — Tailwind configuration - rules/<slug>.md — design rules Call get_design_system first to discover available file names. Always read before editing.

Creates a new Magic Patterns design. This is the starting point for both prompt-based and code-first workflows. BEHAVIOR: - With prompt: Creates a design and kicks off AI generation (long-running, especially when design-system setup is involved). Do not wait synchronously; poll get_design_status to track progress. - Without prompt: Creates a blank design with scaffold files (App.tsx, index.tsx, index.css, tailwind.config.js) — returns immediately. - With templateId: Forks an existing design first, then optionally applies the prompt to the fork. The templateId is an editor ID — you can get it from a design URL (the ID in magicpatterns.com/c/<id>) or via get_editor_id_from_url. You can optionally specify a design system. If the user mentions one, call list_design_systems first. NEXT STEPS: - With prompt: Call get_design_status(editorId) to poll until generation completes. This often takes a while, so the caller should keep polling instead of assuming the design is ready immediately. - Without prompt: Call get_design_status(editorId) to get the active artifact, then create_new_artifact to start editing.

Sends a natural language prompt to the Magic Patterns AI for an existing design. The AI will interpret the prompt and generate/update code. Returns immediately with a requestId. BEFORE CALLING: Call get_design_status(editorId) to make sure the design is not already generating (isGenerating=false) and to understand the current state. The user may have sent prompts or made changes in the UI. Use this for prompt-based updates to existing designs (Workflow A with existing design). ⚠️ IMPORTANT: This kicks off a LONG-RUNNING generation that typically takes 2–10 minutes. Do NOT poll more often than every 60 seconds. Call get_design_status(editorId) once every 60 seconds until isGenerating=false. Do NOT treat slow generation as an error — it is expected.

Compiles an artifact's source files and sets it as the active artifact for the design. This is the final step in the code-first workflow (Workflow B). This tool: 1. Compiles all source files in the artifact (bundling for preview). 2. Sets the artifact as the design's active artifact (so it appears in the editor and preview). 3. Adds a version entry to the design timeline. NEXT STEPS: The design preview will update. Share the editor URL with the user.