@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

``bash
npm install -g @wireweave/mcp-server
`

Or use directly with npx:

`bash
npx @wireweave/mcp-server
`

Configuration

$3

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

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

$3

| 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)

$3

| 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 |

$3

| 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 |

$3

| 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