Frame0 Mcp Server
What is Frame0 Mcp Server
frame0-mcp-server is a server component designed to work with Frame0, enabling various drawing and shape manipulation functionalities for applications like Claude Desktop.
Use cases
Use cases include creating diagrams, designing user interfaces, generating visual content for presentations, and facilitating interactive learning experiences.
How to use
To use frame0-mcp-server, set it up in the ‘claude_desktop_config.json’ file by specifying the command and arguments. You can also customize the API port using the optional ‘–api-port=
Key features
Key features include tools for creating and manipulating shapes (like rectangles, ellipses, and text), exporting shapes as images, managing pages, and aligning or grouping shapes.
Where to use
frame0-mcp-server can be used in graphic design applications, educational tools, and any software requiring dynamic shape manipulation and drawing capabilities.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is Frame0 Mcp Server
frame0-mcp-server is a server component designed to work with Frame0, enabling various drawing and shape manipulation functionalities for applications like Claude Desktop.
Use cases
Use cases include creating diagrams, designing user interfaces, generating visual content for presentations, and facilitating interactive learning experiences.
How to use
To use frame0-mcp-server, set it up in the ‘claude_desktop_config.json’ file by specifying the command and arguments. You can also customize the API port using the optional ‘–api-port=
Key features
Key features include tools for creating and manipulating shapes (like rectangles, ellipses, and text), exporting shapes as images, managing pages, and aligning or grouping shapes.
Where to use
frame0-mcp-server can be used in graphic design applications, educational tools, and any software requiring dynamic shape manipulation and drawing capabilities.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
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:
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.
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_framecreate_rectanglecreate_ellipsecreate_textcreate_linecreate_polygoncreate_connectorcreate_iconcreate_imageupdate_shapeduplicate_shapedelete_shapesearch_iconsmove_shapealign_shapesgroupungroupset_linkexport_shape_as_imageadd_pageupdate_pageduplicate_pagedelete_pageget_current_page_idset_current_page_by_idget_pageget_all_pagesexport_page_as_image
Dev
- Clone this repository.
- Build with
npm run build. - Update
claude_desktop_config.jsonin Claude Desktop as below. - Restart Claude Desktop.
{
"mcpServers": {
"frame0-mcp-server": {
"command": "node",
"args": [
"<full-path-to>/frame0-mcp-server/build/index.js"
]
}
}
}Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
