@wireweave/mcp-server

Model Context Protocol server for Wireweave DSL - AI-powered wireframe generation

Overview

This MCP server enables AI assistants like Claude to generate wireframes using the Wireweave DSL. It provides 30 tools for parsing, rendering, validating, and managing wireframes.

Prerequisites

You need a Wireweave API key. Get one from the Dashboard.

Installation

npm install -g @wireweave/mcp-server

Or use directly with npx:

npx @wireweave/mcp-server

Configuration

Claude Desktop

Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "wireweave": {
      "command": "npx",
      "args": ["@wireweave/mcp-server"],
      "env": {
        "WIREWEAVE_API_KEY": "your-api-key"
      }
    }
  }
}

Environment Variables

Variable	Required	Description
WIREWEAVE_API_KEY	Yes	Your API key from Dashboard
WIREWEAVE_API_URL	No	API server URL (default: https://api.wireweave.org)

Available Tools (30)

Core Tools (11)

Tool	Description
wireweave_parse	Parse DSL source code into an AST
wireweave_validate	Validate DSL syntax
wireweave_grammar	Get DSL grammar documentation
wireweave_guide	Primary LLM resource - comprehensive language guide
wireweave_patterns	Get common layout patterns
wireweave_examples	Get code examples by category
wireweave_render_html	Render DSL to HTML and CSS
wireweave_validate_ux	Validate UX best practices
wireweave_ux_rules	Get UX rule categories
wireweave_diff	Compare two wireframe sources
wireweave_analyze	Analyze wireframe statistics

Cloud Storage Tools (15)

Tool	Description
wireweave_cloud_list_projects	List your projects
wireweave_cloud_create_project	Create a new project
wireweave_cloud_update_project	Update project details
wireweave_cloud_delete_project	Delete a project
wireweave_cloud_list_wireframes	List saved wireframes
wireweave_cloud_get_wireframe	Get a specific wireframe
wireweave_cloud_save_wireframe	Save a new wireframe
wireweave_cloud_update_wireframe	Update an existing wireframe
wireweave_cloud_delete_wireframe	Delete a wireframe
wireweave_cloud_get_versions	Get version history
wireweave_cloud_restore_version	Restore to a previous version
wireweave_cloud_diff_versions	Compare two versions of a wireframe
wireweave_cloud_create_share_link	Create a shareable link
wireweave_cloud_list_shares	List share links
wireweave_gallery	Browse public wireframe gallery

Account & Billing Tools (4)

Tool	Description
wireweave_account_balance	Check credit balance
wireweave_account_subscription	Get subscription details
wireweave_account_transactions	View transaction history
wireweave_pricing	Get pricing information

Usage Examples

Once configured, you can ask Claude:

Generate a wireframe:

"Create a wireframe for a login page with email and password fields"

Validate UX:

"Check the UX best practices for this wireframe code"

Save to cloud:

"Save this wireframe as 'Dashboard v2' in my project"

Share:

"Create a shareable link for this wireframe"

Architecture

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   Claude/LLM    │────▶│   MCP Server    │────▶│   API Server    │
│                 │     │  (this package) │     │                 │
└─────────────────┘     └─────────────────┘     └─────────────────┘
                              │                       │
                         Tool definitions        Execution
                         Request forwarding      Auth & Rate Limit
                                                 Credit management

The MCP server is a thin client that:

• Defines and exposes 30 tools to AI assistants
• Forwards tool calls to the Wireweave API Server
• Returns results back to the AI

All authentication, rate limiting, and business logic runs on the API Server.

Credit Costs

Feature	Credits
Parse, Validate	1
Grammar, Guide, Patterns, Examples, UX Rules	0 (free)
Render HTML	2
UX Validation	3
Diff, Analyze	2
Cloud Save/Update	1
Create Share Link	5

Links

• Documentation
• Dashboard
• Playground
• GitHub

License

MIT