pen.dev MCP
Use pen.dev’s built-in pencil MCP server to let AI assistants read and edit .pen designs.
pen.dev is a design tool for working on an infinite canvas and turning ideas into implementation-friendly output. It is available as a desktop app, a VS Code / Cursor extension, and a CLI. When the app or extension is running with a .pen document open, external assistants can connect to its local MCP server. The server identifier is still pencil.
Authoritative product and AI docs: pen.dev, AI integration, and Installation.
How pen.dev MCP fits the workshop mental model
| What you install | pen.dev as a VS Code / Cursor extension, desktop app, or CLI. For normal visual use, you do not install a separate MCP npm server. |
| When tools appear | Open a .pen document, enable the client under Settings (⚙️) → MCP, then start or reload the external client. |
| What the model can do | Use MCP tools to work with the open design (layers, components, variables), see Tool overview below. |
The external MCP client connects to the running desktop app or IDE extension. You still control which client connects and review changes on the canvas. This does not imply that model context or provider traffic stays on your machine; that depends on the external client and model provider you configure.
Install pen.dev
Get pen.dev from pen.dev and choose your surface:
- Cursor or VS Code: open Extensions, search for pen.dev, install it, then create or open a
.penfile. - Desktop: download the package for macOS, Windows, or Linux.
- CLI: with Node.js 22.19 or later, run
npm install -g @pen.dev/cli, then verify withpen version.
Open the .pen document the agent should edit.
In pen.dev, open Settings (⚙️) → MCP and enable the external client you use.
Connect the assistant (Claude Code, Cursor, others)
Keep pen.dev running with the intended .pen document open.
Start or reload Claude Code, Cursor, Codex, or another supported client after enabling it in pen.dev.
Confirm pencil appears in the client’s MCP server list. In Claude Code, use /mcp; in Cursor, open Settings → Tools & MCP.
If pencil does not show up, confirm pen.dev is running, a .pen document is open, and the client is enabled under Settings → MCP, then reload the client.
Current MCP tools
The public server currently registers:
| Tool | Availability |
|---|---|
get_style | Standard |
read_skill | Standard |
get_app_state | Standard |
execute | Standard |
browser | When the MCP server targets the desktop app |
spawn_agents | Only when the server starts with -enable_spawn_agents |
Inspect the live tool list for your installed version. Older batch_design, batch_get, get_editor_state, and get_variables examples no longer describe the public September 2026 tool surface.
Example prompts
Use natural language and name the intended .pen file when more than one document may be open:
Create a login form with email, password, and a primary CTA. Use a clear vertical stack and 16px padding.Read the current frame selection and list the top-level component names, then make all primary buttons use the same color variable.Add a three-column feature row below the hero, equal width, with a short title and one line of body text per column.Workshop checklist
Install pen.dev (extension, desktop app, or CLI).
Open the .pen document you want to use.
Enable your external client in pen.dev’s MCP settings, reload the client, and confirm MCP lists pencil.
Run one creation prompt and one edit prompt; verify on the canvas.
If something fails, follow AI integration troubleshooting.