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=<port> optional parameter to use another port number for Frame0's API server.

Related MCP server: Balsamiq Wireframes MCP 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": ["<full-path-to>/frame0-mcp-server/build/index.js"]
    }
  }
}