Frame0

Frame0 MCP Server lets you create and modify Frame0 wireframes by prompting. It enables you to drive wireframe design from prompts, making rapid iterations and automation possible for Frame0 projects.

How to use

You interact with the Frame0 MCP Server through an MCP client. Start the server, then connect your client and send prompts that describe the UI you want to generate or update. Typical prompts include creating screens, shapes, icons, text, or links, and changing properties like colors or navigation. The server exposes a set of tools to perform the requested actions on the current Frame0 project or page, such as adding pages, creating shapes, updating text, or setting links. You can use the prompts to build up complex wireframes step by step, and you can apply changes across pages to keep your design consistent.

How to install

Prerequisites you need before starting:

• Node.js v22 or higher
• A runtime environment for your MCP client that can reach the Frame0 MCP Server

Option A: Run via npx (recommended for quick starts) you can start Frame0 MCP Server through your MCP client configuration using npx. Use the following command to run the MCP server with the standard package name.

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

Option B: Build and run from source if you want to run the local build directly. This path requires you to build the server and then start the built index.js.

# Step 1: Install dependencies
npm install

# Step 2: Build the server
npm run build

# Step 3: Run the built server via Node (adjust the path to your environment)
node <full-path-to>/frame0-mcp-server/build/index.js

Available tools

create_frame

Add a new frame element representing a container or frame on the current page, allowing you to define size, position, and basic properties.

create_rectangle

Create a rectangular shape with configurable width, height, fill color, stroke, and corner radius for layout blocks or UI components.

create_ellipse

Add an ellipse shape for icons, decorative elements, or indicators with adjustable radii, stroke, and fill.

create_text

Insert a text element with content, font, size, color, alignment, and line wrapping to label UI components or provide instructions.

create_line

Draw a straight line between two points to indicate dividers, separators, or connections.

create_polygon

Create a polygon shape by defining multiple corner points, useful for custom icons or complex shapes.

create_connector

Link two shapes with a connector line, supporting routing and endpoint attachment.

create_icon

Add an icon from an available set or library, with sizing and color options.

create_image

Insert an image asset into the canvas, with cropping and scaling controls.

update_shape

Modify properties of an existing shape, including size, position, color, and text content.

duplicate_shape

Copy a selected shape or group to create duplicates with optional offsets.

delete_shape

Remove a selected shape from the current page.

search_icons

Query an icon library to find icons matching keywords for quick replacement or enhancement.

move_shape

Translate a shape to a new position on the canvas.

align_shapes

Align multiple shapes to a common edge or distribution for tidy layouts.

group

Group multiple shapes together to treat them as a single unit for collective transformations.

ungroup

Break apart a grouped set back into individual shapes.

set_link

Assign a hyperlink to an element so users can navigate to a target URL.

export_shape_as_image

Export the current shape or selection as an image file for assets or sharing.

add_page

Create a new page in the Frame0 project to organize screens and flows.

update_page

Modify metadata or content of an existing page.

duplicate_page

Create a copy of an existing page to iterate on variants.

delete_page

Remove a page from the project.

get_current_page_id

Retrieve the identifier of the page currently active in the editor.

set_current_page_by_id

Switch the active editor to a page by its unique identifier.

get_page

Fetch details of a specific page by ID.

get_all_pages

List all pages within the current project to navigate between screens.

export_page_as_image

Export an entire page as an image for review or sharing.