Magic Patterns MCP connector
OAuth2.1/DCRAIDesignConnect to Magic Patterns, the AI-powered UI design tool. Generate, edit, and manage design components and artifacts from your AI workflows.
Magic Patterns MCP connector
-
Install the SDK
Section titled “Install the SDK”Terminal window npm install @scalekit-sdk/nodeTerminal window pip install scalekit -
Set your credentials
Section titled “Set your credentials”Add your Scalekit credentials to your
.envfile. Find values in app.scalekit.com > Developers > API Credentials..env SCALEKIT_ENVIRONMENT_URL=<your-environment-url>SCALEKIT_CLIENT_ID=<your-client-id>SCALEKIT_CLIENT_SECRET=<your-client-secret> -
Authorize and make your first call
Section titled “Authorize and make your first call”quickstart.ts import { ScalekitClient } from '@scalekit-sdk/node'import 'dotenv/config'const scalekit = new ScalekitClient(process.env.SCALEKIT_ENV_URL,process.env.SCALEKIT_CLIENT_ID,process.env.SCALEKIT_CLIENT_SECRET,)const actions = scalekit.actionsconst connector = 'magicpatternsmcp'const identifier = 'user_123'// Generate an authorization link for the userconst { link } = await actions.getAuthorizationLink({ connectionName: connector, identifier })console.log('Authorize Magic Patterns MCP:', link)process.stdout.write('Press Enter after authorizing...')await new Promise(r => process.stdin.once('data', r))// Make your first callconst result = await actions.executeTool({connector,identifier,toolName: 'magicpatternsmcp_list_design_systems',toolInput: {},})console.log(result)quickstart.py import osfrom scalekit.client import ScalekitClientfrom dotenv import load_dotenvload_dotenv()scalekit_client = ScalekitClient(env_url=os.getenv("SCALEKIT_ENV_URL"),client_id=os.getenv("SCALEKIT_CLIENT_ID"),client_secret=os.getenv("SCALEKIT_CLIENT_SECRET"),)actions = scalekit_client.actionsconnection_name = "magicpatternsmcp"identifier = "user_123"# Generate an authorization link for the userlink_response = actions.get_authorization_link(connection_name=connection_name,identifier=identifier,)print("Authorize Magic Patterns MCP:", link_response.link)input("Press Enter after authorizing...")# Make your first callresult = actions.execute_tool(tool_input={},tool_name="magicpatternsmcp_list_design_systems",connection_name=connection_name,identifier=identifier,)print(result)
What you can do
Section titled “What you can do”Connect this agent connector to let your agent:
- Files write artifact — Creates or overwrites one or more files in an artifact
- Send prompt — Sends a natural language prompt to the Magic Patterns AI for an existing design
- Read recent message history, artifact files — Reads the recent chat item history for a design, returning the last 10 chat items (user prompts, AI responses, artifact versions, edits)
- Artifact publish — Compiles an artifact’s source files and sets it as the active artifact for the design
- List version history, design systems — Lists the artifact version history for a design, returning the most recent 20 versions with their artifact IDs, version labels, and titles
- Get editor id from url, design status, artifact — Resolves a Magic Patterns URL to an editor ID
Tool list
Section titled “Tool list”Use the exact tool names from the Tool list below when you call execute_tool. If you’re not sure which name to use, list the tools available for the current user first.
magicpatternsmcp_create_design#Creates a new Magic Patterns design. With a prompt, kicks off AI generation (poll get_design_status to track progress). Without a prompt, creates a blank design with scaffold files instantly. Optionally fork an existing design via templateId, and specify a design system by name or ID.6 params
Creates a new Magic Patterns design. With a prompt, kicks off AI generation (poll get_design_status to track progress). Without a prompt, creates a blank design with scaffold files instantly. Optionally fork an existing design via templateId, and specify a design system by name or ID.
designSystemstringoptionalOptional design system name (e.g. 'Shadcn', 'MUI'). Resolved case-insensitively. designSystemId takes precedence if both provided.designSystemIdstringoptionalOptional design system ID. Use list_design_systems to discover IDs.imageUrlsarrayoptionalOptional image URLs as visual references (only used with prompt).namestringoptionalOptional name for the design. Defaults to 'Untitled'.promptstringoptionalOptional natural language prompt for AI generation. If omitted, a blank design with scaffold files is created instantly.templateIdstringoptionalOptional editor ID of an existing design to fork as a template. Get the ID from the design URL or via get_editor_id_from_url.magicpatternsmcp_create_new_artifact#Creates a new artifact by cloning an existing artifact, setting it as the active artifact for the design. Use this before making file changes with write_artifact_files so the user can revert to the previous artifact. Always get the current active artifact ID from get_design_status or get_artifact first.2 params
Creates a new artifact by cloning an existing artifact, setting it as the active artifact for the design. Use this before making file changes with write_artifact_files so the user can revert to the previous artifact. Always get the current active artifact ID from get_design_status or get_artifact first.
artifactIdstringrequiredThe artifact ID to clone from (typically the active artifact from get_artifact or get_design_status).namestringrequiredA name for this artifact version (shown in the design timeline).magicpatternsmcp_get_artifact#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 before reading files or creating a new artifact branch.1 param
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 before reading files or creating a new artifact branch.
editorIdstringrequiredThe editor ID of the design to retrieve the active artifact for.magicpatternsmcp_get_design_status#Gets the current status of a design: whether AI generation is active, the active artifact ID, and available files. Call this before starting new work on an existing design, and to poll for completion after create_design (with prompt) or send_prompt. Returns isGenerating, activeArtifactId, and availableFiles.1 param
Gets the current status of a design: whether AI generation is active, the active artifact ID, and available files. Call this before starting new work on an existing design, and to poll for completion after create_design (with prompt) or send_prompt. Returns isGenerating, activeArtifactId, and availableFiles.
editorIdstringrequiredThe editor ID from create_design or get_editor_id_from_url. Use this to identify which design to check status for.magicpatternsmcp_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. Supported formats: "magicpatterns.com/c/<id>", "https://www.magicpatterns.com/c/<id>", "project-<slug>.magicpatterns.app", "magicpatterns.com/s/<canvasId>?nodeIds=<nodeId>".1 param
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. Supported formats: "magicpatterns.com/c/<id>", "https://www.magicpatterns.com/c/<id>", "project-<slug>.magicpatterns.app", "magicpatterns.com/s/<canvasId>?nodeIds=<nodeId>".
urlstringrequiredThe Magic Patterns URL to resolve to an editor ID. Supported formats: magicpatterns.com/c/<id>, https://www.magicpatterns.com/c/<id>, project-<slug>.magicpatterns.app, magicpatterns.com/s/<canvasId>?nodeIds=<nodeId>.magicpatternsmcp_list_design_systems#Lists the design systems available to the authenticated user, including built-in presets (Base, Shadcn, MUI) and any custom design systems. Use this to resolve a design system name to its ID before calling create_design.0 params
Lists the design systems available to the authenticated user, including built-in presets (Base, Shadcn, MUI) and any custom design systems. Use this to resolve a design system name to its ID before calling create_design.
magicpatternsmcp_list_version_history#Lists the artifact version history for a design, returning the most recent 20 versions with their artifact IDs, version labels, and titles. Use skip to paginate backwards. Each version corresponds to a snapshot of the design's code at a point in time.2 params
Lists the artifact version history for a design, returning the most recent 20 versions with their artifact IDs, version labels, and titles. Use skip to paginate backwards. Each version corresponds to a snapshot of the design's code at a point in time.
editorIdstringrequiredThe editor ID of the design whose version history to list.skipnumberoptionalNumber of recent versions to skip for pagination. Defaults to 0 (most recent). Increment by 20 to paginate backwards through version history.magicpatternsmcp_publish_artifact#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 — it bundles files for preview, updates the active artifact in the editor, and adds a version entry to the design timeline.2 params
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 — it bundles files for preview, updates the active artifact in the editor, and adds a version entry to the design timeline.
artifactIdstringrequiredThe artifact ID to compile and publish.editorIdstringrequiredThe editor ID of the design this artifact belongs to.magicpatternsmcp_read_artifact_files#Reads the contents of one or more files from an artifact. Always read files before making changes with write_artifact_files. The code is meant as a starting point and should be adapted to the user's project style, frameworks, and conventions.2 params
Reads the contents of one or more files from an artifact. Always read files before making changes with write_artifact_files. The code is meant as a starting point and should be adapted to the user's project style, frameworks, and conventions.
artifactIdstringrequiredThe artifact ID to read files from. Obtain this from get_artifact or get_design_status.fileNamesarrayrequiredArray of file names or paths to read from the artifact. Example: ["App.tsx", "components/Button.tsx"].magicpatternsmcp_read_recent_message_history#Reads the recent chat item history for a design, returning the last 10 chat items (user prompts, AI responses, artifact versions, edits). Use the skip parameter to paginate backwards. Code contents are omitted; use read_artifact_files for full file contents.2 params
Reads the recent chat item history for a design, returning the last 10 chat items (user prompts, AI responses, artifact versions, edits). Use the skip parameter to paginate backwards. Code contents are omitted; use read_artifact_files for full file contents.
editorIdstringrequiredThe editor ID of the design to read chat history from.skipnumberoptionalNumber of recent items to skip for pagination. Defaults to 0 (most recent). Increment by 10 to paginate backwards through history.magicpatternsmcp_send_prompt#Sends a natural language prompt to the Magic Patterns AI for an existing design. The AI generates or updates code and returns immediately with a requestId. Call get_design_status to poll until isGenerating is false. Generation typically takes 2-10 minutes; poll no more than once every 60 seconds.2 params
Sends a natural language prompt to the Magic Patterns AI for an existing design. The AI generates or updates code and returns immediately with a requestId. Call get_design_status to poll until isGenerating is false. Generation typically takes 2-10 minutes; poll no more than once every 60 seconds.
editorIdstringrequiredThe editor ID of the design to update.promptstringrequiredA natural language description of what to create or change.magicpatternsmcp_write_artifact_files#Creates or overwrites one or more files in an artifact. If a file exists it will be replaced; if it does not exist it will be created. This only saves source files — call publish_artifact after finishing all file changes to compile and activate the artifact.2 params
Creates or overwrites one or more files in an artifact. If a file exists it will be replaced; if it does not exist it will be created. This only saves source files — call publish_artifact after finishing all file changes to compile and activate the artifact.
artifactIdstringrequiredThe artifact ID to write files to.filesarrayrequiredArray of files to write.