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.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=` 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_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": ["/frame0-mcp-server/build/index.js"]
    }
  }
}