Waiframe MCP Server

Connect AI coding tools to your Waiframe.ai wireframe designs using the Model Context Protocol.

Build UI code that matches your wireframes — your AI coding tool gets structured context about screens, components, navigation flows, and design patterns.

Quick Start

1. Get an API Key

Go to waiframe.ai/app/settings?tab=api-keys and create an API key.

2. Configure Your AI Tool

Claude Code — add to your MCP settings:

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

Cursor — add the same config to your MCP settings file.

3. Use It

Once connected, your AI tool can:

• List your projects — see all wireframe projects
• Read screens — get component layouts in a semantic format (no UUIDs or pixel positions)
• Follow flows — understand navigation between screens
• Get design context — app type, audience, features, brand style
• Look up components — specs for any of the 60+ wireframe component types

Tools

| Tool | Description | |------|-------------| | list_projects | List all your wireframe projects | | get_project_overview | Project details with screen and flow names | | get_screen | Semantic wireframe layout for a screen | | get_flow | Navigation flow between screens | | get_design_context | App context (type, audience, features) | | get_component_spec | Component specification and properties |

Resources

| Resource | Description | |----------|-------------| | waiframe://component-catalog | Full catalog of 60+ wireframe components | | waiframe://design-patterns | 20 curated UI design patterns |

How It Works

AI Coding Tool ←stdio→ @waiframe/mcp-server ←HTTPS→ waiframe.ai API

The MCP server runs locally on your machine. It connects to the Waiframe API using your API key and translates wireframe data into an AI-friendly format:

• Strips UUIDs, pixel positions, and sizes
• Keeps component types, properties, labels, and text
• Resolves navigation connections to screen names
• Sorts elements top-to-bottom for reading order

Example

A button in your wireframe becomes:

- button-primary {label: "Sign In"} → Dashboard

Instead of raw JSON with UUIDs and coordinates.

Environment Variables

| Variable | Required | Default | Description | |----------|----------|---------|-------------| | WAIFRAME_API_KEY | Yes | — | Your API key from waiframe.ai | | WAIFRAME_BASE_URL | No | https://waiframe.ai | API base URL (for development) |

Development

# Install dependencies
npm install

# Build
npm run build

# Run locally
WAIFRAME_API_KEY=wf_sk_... node dist/index.js

License

MIT