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.

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_polygon
• create_connector
• create_icon
• create_image
• update_shape
• duplicate_shape
• delete_shape
• search_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"]
    }
  }
}

Setup

Prerequisite:

• Frame0 v1.7.0 or higher. (Ensure that Run on start option is enabled in Settings > API Server).
• 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.