--- title: "Magic Patterns MCP integration | Growf" description: "Magic Patterns MCP lets agents create and iterate on interface designs, inspect design status and history, read or… Connect Magic Patterns MCP to Growf." url: "https://www.growf.io/integrations/magic_patterns_mcp/" language: "en" --- Integration / Content ![Magic Patterns MCP logo](https://logos.composio.dev/api/magic_patterns_mcp) # Magic Patterns MCP integration Magic Patterns MCP lets agents create and iterate on interface designs, inspect design status and history, read or modify artifact files, and publish authorized design artifacts. [Get a demo](https://www.growf.io/demo/) About Magic Patterns MCP ## 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. [All integrations](https://www.growf.io/integrations/) Category Content, Developer Tools & DevOps Connection OAuth Type Tool Actions 855 Tags library Example prompts ## What you can ask Growf to do with Magic Patterns MCP - “Create a responsive sign-up form prototype” - “Publish approved header and footer artifacts” - “List recent design iterations for product page” Available actions ## 855 actions your agents can run in Magic Patterns MCP - Create design 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… - Create design system Creates a new, blank design system owned by you and returns its ID + editor URL. Seeds an empty initial version so you can immediately write files into it. NEXT STEPS: - write\_design\_system\_files(designSystemId, files) to add components, styling, and rules - publish\_design\_system(designSystemId) to… - Create inspiration document Creates a Magic Patterns inspiration document and returns a shareable magicpatterns.com/inspiration/ link that renders the concepts side by side. Preferred flow: create a PLACEHOLDER here by declaring each concept's { name, description } WITHOUT html, then fill each one in with a separate inspi… - Create new artifact Creates a new artifact by cloning an existing artifact. The new artifact becomes the active artifact for the design. This gives you a safe "branch" to write code to before publishing. BEFORE CALLING: Always call get\_design\_status or get\_artifact first to get the CURRENT active artifact ID. The user… - Create slide deck 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. BEHAVIOR: - A prompt is REQUIRED — the deck is generated from it (unlike create\_design, there is no blank-… - Get artifact 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 o… - Get design status 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 che… - Get design system 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\_… - Get editor id from url 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-scop… - Get inspiration document Loads a Magic Patterns inspiration document by its id. An inspiration document is a set of design "concepts" (variants) — each a self-contained HTML sketch of a UI direction. Use this when the user asks to implement/build a specific concept from a Magic Patterns inspiration (e.g. "Implement Concept… - Inspiration add variant Fills in one concept of an existing Magic Patterns inspiration document with its self-contained HTML. Use this after create\_inspiration\_document to stream concepts in one at a time: pass the html directly here instead of holding it all for a single create call. The concept renders live on the share… - 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. Use this to REPLACE all concepts: clear the document, then invent a fresh set of directions and stream each one's html back in with… Show all 23 actions ## Put Magic Patterns MCP to work inside Growf. Connect it once and every workspace, agent and workflow can use it — securely, with your team in the loop. [Get a demo](https://www.growf.io/demo/)