OpenPencil
The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
What is OpenPencil?
OpenPencil is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to world's first open-source ai-native vector design tool and the first to feature concurrent agent teams. design-as-code. turn prompts into ui directly on the live canvas. a modern alternative to pencil...
The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
This server falls under the Business Applications category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- The world's first open-source AI-native vector design tool a
Use Cases
Maintainer
Works with
Installation
NPM
npx -y @zseven-w/pen-mcpManual Installation
npx -y @zseven-w/pen-mcpConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use OpenPencil
OpenPencil is an open-source AI-native vector design tool that exposes its canvas as an MCP server through the @zseven-w/pen-mcp package, allowing AI coding agents to create, read, and modify .op design files programmatically. The server provides tools for multi-phase design workflows (skeleton, content, refinement), style guide application (glassmorphism, brutalist, retro), multi-page management, and direct canvas manipulation — making it possible to turn natural language prompts into vector UI designs inside the OpenPencil canvas. It integrates with Claude Code, Codex, Gemini, Kiro, and other MCP-compatible agents.
Prerequisites
- Node.js 18+ for running the pen-mcp server via npx
- OpenPencil desktop application installed from the project repository releases
- An MCP-compatible client such as Claude Desktop or Claude Code CLI
- A running OpenPencil instance with an open .op project file for the MCP server to connect to
Install OpenPencil
Download and install the OpenPencil application from the project's GitHub releases page. OpenPencil must be running for the MCP server to have a canvas to manipulate.
# Visit https://github.com/ZSeven-W/openpencil/releases
# Download the installer for your OS and run itAdd the pen-mcp server to Claude Desktop
Edit your claude_desktop_config.json to add the @zseven-w/pen-mcp server. This package is the MCP bridge between your AI client and the OpenPencil canvas.
{
"mcpServers": {
"openpencil": {
"command": "npx",
"args": ["-y", "@zseven-w/pen-mcp"]
}
}
}Restart Claude Desktop
Fully quit and reopen Claude Desktop so it connects to the pen-mcp server. Verify that OpenPencil tools appear in the tool list.
Open a project file in OpenPencil
Create a new .op project or open an existing one in the OpenPencil application. The MCP server connects to the active project.
Begin designing via prompts
Use Claude to drive the design workflow — start with a skeleton, populate content, then refine and apply a style guide. The MCP tools write changes directly to the .op file.
OpenPencil Examples
Client configuration
Full claude_desktop_config.json entry for the OpenPencil MCP server using the @zseven-w/pen-mcp package.
{
"mcpServers": {
"openpencil": {
"command": "npx",
"args": ["-y", "@zseven-w/pen-mcp"]
}
}
}Prompts to try
These prompts drive the OpenPencil design tools exposed via the MCP server.
- "Create a landing page skeleton with a hero section, feature grid, and footer"
- "Populate the hero section with a headline, subtitle, and CTA button"
- "Apply the glassmorphism style guide to the entire design"
- "Add a new page called 'Pricing' and create a three-column pricing table"
- "Refine the color palette to use a dark navy background with amber accents"Troubleshooting OpenPencil
The MCP tools appear but changes are not reflected in the OpenPencil canvas
Ensure OpenPencil is running and a project file is open before invoking any MCP tools. The pen-mcp server needs an active OpenPencil instance to write to.
npx -y @zseven-w/pen-mcp fails with a 404 or authentication error
The package must be published to npm. Check npmjs.com/package/@zseven-w/pen-mcp to confirm availability. If unavailable, clone https://github.com/ZSeven-W/openpencil and follow the local development instructions for the MCP server subdirectory.
Node.js is not detected and the server falls back to HTTP transport
This is expected behavior — the server auto-detects Node.js and falls back gracefully. The HTTP transport on localhost should work equivalently. Confirm the port it is listening on from the server startup logs.
Frequently Asked Questions about OpenPencil
What is OpenPencil?
OpenPencil is a Model Context Protocol (MCP) server that world's first open-source ai-native vector design tool and the first to feature concurrent agent teams. design-as-code. turn prompts into ui directly on the live canvas. a modern alternative to pencil. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install OpenPencil?
Install via npm with the command: npx -y @zseven-w/pen-mcp. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with OpenPencil?
OpenPencil works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is OpenPencil free to use?
Yes, OpenPencil is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
OpenPencil Alternatives — Similar Business Applications Servers
Looking for alternatives to OpenPencil? Here are other popular business applications servers you can use with Claude, Cursor, and VS Code.
n8n
★ 189.1kA comprehensive MCP server that provides full control over n8n automation workflows through natural language. It offers 43 tools for managing workflows, executions, credentials, and data tables, with safety features like write-mode protection and dou
LobeHub
★ 77.5k🤯 LobeHub is your Chief Agent Operator, organizing your agents into 7×24 operations by hiring, scheduling, and reporting on your entire AI team.
Jeecgboot
★ 46.4kAI 低代码平台，「低代码 + 零代码」双模式驱动：低代码一键生成前后端代码，零代码 5 分钟搭建系统，AI Skills 一句话画流程、设计表单、生成整套系统。内置 AI聊天、知识库、流程编排、MCP插件等，兼容主流大模型。引领「AI 生成 → 在线配置 → 代码生成 → 手工合并->AI修改」开发模式，消除 Java 项目 80% 的重复工作，提效而不失灵活。
CowAgent
★ 44.7kCowAgent (chatgpt-on-wechat) 是基于大模型的超级AI助理，能主动思考和任务规划、访问操作系统和外部资源、创造和执行Skills、通过长期记忆和知识库不断成长，比OpenClaw更轻量和便捷。同时支持微信、飞书、钉钉、企微、QQ、公众号、网页等接入，可选择DeepSeek/OpenAI/Claude/Gemini/ MiniMax/Qwen/GLM/LinkAI，能处理文本、语音、图片和文件，可快速搭建个人AI助理和企业数字员工。
Minds Platform
★ 39.2kPlatform dedicated to building an open foundation for applied Artificial Intelligence, designed for people seeking production-ready AI systems they can truly control, extend and deploy anywhere.
Astrbot
★ 32.8kAI Agent Assistant & development framework that integrates lots of IM platforms, LLMs, plugins and AI feature, and can be your openclaw alternative. ✨
Browse More Business Applications MCP Servers
Explore all business applications servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up OpenPencil in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use OpenPencil?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.