From Wireframe to Code

Connect Claude Code, Cursor, and other AI coding tools to your Waiframe wireframes via the MCP server. Your AI builds exactly what you designed.

What is MCP?

The Model Context Protocol (MCP) is an open standard that lets AI coding tools access external context. The Waiframe MCP server gives tools like Claude Code and Cursor direct access to your wireframe designs — screen layouts, component structure, navigation flows, and design context.

Instead of describing your UI in a prompt, your AI tool reads the wireframe directly and generates code that matches your design.

How It Works

AI Coding Tool

Claude Code, Cursor

← stdio →

↑ ↓

@waiframe/mcp-server

runs locally via npx

← HTTPS →

↑ ↓

waiframe.com API

your wireframe data

The MCP server runs locally on your machine. It fetches your wireframe data via the Waiframe API, transforms it into a clean semantic format — just component types, props, and navigation — and passes it as structured context to your AI tool.

Quick Start

Get an API Key

Generate an API key from your Waiframe settings. The key is shown only once, so copy it immediately. Don't have an account yet? Sign up free first.

Go to API Keys

Configure Your Tool

Set the API key as an environment variable:

export WAIFRAME_API_KEY=wf_sk_your_key_here

Claude Code

claude mcp add waiframe -- npx -y @waiframe/mcp-server

Cursor / JSON Config

Add to your MCP settings file (e.g. .cursor/mcp.json or .claude/claude.json):

{
  "mcpServers": {
    "waiframe": {
      "command": "npx",
      "args": ["-y", "@waiframe/mcp-server"],
      "env": {
        "WAIFRAME_API_KEY": "your-api-key-here"
      }
    }
  }
}

Start Building

That's it! Your AI tool now has access to your wireframes. Try prompts like:

“Build the product listing screen from my Waiframe design using React and Tailwind”

“Check the login screen wireframe and add form validation matching the input fields I designed”

“Review the checkout flow in my wireframe and implement the navigation with React Router”

Available Tools

list_projects

List all your wireframe projects with screen and flow counts

get_project_overview

Get project details including all screen names, flow names, and app context

get_screen

Get the semantic structure of a screen — components, props, and navigation targets (no UUIDs or positions)

get_flow

Get a user flow with screen names resolved and connection details

get_design_context

Get the app context: type, audience, features, brand style, and constraints

get_component_spec

Get the full spec for any component type — props, defaults, and usage guidelines

Available Resources

waiframe://component-catalog

Complete catalog of 60+ wireframe component types with their props

waiframe://design-patterns

20 curated UI design patterns for common screens and layouts

Environment Variables

WAIFRAME_API_KEYrequired

Your Waiframe API key. Get one from Settings → API Keys.

WAIFRAME_BASE_URLoptional

API base URL. Defaults to https://waiframe.com.

Works With

Claude Code

Anthropic's CLI coding tool

Cursor

AI-powered code editor

Any MCP Tool

Supports the MCP standard

Open Source on GitHub

The Waiframe MCP server is fully open source. Browse the code, report issues, or contribute.

View on GitHub Contact Support