@uwckit/mcp

Model Context Protocol server for UWC Components — gives AI coding assistants real-time access to component documentation, props, events, slots, and ready-to-use code examples.

Connect any MCP-compatible AI tool (Claude, Cursor, Windsurf, VS Code Copilot, Zed, etc.) to the full UWC Components API so it can help you build with @uwckit/components without hallucinating prop names or guessing event signatures.

Live docs: https://components.uwckit.com
Components package: @uwckit/components

Available tools

| Tool | Description | |---|---| | list_components | List all 39+ components, optionally filtered by category | | get_component | Full API — properties, events, slots, methods, CSS custom properties | | get_example | Ready-to-use code example in your framework (vanilla, React, Vue, Angular, Svelte) | | search_components | Find a component by keyword or feature description | | get_installation | Framework-specific setup and install instructions | | get_theme_guide | Complete theming guide — tokens, dark mode, custom CSS |

Quick setup

The server runs entirely via npx — no global install required.

Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "uwc-components": {
      "command": "npx",
      "args": ["-y", "@uwckit/mcp"]
    }
  }
}

Restart Claude Desktop. You should see uwc-components listed in the MCP panel.

Cursor

Create or edit .cursor/mcp.json in your project root (project-scoped) or ~/.cursor/mcp.json (global):

{
  "mcpServers": {
    "uwc-components": {
      "command": "npx",
      "args": ["-y", "@uwckit/mcp"]
    }
  }
}

Cursor picks up the config automatically. The tools appear in the Agent's tool list.

Windsurf (Codeium)

Edit ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "uwc-components": {
      "command": "npx",
      "args": ["-y", "@uwckit/mcp"]
    }
  }
}

Restart Windsurf. The Cascade AI will have access to all UWC tools.

VS Code (GitHub Copilot / Continue)

For GitHub Copilot (VS Code 1.99+), add to your .vscode/mcp.json:

{
  "servers": {
    "uwc-components": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@uwckit/mcp"]
    }
  }
}

For Continue, edit ~/.continue/config.json:

{
  "mcpServers": [
    {
      "name": "uwc-components",
      "command": "npx",
      "args": ["-y", "@uwckit/mcp"]
    }
  ]
}

Zed

Edit ~/.config/zed/settings.json and add to the context_servers section:

{
  "context_servers": {
    "uwc-components": {
      "command": {
        "path": "npx",
        "args": ["-y", "@uwckit/mcp"]
      }
    }
  }
}

Any MCP-compatible tool

The server uses stdio transport (the universal standard). Configuration pattern is always the same:

{
  "command": "npx",
  "args": ["-y", "@uwckit/mcp"]
}

What you can ask after setup

Once connected, ask your AI assistant naturally:

"Show me how to use uwc-dropdown in React"
"What events does uwc-datatable fire?"
"How do I install UWC Components in an Angular project?"
"Which component should I use for a type-ahead search input?"
"How do I switch to the Material theme?"
"List all overlay/popup components"
"What CSS custom properties does uwc-dialog expose?"

Using a locally installed version

If you prefer to avoid npx network fetches, install globally once:

npm install -g @uwckit/mcp

Then use uwckit-mcp as the command:

{
  "mcpServers": {
    "uwc-components": {
      "command": "uwckit-mcp"
    }
  }
}

Inspect with MCP Inspector

Debug or explore the tools interactively:

npx @modelcontextprotocol/inspector npx @uwckit/mcp

Opens a local web UI listing all tools and letting you invoke them manually.

License

MIT — github.com/uwckit/components