home / mcp / sketch context mcp server

Sketch Context MCP Server

MCP server to provide Sketch layout information to AI coding agents like Cursor

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "jshmllr-sketch-context-mcp": {
      "command": "sketch-context-mcp",
      "args": [
        "--local-file",
        "/path/to/your/file.sketch"
      ],
      "env": {
        "PORT": "3333",
        "DEBUG_LEVEL": "info",
        "SKETCH_API_KEY": "YOUR_TOKEN",
        "LOCAL_SKETCH_PATH": "/path/to/file.sketch"
      }
    }
  }
}

You can use the Sketch Context MCP Server to expose Sketch file data to IDEs via the Model Context Protocol, enabling AI-assisted design-to-code workflows and real-time collaboration between Sketch and supported editors like Cursor. It parses Sketch files, implements MCP, and provides a UI and WebSocket-based communication pathway for seamless integration.

How to use

You run the MCP server with a Sketch file and connect your MCP client (such as Cursor) to the server to reference components, list all symbols, and create or query design elements through natural language commands. Start the server with your local Sketch file or with access to Sketch Cloud, then connect your client to the provided endpoint and begin issuing commands to inspect and modify your design.

How to install

Prerequisites you need before installing the MCP server:

Node.js v14 or later
Sketch v70 or later
A working Sketch account (local or Sketch Cloud)
An MCP client like Cursor or another compatible IDE

Install the MCP server globally and run it with your Sketch file using one of the provided methods.

# Install globally
npm install -g sketch-context-mcp

# Run with a local Sketch file
sketch-context-mcp --local-file=/path/to/your/file.sketch

# Run with Sketch Cloud access (if you have an API key)
sketch-context-mcp --sketch-api-key=<your-sketch-api-key>

Alternatively, you can invoke the server directly via npx without a local install.

npx sketch-context-mcp --local-file=/path/to/your/file.sketch

Additional setup and plugin installation

Install the Sketch plugin for MCP integration: download the latest release, install the .sketchplugin file by double-clicking, and verify it appears under Plugins > Sketch Context MCP.

To connect Cursor to the MCP server after starting it, use the MCP interface in Sketch to connect to the server, then configure Cursor to reference components by ID or query design elements.

Configuration and security

You can configure the server with environment variables or command-line options. The following environment variables are shown in usage notes and should be provided securely in your environment.

SKETCH_API_KEY: Your Sketch API access token for Sketch Cloud files
PORT: The port to run the server on (default: 3333)
LOCAL_SKETCH_PATH: Path to a local Sketch file (alternative to --local-file)
DEBUG_LEVEL: Logging verbosity (default: info)

Troubleshooting

If you encounter issues, verify the MCP server is running and accessible on the configured port, ensure your Sketch API key is correct for cloud access, confirm the Sketch file is valid and uncorrupted, and check your firewall to allow WebSocket connections.

Enable detailed logging to diagnose problems by setting a debug flag in your environment when starting the server.

Tools and capabilities

The server provides several MCP tools to interact with Sketch files through your MCP client. You can retrieve file contents, list components, inspect selections, and create new design elements.

Notes

This MCP server project is in development and may be unstable. Always ensure you are using compatible versions of Sketch and your MCP client, and test workflows in a safe environment before integrating into production.

Available tools

get_file

Retrieve contents of a Sketch file or a specific node within it

list_components

List all components or symbols present in a Sketch file

get_selection

Obtain information about the currently selected elements in the Sketch document

create_rectangle

Create a new rectangle element with specified dimensions and styling

create_text

Create a new text element with specified content and styling