https://github.com/niklauslee/frame0-mcp-server
https://github.com/niklauslee/frame0-mcp-server
Last synced: 8 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/niklauslee/frame0-mcp-server
- Owner: niklauslee
- License: mit
- Created: 2025-04-03T03:15:02.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-06-03T03:24:30.000Z (17 days ago)
- Last Synced: 2025-06-03T16:10:40.618Z (17 days ago)
- Language: JavaScript
- Size: 470 KB
- Stars: 22
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- mcp-index - Frame0 MCP Server - Create and modify wireframes for modern applications using prompts. Integration with AI services like Claude Desktop and Cursor enhances the wireframing process. (Content Creation)
README
[](https://frame0.app/videos/frame0-mcp-example.mp4)
# Frame0 MCP Server
[Frame0](https://frame0.app/) 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](https://frame0.app/) `v1.0.0-beta.17` or higher.
- [Node.js](https://nodejs.org/) `v22` or higher.
Setup for Claude Desktop in `claude_desktop_config.json` as below:
```json
{
"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_connector`
- `create_icon`
- `create_image`
- `update_shape`
- `duplicate_shape`
- `delete_shape`
- `get_available_icons` (supports optional `search` parameter to filter icons by name or tag)
- `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.
```json
{
"mcpServers": {
"frame0-mcp-server": {
"command": "node",
"args": ["/frame0-mcp-server/build/index.js"]
}
}
}
```