frame0

Frame0 MCP Server enables frame-based wireframing actions inside Frame0 by exposing a set of scripted prompts and tooling. You can prompt Frame0 to create and modify screens, pages, and UI elements by invoking the provided Tools (such as create_frame, create_rectangle, update_shape, set_link, export_shape_as_image, and more). The server integrates with Claude Desktop to run commands via MCP and issue actions directly to Frame0, making it possible to generate login screens, home screens, or entire app flows with natural-language prompts. The Tools cover drawing primitives, manipulating shapes, organizing pages, and exporting assets, so you can rapidly prototype interfaces by describing your desired UI and letting the MCP translate that into Frame0 actions. If you want to adjust behavior or port the server to a different environment, you can rely on the CLI flags and the documented API port parameter to tailor how the Frame0 API server is addressed.

Prerequisites:\n- Frame0 installed and running (Frame0 v1.0.0-beta.17 or higher).\n- Node.js v22 or higher.\n\n1) Clone the repository:\n git clone https://github.com/niklauslee/frame0-mcp-server.git\n2) Install dependencies and build the server:\n npm install\n npm run build\n3) Configure Claude Desktop to point to the MCP server:\n Open claude_desktop_config.json and add the following entry (or update an existing one):\n\n {\n "mcpServers": {\n "frame0-mcp-server": {\n "command": "node",\n "args": ["<full-path-to>/frame0-mcp-server/build/index.js"]\n }\n }\n }\n\n4) Optional: you can run Frame0 with a custom API port using the --api-port parameter when starting Frame0 or the MCP server if applicable.\n5) Start the MCP server via the configured command in Claude Desktop or directly using the command in step 3.\n\nNote: If you prefer running via npx (as shipped in this repo), ensure your environment can resolve frame0-mcp-server from npm.

Tips:\n- The API port for Frame0’s server is configurable with --api-port. Use a non-default port if you have other services running.\n- The MCP supports a variety of shape and page operations; use prompts like 'Create a login screen for Phone in Frame0' to trigger create_* tools.\n- If commands fail, verify Node.js is correctly installed and that npm dependencies are installed. Ensure Frame0 v1.0.0-beta.17+ is running to support MCP actions.\n- The npm package name (for this server) is frame0-mcp-server. If you’re packaging or deploying in a container, you can reference this package as the server source.\n- The dev setup shows how to point Claude Desktop to the built index.js; adjust paths as needed when building in different environments.