New in Sketch — Independent borders, selection colors, and more Learn more

Skip Navigation

MCP Server

6 min read

Sketch includes a built-in MCP Server, a lightweight local-only web server that lets AI clients like ChatGPT or Claude interact directly with Sketch. Through the MCP Server, these clients can access or modify data in your Sketch documents using a set of defined MCP commands (also called tools).

The MCP Server requires Sketch 2025.2.4 or later and is not available in the Mac App Store version. Download the Mac app from sketch.com.

When an AI client connects to the Sketch MCP Server, it automatically learns which tools are available and how to use them. These details are supplied by the server and injected into the model’s context, allowing it to reason about Sketch-specific actions.

Once you connect it, your AI agent can issue requests such as “export all icons for developer handoff” or “find inconsistencies in the design system”. The AI then selects the most suitable MCP command and calls it.

Typical use cases include:

  • Exporting assets for developer handoff
  • Reviewing or auditing design systems for inconsistencies
  • Generating new screens from templates using existing components

Looking for more ways to use our MCP server? Check out our skills repo and a recent blog post with some MCP server use cases.

How to start Sketch’s MCP Server

  1. In Sketch, press K to open the Command Bar and type “MCP”.
  2. Choose Start MCP Server.
  3. At this point, a macOS security dialog may ask you to allow Sketch to access your Local Network. This is required for the MCP server to operate. Please choose “Allow”.
  4. At the bottom of your Sketch document you should see a confirmation message confirming the MCP server’s address and port.

Alternatively, you can start and stop the MCP Server in Settings > General > MCP Server.

An image highlighting the MCP Server section in the Settings window.

The General settings panel with the MCP Server toggle highlighted

If you see an error message when you attempt to start the MCP server, please let us know.

How to connect your AI client

Before you connect your AI client, make sure you’ve started the MCP server in Sketch.

You’ll need Claude Code installed and running in your terminal to use the Sketch MCP server. If you haven’t set it up yet, get Claude Code before continuing.

  1. Run the following command to connect Claude Code to the Sketch MCP server:

    claude mcp add --transport http sketch http://localhost:31126/mcp
    
  2. And then verify that Claude Code is connected to the MCP server:

    claude mcp get sketch
    
  1. In the Claude desktop app, go to Claude > Settings > Extensions and click Browse Extensions.
  2. Search for “Sketch”.
  3. Click the Sketch connector, then click Install.
  4. Sketch will appear on the Extensions page under Installed on your computer.

To manage tool permissions, click Configure. You can choose whether Claude always asks before using the MCP server’s tools, or is always allowed to use them.

  1. Press P to open the Command Palette, type in MCP Add.
  2. Choose the MCP: Add Server option.
  3. Select HTTP as the MCP server type when prompted.
  4. Paste this URL when prompted:

    http://localhost:31126/mcp
    
  5. Give this server a name, e.g. sketch.
  6. Press I to open a new Copilot chat in Agent mode.
  1. Go to Cursor > Settings > Cursor Settings menu
  2. Navigate to the Tools & MCP tab
  3. Click Add Custom MCP
  4. Insert the following text into the auto-generated mcp.json file:

    {
      "mcpServers": {
        "sketch": {
          "url": "http://localhost:31126/mcp",
          "type": "http"
        }
      }
    }
    
  5. Switch back to Cursor Settings tab and make sure there’s a green dot next to the sketch MCP server entry.
  1. Add the following lines to your ~/.codex/config.toml file:

    [mcp_servers.sketch]
    url = "http://localhost:31126/mcp"
    
  2. Run codex, type /mcp and verify that the Sketch MCP server is active:

    /mcp
    
    🔌  MCP Tools
      • Server: sketch
        • URL: http://localhost:31126/mcp
        • Tools: get_selection_as_image, run_code
    
  1. Open an Agent session in Antigravity.
  2. Click the menu at the top of the side panel and select MCP Servers.
  3. At the top of the MCP Store, click Manage MCP Servers, then View raw config.
  4. Add the following to your config:

    {
      "mcpServers": {
        "sketch": {
          "serverUrl": "http://localhost:31126/mcp"
        }
      }
    }
    
  5. Save the file and restart Antigravity to load the MCP Server.

Sketch’s MCP tools

For now, we’ve focused on two tools that should cover most use cases:

  1. get_selection_as_image captures an image of the user’s current selection in the frontmost Sketch document and returns it to the AI client for analysis.
  2. run_code executes SketchAPI code written by the AI to complete a task you’ve prompted it with.

The run_code tool is especially powerful. Since AI models excel at writing code, they can access the entire SketchAPI — just like a Sketch plugin would. This means the AI can automate and control Sketch through scripts with multiple steps, branching, and even error handling.

If the AI encounters code errors, it can review them, adjust the script, and try again — iterating automatically until the code achieves the intended result. You can watch this process unfold or step in at any point, but the AI can often complete the loop entirely on its own.

How to work with Sketch and your AI tool

You generally don’t need to specify which MCP tool to call — the AI will decide that on its own. That said, you can still mention a tool explicitly if you want to guide its approach. Here are some examples of the type of prompts you could use:

  • Explain the visual layout of the selected Sketch frame
  • Are there any symbol masters in my active Sketch document that don’t have any instances?
  • List all design tokens used in my Sketch selection
  • Create a vertical stack of four rectangles in Sketch and add a unique gradient pattern to each
  • Fix grammar and spelling mistakes on the selected Sketch frame
  • Export all Sketch symbols prefixed with “icon/” from the current page as SVGs to my Desktop
  • Show the full component hierarchy of my Sketch selection as a tree
  • Generate my current Sketch selection in React
  • Replace every text layer on the selected frame with a random Apple product name (including text inside symbols).

The prompt ideas above are basic examples. A good prompt would typically include more detail, break the task into well-defined steps, provide some rules for your AI client to follow, and even suggest how to validate the results.

Referring to specific layers

If you want to point your AI agent to a specific layer, you can copy that layer’s unique ID and paste it into your prompt. To do this, select a layer (or multiple layers), then use the Copy Layer ID action in the Command Bar, under Plugins > Developer in the menu bar, or — when the MCP server is running — in the Copy submenu of the Canvas or Layer List context menu.

Troubleshooting

If you’re having trouble setting up or using the MCP Server — for example, if the connection between your AI client and Sketch isn’t working or certain tools don’t respond as expected — head over to the Troubleshooting page.

Security

The MCP server is local-only and cannot be accessed remotely. Each call is handled locally by the MCP server — that is, by Sketch itself — and the results are sent back to the AI client for further processing. The server is off by default, and you have full control over when and how external AI clients connect to it.