Frame0 MCP Server

by niklauslee

84 stars

186 downloads

Not rated

GitHub

Description

[![smithery badge](https://smithery.ai/badge/@niklauslee/frame0-mcp-server)](https://smithery.ai/server/@niklauslee/frame0-mcp-server) [![Frame0 MCP Video Example](https://github.com/niklauslee/frame0-mcp-server/raw/main/thumbnail.png)](https://frame0.app/videos/frame0-mcp-exampl…

About

Details

Author: niklauslee
GitHub stars: 84
Downloads: 186
Categories: Developer Tools, Other

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Frame0 MCP Server

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

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

JSON

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

JSON

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

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

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

JSON

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

JSON

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

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

From the repository

Ensure Frame0 v1.7.0 or higher is running with the API Server enabled (Settings > API Server > Run on start). Install via npx -y frame0-mcp-server in your MCP client configuration (e.g., Claude Desktop's claude_desktop_config.json). Optionally, pass --api-port=<port> to use a different port for Frame0's API server.

`create_frame`

Create a frame shape in Frame0. Must add a new page before you create a new frame.

`create_rectangle`

Create a rectangle shape in Frame0.

`create_ellipse`

Create an ellipse shape in Frame0.

`create_text`

Create a text shape in Frame0.

`create_line`

Create a line shape in Frame0.

`create_polygon`

Create a polygon or polyline shape in Frame0.

`create_connector`

Create a connector shape in Frame0.

`create_icon`

Create an icon shape in Frame0.

`create_image`

Create an image shape in Frame0.

`update_shape`

Update properties of a shape in Frame0.

`duplicate_shape`

Duplicate a shape in Frame0.

`delete_shape`

Delete a shape in Frame0.

`search_icons`

Search icon shapes available in Frame0.

`move_shape`

Move a shape in Frame0.

`align_shapes`

Align shapes in Frame0.

`group`

Group shapes in Frame0.

`ungroup`

Ungroup a group in Frame0.

`set_link`

Set a link from a shape to a URL or a page in Frame0.

`export_shape_as_image`

Export shape as image in Frame0.

`add_page`

Add a new page in Frame0. The added page becomes the current page.

`update_page`

Update a page in Frame0.

`duplicate_page`

Duplicate a page in Frame0.

`delete_page`

Delete a page in Frame0.

`get_current_page_id`

Get ID of the current page in Frame0.

`set_current_page_by_id`

Set current page by ID in Frame0.

`get_page`

Get page data in Frame0.

`get_all_pages`

Get all pages data in Frame0.

`export_page_as_image`

Export page as image in Frame0.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

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

McpServers

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

Create and modify wireframes in the Frame0 app through natural language prompts.

Frame0is a Balsamiq-alternative wireframe tool for modern apps.Frame0 MCP Serverallows you for creating and modifying wireframes in Frame0 by prompting.

- Frame0v1.7.0or higher. (Ensure thatRun on startoption is enabled inSettings>API Server).
- Node.jsv22or higher.

Setup for Claude Desktop inclaude_desktop_config.jsonas 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.

- “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”

- 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
- Clone this repository.
- Build withnpm run build.
- Updateclaude_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"] } } }

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Create crafted UI components inspired by the best 21st.dev design engineers.

Bring agent evaluations, observability, and synthetic test set generation directly into your IDE for free with Galileo's new MCP server

An MCP server to help AI assistants to answer questions and generate AccelByte Extend SDK code more effectively .

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

ALAPI MCP Tools,Call hundreds of API interfaces via MCP

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.

APIMatic MCP Server is used to validate OpenAPI specifications using APIMatic. The server processes OpenAPI files and returns validation summaries by leveraging APIMatic’s API.

One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.

Build and deploy full-stack Next.js apps with 98 tools for React, AWS, and MongoDB

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

Description

About

Details

Jump to

Setting up with Highlight

From the repository

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

Claude Desktop / Cursor

McpServers

Install

More like this

Sequential Thinking

Sentry

Github

Filesystem

EverArt

Google Drive

`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`