How to configure the Pen.Dev MCP Server for Claude Code, Cursor, Codex, Pi, and OpenCode

In this article I will explain how you can configure the Pen.Dev (formerly Pencil Dev) Model Context Protocol server across your favorite AI coding assistants, bridging the gap between visual design and code by allowing your agent to directly read, generate, and validate your UI designs without leaving your development environment.

How to call it

You can run the Pen.Dev server dynamically via the command line or configure it persistently in your AI assistant’s settings files.

For CLI-based assistants like Claude Code and OpenCode, you can attach the Node package directly from your terminal:

npx -y @pen.dev/mcp-server

Or, if you are on a Mac with the desktop app installed, you can point directly to the native binary for better performance:

/Applications/Pen.app/Contents/Resources/app.asar.unpacked/out/mcp-server-darwin-arm64 --app desktop

For file-based configurations, tools like Cursor, Pi, and Codex require a structured entry. Depending on your OS and the specific tool, you will use one of the three formats below.

1. Node via JSON

If you are on Windows, Linux, or prefer not to install the desktop app, you should use the universal Node package.

Tools like Cursor (in ~/.cursor/mcp.json), Pi (in ~/.pi/agent/mcp.json), and OpenCode (in ~/.opencode/config.json) expect this standard JSON structure. Copy and paste this block into their respective mcpServers objects:

{
  "pencil": {
    "command": "npx",
    "args": ["-y", "@pen.dev/mcp-server"]
  }
}

2. Native Binary via JSON

If you are on a Mac and have the Pen.Dev desktop app installed, bypassing Node entirely is much faster and more reliable. This avoids network resolution and runtime overhead.

Use this JSON structure for Cursor, Pi, and OpenCode to point directly to the bundled macOS binary:

{
  "pencil": {
    "transport": "stdio",
    "command": "/Applications/Pen.app/Contents/Resources/app.asar.unpacked/out/mcp-server-darwin-arm64",
    "args": ["--app", "desktop"],
    "env": {}
  }
}

After updating the file, restart your AI assistant (or run /reload in Pi) to initialize the connection.

3. TOML Configuration

Codex handles global MCP servers through its primary configuration file in TOML format instead of JSON. This grants the agent access to your .pen files across any trusted project.

Open your ~/.codex/config.toml file and append the Pen.Dev server configuration. Notice that for Codex, you can also pass an additional agent flag specific to their CLI environment:

[mcp_servers.pencil]
command = "/Applications/Pen.app/Contents/Resources/app.asar.unpacked/out/mcp-server-darwin-arm64"
args = ["--app", "desktop", "--agent", "codexCLI"]

If you prefer the Node package approach for Codex, the TOML block looks like this:

[mcp_servers.pencil]
command = "npx"
args = ["-y", "@pen.dev/mcp-server"]

Codex will parse this file the next time you start a session.

Conclusion

Once the server is configured, your coding assistant has direct access to your design tokens, layouts, and constraints. This removes the friction of manually copying CSS values or exporting assets. You will still open the design application to visually verify that the generated frontend components match your intended design, but the heavy lifting of translating visual specs into code now happens directly within your editor.

Where to go next

• DeepSeek as default model on ChatGPT Codex Learn how to set up DeepSeek as your default model in Codex to move to usage-based billing.