@addai/widgets-mcp

MCP (Model Context Protocol) server for +AI Widgets. Gives AI assistants full control over embeddable widgets — create, edit, style, add actions, generate with AI, and get embed code from Claude or any MCP-compatible client.

Quick Install

npx @addai/widgets-mcp install

This will:

1. Ask for your API key
2. Validate the key
3. Add the MCP server to your Claude configuration
4. Install the building-widgets skill

Manual Setup

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

{
  "mcpServers": {
    "addai-widgets": {
      "command": "npx",
      "args": ["-y", "@addai/widgets-mcp@latest"],
      "env": {
        "ADDAI_API_KEY": "your-api-key-here",
        "ADDAI_SUPABASE_URL": "https://syhzpqqvrplaqdipcymw.supabase.co"
      }
    }
  }
}

For Claude Code, add to ~/.claude/settings.local.json with "type": "stdio".

Tools (24)

Widget Management

| Tool | Description | |------|-------------| | list_widgets | List all widgets in the workspace | | get_widget | Get widget with view, state, schema, and actions | | create_widget | Create a new widget | | update_widget | Update widget properties | | delete_widget | Delete a widget | | duplicate_widget | Clone a widget |

View / State / Schema

| Tool | Description | |------|-------------| | update_widget_view | Update the JSX view template | | update_widget_state | Update the default state JSON | | update_widget_schema | Update the Zod schema | | generate_widget | AI-generate view + state + schema from description |

Actions

| Tool | Description | |------|-------------| | list_widget_actions | List widget actions | | create_widget_action | Create HTTP or host action | | update_widget_action | Update action config | | delete_widget_action | Delete an action | | test_widget_action | Test an action with state | | execute_widget_action | Execute a saved action |

Secrets

| Tool | Description | |------|-------------| | list_widget_secrets | List secrets (values masked) | | create_widget_secret | Add a secret for action templates | | update_widget_secret | Update a secret | | delete_widget_secret | Delete a secret |

Embed

| Tool | Description | |------|-------------| | get_embed_url | Get embed URLs (edge function + React) | | get_embed_code | Get ready-to-use iframe + JS embed code |

Reference

| Tool | Description | |------|-------------| | list_components | List all ShadCN components by category | | get_component_info | Get detailed component props + examples |

building-widgets Skill

This package ships a Claude skill for guided widget authoring. The installer copies it to ~/.claude/skills/building-widgets/. Invoke Skill("building-widgets") to load the workflow, recipes, and anti-patterns.

Environment Variables

| Variable | Required | Default | Description | |----------|----------|---------|-------------| | ADDAI_API_KEY | Yes | — | Your Widgets API key | | ADDAI_SUPABASE_URL | No | Production URL | Supabase project URL |

License

MIT