Frame0 MCP Server
About
Frame0 MCP Server is a tool that lets you create and modify wireframes in Frame0, a Balsamiq-alternative wireframe tool, by using natural language prompts. It is built for users who want to design app screens without manual drawing, leveraging AI agents like Claude.
Details
- Author
- MCP-Mirror
- Downloads
- 181
- Categories
- Other
Jump to
- Create and modify wireframes through natural language prompts
- 27 tools for shapes, icons, pages, and exporting
- Supports frames, rectangles, ellipses, text, lines, connectors, icons, and images
- Update, duplicate, delete, move, align, group, and ungroup shapes
- Set links and export pages or shapes as images
- Manage multiple pages with add, update, duplicate, and delete operations
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Frame0 MCP ServerCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Install Node.js v22 or higher and Frame0 v1.0.0-beta.17 or higher, then configure the server in Claude Desktop by adding the frame0-mcp-server entry to claude_desktop_config.json with npx -y frame0-mcp-server as the command. An optional --api-port=<port> parameter lets you change the API port used by Frame0.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"frame0 mcp server": {
"frame0-mcp-server": {
"command": "npx",
"args": [
"-y",
"frame0-mcp-server"
]
}
}
}
}McpServers
{
"frame0-mcp-server": {
"command": "npx",
"args": [
"-y",
"frame0-mcp-server"
]
}
}Frame0 MCP Server
Frame0 is a Balsamiq-alternative wireframe tool for modern apps. Frame0 MCP Server allows you for creating and modifying wireframes in Frame0 by prompting.
Setup
Prerequisite:
- Frame0 v1.0.0-beta.17 or higher.
- Node.js v22 or higher.
Setup for Claude Desktop in claude_desktop_config.json as below:
{
"mcpServers": {
"frame0-mcp-server": {
"command": "npx",
"args": ["-y", "frame0-mcp-server"]
}
}
}
You can use --api-port=<port> optional parameter to use another port number for Frame0's API server.
Example Prompts
- _“Create a login screen for Phone in Frame0”_
- _“Create a Instagram home screen for Phone in Frame0”_
- _“Create a Netflix home screen for TV in Frame0”_
- _“Change the color of the Login button”_
- _“Remove the Twitter social login”_
- _“Replace the emojis by icons”_
- _“Set a link from the google login button to the Google website”_
Tools
- create_frame
- create_rectangle
- create_ellipse
- create_text
- create_line
- create_connector
- create_icon
- create_image
- update_shape
- duplicate_shape
- delete_shape
- get_available_icons
- move_shape
- align_shapes
- group
- ungroup
- set_link
- export_shape_as_image
- add_page
- update_page
- duplicate_page
- delete_page
- get_current_page_id
- set_current_page_by_id
- get_page
- get_all_pages
- export_page_as_image
Dev
1. Clone this repository.
2. Build with npm run build.
3. Update claude_desktop_config.json in Claude Desktop as below.
4. Restart Claude Desktop.
{
"mcpServers": {
"frame0-mcp-server": {
"command": "node",
"args": ["<full-path-to>/frame0-mcp-server/build/index.js"]
}
}
}
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
