🖼️ Frame0 MCP Server

Create and modify wireframes for modern apps using natural language

View on GitHub Quick Start →

Example Prompts

Try these prompts with Claude after setting up Frame0 MCP Server:

"Create a login screen for Phone in Frame0"

"Create an 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"

"Set a link from the google login button to the Google website"

⚡ Quick Install with Claude Code MCP Guide

Connect Claude Code to any remote MCP server with one simple command. Choose between direct HTTP connections or a universal bridge - all configured automatically with our setup wizard.

Get the Claude Code MCP Setup Guide →

🔌 Test MCP Server Connection

Test your connection to the MCP wrapper server using your x-api-key. This validates that your MCP server credentials are configured correctly.

MCP Server API Key (x-api-key)

🚀 Test Full Frame0 Connection

Test both your MCP server connection AND your Frame0 platform credentials. This ensures your complete setup is working correctly.

MCP Server API Key (x-api-key)

Frame0 API Token

📡 API Endpoint & Required Headers

POST https://frame0.mcp.majewscy.tech

Required HTTP Headers:

Content-Type: application/json

x-api-key: Your MCP server API key

🛠️ Available Tools

launch_browser

Launch browser instances

navigate

Navigate to URLs

interact

Click, type, and interact

screenshot

Capture screenshots

run_tests

Execute test suites

record_video

Record test videos

⚠️ Common Errors & Solutions

Browser Launch Failed

Cannot start browser

Solution: Check browser installation

Element Not Found

Selector not found

Solution: Verify element selector

Timeout

Operation timed out

Solution: Increase timeout or check page load

Navigation Failed

Cannot navigate to URL

Solution: Check URL and network

🏥 Service Health Check

Checking...

Response Time

Server Status

Protocol Version

2024-11-05

Last Checked

Configuration

// Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS)
// Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "frame0": {
      "command": "npx",
      "args": [
        "-y",
        "@frame0/mcp-server@latest"
      ],
      "env": {
        
      }
    }
  }
}

// HTTP Wrapper Configuration (for remote access)
{
  "frame0": {
    "type": "http",
    "url": "https://frame0.mcp.majewscy.tech",
    "headers": {
      "x-api-key": "YOUR_API_KEY"
    }
  }
}

// Claude Code: .mcp.json in your project root
{
  "frame0": {
    "command": "npx",
    "args": [
      "-y",
      "@frame0/mcp-server@latest"
    ],
    "env": {
      
    }
  }
}

Features

Professional wireframing capabilities for AI assistants

🖼️

Frame Creation

Create frames for Phone, Tablet, Desktop, Browser, Watch, and TV.

🔷

Shape Tools

Create rectangles, ellipses, lines, polygons, and text elements.

🎨

Styling & Icons

Search and add icons, images, and customize colors.

📄

Page Management

Add, duplicate, delete pages and export as images.

⚡

Parallel Execution

Run tests in parallel across browsers.

🔐

Auth Handling

Handle complex authentication flows.

📋 MCP Server Updates Changelog

Loading... Checking for updates...

Fetching latest changes...