Frame0
Allows creating and modifying wireframes in Frame0 (a Balsamiq-alternative wireframe tool) by using natural language prompts, supporting operations like creating screens, editing elements, and managing pages.
What is Frame0?
Frame0 is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to allows creating and modifying wireframes in frame0 (a balsamiq-alternative wireframe tool) by using natural language prompts, supporting operations like creating screens, editing elements, and managin...
Allows creating and modifying wireframes in Frame0 (a Balsamiq-alternative wireframe tool) by using natural language prompts, supporting operations like creating screens, editing elements, and managing pages.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Allows creating and modifying wireframes in Frame0 (a Balsam
Use Cases
Maintainer
Works with
Installation
NPM
npx -y frame0-mcp-serverManual Installation
npx -y frame0-mcp-serverConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Frame0
The Frame0 MCP server connects AI assistants to Frame0, a Balsamiq-alternative wireframing tool, enabling creation and modification of wireframes through natural language. It exposes 23 tools spanning shape creation (frames, rectangles, ellipses, text, icons, connectors), shape manipulation (move, align, group, export), and page management — so designers and developers can generate full UI wireframes simply by describing what they want to build.
Prerequisites
- Node.js v22 or higher with npx available
- Frame0 v1.7.0 or later installed (frame0.app)
- The Frame0 API Server enabled in Frame0 Settings (this exposes the local API the MCP server connects to)
- An MCP-compatible client such as Claude Desktop
Install Frame0 and enable its API Server
Download and install Frame0 (v1.7.0+) from frame0.app. Once installed, open Frame0, go to Settings, and enable the API Server option. By default it runs on port 3000; note the port if you change it.
Add the Frame0 MCP server to your client configuration
Open claude_desktop_config.json and add the frame0-mcp-server entry. No API keys are required — the server connects to the locally running Frame0 API.
{
"mcpServers": {
"frame0-mcp-server": {
"command": "npx",
"args": ["-y", "frame0-mcp-server"]
}
}
}Use a custom port (optional)
If you configured Frame0's API Server to use a non-default port, pass the --api-port flag to the npx command.
{
"mcpServers": {
"frame0-mcp-server": {
"command": "npx",
"args": ["-y", "frame0-mcp-server", "--api-port=8080"]
}
}
}Restart Claude Desktop with Frame0 running
Make sure Frame0 is open and the API Server is active before restarting your MCP client. The MCP server connects to Frame0's local API on startup.
Create your first wireframe via natural language
Ask your AI assistant to create a screen in Frame0. It will use tools like create_frame, create_rectangle, create_text, and create_icon to build the wireframe.
Frame0 Examples
Client configuration
Complete claude_desktop_config.json for frame0-mcp-server. Frame0 must be running with API Server enabled before the MCP client connects.
{
"mcpServers": {
"frame0-mcp-server": {
"command": "npx",
"args": ["-y", "frame0-mcp-server"]
}
}
}Prompts to try
Natural language prompts that use the 23 Frame0 tools for wireframe creation and editing.
- "Create a login screen for mobile with username, password fields, and a login button"
- "Add a navigation bar at the top of the current page with Home, Profile, and Settings links"
- "Change the color of the Login button to blue and make it wider"
- "Group all the form elements on the page"
- "Export the current page as a PNG image"
- "Add a new page called 'Dashboard' and create a sidebar layout"Troubleshooting Frame0
Connection refused — MCP server cannot reach Frame0 API
Ensure Frame0 is running and the API Server is enabled in Frame0 Settings. The default port is 3000. If Frame0 is not open, the MCP server has nothing to connect to. Restart Frame0 first, then restart your MCP client.
frame0-mcp-server not found via npx
Ensure Node.js v22+ is installed ('node --version'). Run 'npx -y frame0-mcp-server --version' in a terminal to test package resolution. If it fails, check your npm registry access and network settings.
Frame0 version is too old and tools fail
The MCP server requires Frame0 v1.7.0 or later. Check your Frame0 version in the app's About dialog and update to the latest release from frame0.app if needed.
Frequently Asked Questions about Frame0
What is Frame0?
Frame0 is a Model Context Protocol (MCP) server that allows creating and modifying wireframes in frame0 (a balsamiq-alternative wireframe tool) by using natural language prompts, supporting operations like creating screens, editing elements, and managing pages. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Frame0?
Install via npm with the command: npx -y frame0-mcp-server. 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 Frame0?
Frame0 works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Frame0 free to use?
Yes, Frame0 is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
Frame0 Alternatives — Similar Developer Tools Servers
Looking for alternatives to Frame0? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Frame0 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 Frame0?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.