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

Resources

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

Development

# Install dependencies
npm install

# Build
npm run build

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

License

MIT