> **Building with AI coding agents?** Install the authstack plugin with one command. This equips your agent with accurate Scalekit implementation patterns. > > **Recommended** (the `-y` flags skip prompts, so the command runs without an interactive terminal): > ```bash > npx -y @scalekit-inc/cli setup -y > ``` > > Global: > ```bash > npm install -g @scalekit-inc/cli > scalekit setup -y > ``` > > Supports Claude Code, Cursor, GitHub Copilot, Codex + skills for other Agent Skills-compatible agents in `~/.agents/skills`. > Skills: integrate-agentkit, implement-saaskit, add-mcp-oauth, implement-sso, implement-scim. > [Full setup guide](https://docs.scalekit.com/dev-kit/build-with-ai/) --- # Connect AI agents to the Magic Patterns MCP server The Magic Patterns MCP connector routes your AI agent's tool calls to Magic Patterns's own MCP server through Scalekit. Each user signs in to Magic Patterns once, and Scalekit stores and refreshes their tokens, so your agent never handles credentials. It comes with 23 tools. **Authentication:** OAuth2.1/DCR **Categories:** AI, Design **Tools:** 23: 10 read, 8 write, 5 destructive **Users sign in with:** OAuth **OAuth app:** Scalekit's or your own **Built by:** Vendor MCP **Try it:** [Playground in the Scalekit dashboard](https://app.scalekit.com/ws/signup?sk_intent=playground&provider=MAGICPATTERNSMCP) ## Setup 1. ### Install the SDK **Node.js** ```bash npm install @scalekit-sdk/node dotenv ``` **Python** ```bash pip install scalekit-sdk-python python-dotenv ``` 2. ### Set your credentials Add your Scalekit credentials to your `.env` file. Find values in **[app.scalekit.com](https://app.scalekit.com)** > **Developers** > **API Credentials**. ```sh title=".env" SCALEKIT_ENVIRONMENT_URL= SCALEKIT_CLIENT_ID= SCALEKIT_CLIENT_SECRET= ``` 3. ### Create the Magic Patterns MCP connection In **AgentKit > Connections**, create a Magic Patterns MCP connection. The name you give it is the `connection_name` your code passes. See [Configure connections](/agentkit/connections/). Scalekit credentials are available for Magic Patterns MCP server, so you don't need to register an OAuth app. 4. ### Authorize a user and make your first call **Node.js** (`quickstart.mts`) ```typescript import { ScalekitClient } from '@scalekit-sdk/node' import 'dotenv/config' import { createInterface } from 'node:readline/promises' const scalekit = new ScalekitClient( process.env.SCALEKIT_ENVIRONMENT_URL, process.env.SCALEKIT_CLIENT_ID, process.env.SCALEKIT_CLIENT_SECRET, ) const actions = scalekit.actions const connector = 'magicpatternsmcp' const identifier = 'user_123' // Generate an authorization link for the user const { link } = await actions.getAuthorizationLink({ connectionName: connector, identifier }) console.log('Authorize Magic Patterns MCP:', link) const rl = createInterface({ input: process.stdin, output: process.stdout }) await rl.question('Press Enter after authorizing...') rl.close() // Make your first call const result = await actions.executeTool({ connector, identifier, toolName: 'magicpatternsmcp_list_design_systems', toolInput: {}, }) console.log(result) ``` ```bash npx tsx quickstart.mts ``` **Python** (`quickstart.py`) ```python import os from scalekit import ScalekitClient from dotenv import load_dotenv load_dotenv() scalekit_client = ScalekitClient( env_url=os.getenv("SCALEKIT_ENVIRONMENT_URL"), client_id=os.getenv("SCALEKIT_CLIENT_ID"), client_secret=os.getenv("SCALEKIT_CLIENT_SECRET"), ) actions = scalekit_client.actions connection_name = "magicpatternsmcp" identifier = "user_123" # Generate an authorization link for the user link_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 call result = actions.execute_tool( tool_input={}, tool_name="magicpatternsmcp_list_design_systems", connection_name=connection_name, identifier=identifier, ) print(result) ``` ```bash python quickstart.py ``` Each user signs in once. See [Authorize a user](/agentkit/tools/authorize/) for the full flow and statuses. ## Tools Pass the exact name to `execute_tool`, with an input like each tool's example. To ask for a tool that's missing, use the [request form](https://scalekitsupport.portal.usepylon.com/forms/request-a-connector-tool). **Node.js** ```typescript const result = await actions.executeTool({ toolName: 'magicpatternsmcp_get_artifact', toolInput: { editorId: '', }, connector: 'magicpatternsmcp', identifier: 'user_123', }) ``` **Python** ```python result = actions.execute_tool( tool_name="magicpatternsmcp_get_artifact", tool_input={ "editorId": "", }, connection_name="magicpatternsmcp", identifier="user_123", ) ``` `result.data` is the app's response as JSON, and `result.execution_id` (`executionId` in Node.js) is the ID of the call. ### `magicpatternsmcp_get_artifact` Get Artifact · Read-only 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. Read only: yes. Destructive: no. Idempotent (safe to retry): yes. Inputs: - `editorId` (`string`, required): The editor ID of the design to retrieve the active artifact for. Example input: `{"editorId":""}` ### `magicpatternsmcp_get_design_status` Get Design Status · Read-only 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. Read only: yes. Destructive: no. Idempotent (safe to retry): yes. Inputs: - `editorId` (`string`, required): The editor ID from create_design or get_editor_id_from_url. Use this to identify which design to check status for. Example input: `{"editorId":""}` ### `magicpatternsmcp_get_design_system` Get Design System · Read-only Resolves a design system's active artifact and lists its files. Design systems are collaborative, so the active artifact ID can change between calls; always call this first rather than reusing a cached artifact ID. Returns the artifactId (to pass as baseArtifactId to write_design_system_files), the persisted files, and whether there are unpublished changes. Read only: yes. Destructive: no. Idempotent (safe to retry): yes. Inputs: - `designSystemId` (`string`, required): The design system ID (ds-...). Use list_design_systems to discover available design systems. Example input: `{"designSystemId":""}` ### `magicpatternsmcp_get_editor_id_from_url` Get Editor ID from URL · Read-only 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/", "https://www.magicpatterns.com/c/", "project-.magicpatterns.app", "magicpatterns.com/s/?nodeIds=". Read only: yes. Destructive: no. Idempotent (safe to retry): yes. Inputs: - `url` (`string`, required): The Magic Patterns URL to resolve to an editor ID. Supported formats: magicpatterns.com/c/, https://www.magicpatterns.com/c/, project-.magicpatterns.app, magicpatterns.com/s/?nodeIds=. Example input: `{"url":""}` ### `magicpatternsmcp_get_inspiration_document` Get Inspiration Document · Read-only 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 to check whether concepts are ready, or to fetch a concept's current html before revising it with inspiration_update_variant. Read only: yes. Destructive: no. Idempotent (safe to retry): yes. Inputs: - `inspirationId` (`string`, required): The Magic Patterns inspiration document ID (the in magicpatterns.com/inspiration/). Example input: `{"inspirationId":""}` ### `magicpatternsmcp_list_design_systems` List Design Systems · Read-only 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. Read only: yes. Destructive: no. Idempotent (safe to retry): yes. Inputs: none. Example input: `{}` ### `magicpatternsmcp_list_version_history` List Version History · Read-only 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. Read only: yes. Destructive: no. Idempotent (safe to retry): yes. Inputs: - `editorId` (`string`, required): The editor ID of the design whose version history to list. - `skip` (`number`, optional): Number of recent versions to skip for pagination. Defaults to 0 (most recent). Increment by 20 to paginate backwards through version history. Default: `0`. Example input: `{"editorId":""}` ### `magicpatternsmcp_read_artifact_files` Read Artifact Files · Read-only 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. Read only: yes. Destructive: no. Idempotent (safe to retry): yes. Inputs: - `artifactId` (`string`, required): The artifact ID to read files from. Obtain this from get_artifact or get_design_status. - `fileNames` (`array`, required): Array of file names or paths to read from the artifact. Example: ["App.tsx", "components/Button.tsx"]. Example input: `{"artifactId":"","fileNames":["App.tsx","components/Button.tsx"]}` ### `magicpatternsmcp_read_design_system_files` Read Design System Files · Read-only Reads the contents of one or more files from a design system's active artifact, such as components//index.tsx, index.css, tailwind.config.js, or rules/.md. Call get_design_system first to discover available file names, and always read before editing. Read only: yes. Destructive: no. Idempotent (safe to retry): yes. Inputs: - `designSystemId` (`string`, required): The design system ID (ds-...). - `fileNames` (`array`, required): Array of file names/paths to read, as listed by get_design_system. Example: ["components/Button/index.tsx", "index.css"]. Example input: `{"designSystemId":"","fileNames":["components/Button/index.tsx","index.css"]}` ### `magicpatternsmcp_read_recent_message_history` Read Recent Message History · Read-only 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. Read only: yes. Destructive: no. Idempotent (safe to retry): yes. Inputs: - `editorId` (`string`, required): The editor ID of the design to read chat history from. - `skip` (`number`, optional): Number of recent items to skip for pagination. Defaults to 0 (most recent). Increment by 10 to paginate backwards through history. Default: `0`. Example input: `{"editorId":""}` ### `magicpatternsmcp_create_design` Create Design · Write 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. Read only: no. Destructive: no. Idempotent (safe to retry): no. Inputs: - `designSystem` (`string`, optional): Optional design system name (e.g. 'Shadcn', 'MUI'). Resolved case-insensitively. designSystemId takes precedence if both provided. - `designSystemId` (`string`, optional): Optional design system ID. Use list_design_systems to discover IDs. - `imageUrls` (`array`, optional): Optional image URLs as visual references (only used with prompt). - `name` (`string`, optional): Optional name for the design. Defaults to 'Untitled'. - `prompt` (`string`, optional): Optional natural language prompt for AI generation. If omitted, a blank design with scaffold files is created instantly. - `templateId` (`string`, optional): Optional 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. Example input: `{}` ### `magicpatternsmcp_create_design_system` Create Design System · Write Creates a new, blank design system owned by the authenticated user and returns its ID plus editor URL. Seeds an empty initial version so files can be written into it immediately via write_design_system_files. This creates a BLANK design system; forking from an existing one is not supported. Read only: no. Destructive: no. Idempotent (safe to retry): no. Inputs: - `name` (`string`, required): The name of the new design system, e.g. 'Acme Design System'. - `logo` (`string`, optional): Optional logo URL for the design system. Defaults to a placeholder image if omitted. Example input: `{"name":"Acme Design System"}` ### `magicpatternsmcp_create_inspiration_document` Create Inspiration Document · Write Creates a Magic Patterns inspiration document and returns a shareable magicpatterns.com/inspiration/ link that renders 1-8 design concepts side by side. Concepts can be declared as placeholders (name/description only) and filled in later with inspiration_add_variant, or published fully in one call by including html inline for each concept. Read only: no. Destructive: no. Idempotent (safe to retry): no. Inputs: - `files` (`array`, required): The 1-8 concepts to publish or declare. Each entry is {"name": "...", "description": "...", "html": "..."}; omit html to declare a placeholder concept to fill later via inspiration_add_variant. - `baseline` (`object`, optional): Optional baseline the variants diverge from: a faithful recreation of the current UI plus pinned invariants. Shape: {"html": "...", "focus": "...", "sharedCopy": "...", "baselineStyle": "..."}. Only html is required. - `repositoryUrl` (`string`, optional): Optional GitHub repository URL the concepts were generated from, kept for context. - `title` (`string`, optional): Optional short label for what the concepts explore, e.g. 'Projects list empty state'. Example input: `{"files":[]}` ### `magicpatternsmcp_create_new_artifact` Create New Artifact · Write 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. Read only: no. Destructive: no. Idempotent (safe to retry): no. Inputs: - `artifactId` (`string`, required): The artifact ID to clone from (typically the active artifact from get_artifact or get_design_status). - `name` (`string`, required): A short title for this version, phrased as the change about to be made (e.g. 'Swap hero CTA to solid variant'). Shown in the design timeline and versions dropdown. - `description` (`string`, optional): Optional longer note on what is about to change and why, shown above the version in chat. Prefer describing what actually shipped via publish_artifact's description instead; use this for a session that may not reach publish. Example input: `{"artifactId":"","name":"Swap hero CTA to solid variant"}` ### `magicpatternsmcp_create_slide_deck` Create Slide Deck · Write 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. A prompt is required; generation is long-running, so poll get_design_status rather than waiting synchronously. Read only: no. Destructive: no. Idempotent (safe to retry): no. Inputs: - `prompt` (`string`, required): Natural language description of the slide deck to generate, e.g. 'A 10-slide startup pitch deck for a fintech company'. - `designSystem` (`string`, optional): Optional design system name (e.g. 'Shadcn', 'MUI'). Resolved case-insensitively. designSystemId takes precedence if both are provided. - `designSystemId` (`string`, optional): Optional design system ID. Use list_design_systems to discover IDs. - `imageUrls` (`array`, optional): Optional image URLs as visual references. - `name` (`string`, optional): Optional name for the slide deck. Defaults to 'Untitled'. Example input: `{"prompt":"A 10-slide startup pitch deck for a fintech company"}` ### `magicpatternsmcp_inspiration_add_variant` Inspiration Add Variant · Write Fills in one concept of an existing Magic Patterns inspiration document with its self-contained HTML. Use after create_inspiration_document to stream concepts in one at a time: the concept renders live on the shared page as soon as its html arrives, and the document flips to 'ready' once every concept is filled. Read only: no. Destructive: no. Idempotent (safe to retry): no. Inputs: - `html` (`string`, required): The full, self-contained HTML document (non-empty). - `inspirationId` (`string`, required): The inspiration document ID returned by create_inspiration_document. - `description` (`string`, optional): Optional update to the concept's design direction. - `name` (`string`, optional): Optional update to the concept's name. - `variantId` (`string`, optional): The concept ID to fill, from create_inspiration_document. Omit to fill the first still-empty concept. Example input: `{"html":"","inspirationId":""}` ### `magicpatternsmcp_publish_artifact` Publish Artifact · Write 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. Read only: no. Destructive: no. Idempotent (safe to retry): no. Inputs: - `artifactId` (`string`, required): The artifact ID to compile and publish. - `editorId` (`string`, required): The editor ID of the design this artifact belongs to. - `description` (`string`, optional): A summary of what changed in this version, written like a commit message in the past tense describing what actually shipped, e.g. 'Swapped the hero CTA to the solid Button variant and dropped the legacy grid'. Always provide this: collaborators open the design without having seen the session, and this is the only prose explaining what changed. Example input: `{"artifactId":"","editorId":""}` ### `magicpatternsmcp_publish_design_system` Publish Design System · Write Publishes the design system's active artifact as a new immutable version. Strict: refuses if the active artifact has validation errors from write_design_system_files; clear all validationErrors first. Returns the new version (major.minor) and whether it is backwards-compatible with the previously published version (a breaking change, such as a removed component or prop, bumps the major version). Read only: no. Destructive: no. Idempotent (safe to retry): no. Inputs: - `designSystemId` (`string`, required): The design system ID (ds-...). Example input: `{"designSystemId":""}` ### `magicpatternsmcp_inspiration_clear_variants` Inspiration Clear Variants · Destructive 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 stream fresh concepts back in with inspiration_add_variant targeting the returned concept IDs. Read only: no. Destructive: yes. Idempotent (safe to retry): no. Inputs: - `inspirationId` (`string`, required): The inspiration document ID returned by create_inspiration_document. Example input: `{"inspirationId":""}` ### `magicpatternsmcp_inspiration_update_variant` Inspiration Update Variant · Destructive Revises a single already-filled concept of a Magic Patterns inspiration document in place, replacing its html (and optionally its name/description). Use to update a subset of concepts without touching the others; the concept's 'Iterate in Magic Patterns' room is refreshed so it builds from the new html. Read only: no. Destructive: yes. Idempotent (safe to retry): no. Inputs: - `html` (`string`, required): The full, self-contained HTML document (non-empty). - `inspirationId` (`string`, required): The inspiration document ID. - `variantId` (`string`, required): The concept ID to revise, from get_inspiration_document. Targets an existing filled concept (unlike inspiration_add_variant, which fills empty placeholders). - `description` (`string`, optional): Optional update to the concept's design direction. - `name` (`string`, optional): Optional update to the concept's name. Example input: `{"html":"","inspirationId":"","variantId":""}` ### `magicpatternsmcp_send_prompt` Send Prompt · Destructive 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. Read only: no. Destructive: yes. Idempotent (safe to retry): no. Inputs: - `editorId` (`string`, required): The editor ID of the design to update. - `prompt` (`string`, required): A natural language description of what to create or change. Example input: `{"editorId":"","prompt":"A 10-slide startup pitch deck for a fintech company"}` ### `magicpatternsmcp_write_artifact_files` Write Artifact Files · Destructive 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. Read only: no. Destructive: yes. Idempotent (safe to retry): no. Inputs: - `artifactId` (`string`, required): The artifact ID to write files to. - `files` (`array`, required): Array of files to write. Example input: `{"artifactId":"","files":[]}` ### `magicpatternsmcp_write_design_system_files` Write Design System Files · Destructive Creates or overwrites files in a design system. Incoming files are validated, merged onto the existing artifact (existing files are preserved), compiled, and activated immediately. Components must use the complete trio: components//index.tsx, components//.previews.tsx, and components//Context.md. Pass the artifactId from get_design_system as baseArtifactId to detect drift; a 409 means someone else changed the design system in the meantime. Read only: no. Destructive: yes. Idempotent (safe to retry): no. Inputs: - `designSystemId` (`string`, required): The design system ID (ds-...). - `files` (`array`, required): Array of files to create or overwrite, e.g. [{"fileName": "components/Button/index.tsx", "content": "export function Button() {...}"}]. - `baseArtifactId` (`string`, optional): The artifactId from get_design_system. If the active artifact has since changed, the write is rejected with a 409 so it can be re-read and retried. Example input: `{"designSystemId":"","files":[]}` ## Related Other AI connectors ([all 116](/agentkit/connectors/?category=ai)): - [Chorus](/agentkit/connectors/chorus/): Scalekit connector, Username and password, 9 tools - [Gong](/agentkit/connectors/gong/): Scalekit connector, OAuth, 49 tools - [Jiminny](/agentkit/connectors/jiminny/): Scalekit connector, Access token, 27 tools --- ## More Scalekit documentation | Resource | What it contains | When to use it | |----------|-----------------|----------------| | [/llms.txt](/llms.txt) | Structured index with routing hints per product area | Start here — find which documentation set covers your topic before loading full content | | [/llms-full.txt](/llms-full.txt) | Complete documentation for all Scalekit products in one file | Use when you need exhaustive context across multiple products or when the topic spans several areas | | [sitemap-0.xml](https://docs.scalekit.com/sitemap-0.xml) | Full URL list of every documentation page | Use to discover specific page URLs you can fetch for targeted, page-level answers |