Frame0 MCP Server

🚀 Frame0 MCP Server

Frame0 is a modern alternative to application wireframing tools like Balsamiq. The Frame0 MCP Server allows you to create and modify wireframes in Frame0 through prompts.

🚀 Quick Start

Prerequisites

• Frame0 v1.0.0-beta.17 or higher.
• Node.js v22 or higher.

Configure the following in claude_desktop_config.json of Claude Desktop:

{
  "mcpServers": {
    "frame0-mcp-server": {
      "command": "npx",
      "args": ["-y", "frame0-mcp-server"]
    }
  }
}

You can use the optional parameter --api-port=<port> to specify a different port number for the Frame0 API server.

💻 Usage Examples

Example Prompts

• “Create a login screen for mobile phones”
• “Create an Instagram home screen for mobile phones”
• “Create a Netflix home screen for TVs”
• “Change the color of the login button”
• “Remove Twitter social login”
• “Replace emojis with 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

🛠️ Development

1. Clone this repository.
2. Build using npm run build.
3. Update the claude_desktop_config.json file of Claude Desktop as follows:
4. Restart Claude Desktop.

{
  "mcpServers": {
    "frame0-mcp-server": {
      "command": "node",
      "args": ["<full path>/frame0-mcp-server/build/index.js"]
    }
  }
}