MCP Server

The w3-kit MCP server lets AI assistants browse components, read source code, extract design tokens, and generate compositions — all through the Model Context Protocol.

Installation

npx @w3-kit/mcp

Configuration

Add the server to your MCP client configuration file.

.mcp.json

{
  "mcpServers": {
    "w3-kit": {
      "command": "npx",
      "args": ["@w3-kit/mcp"]
    }
  }
}

Available Tools

list_components

Browse all 27 components by category. Returns name, ID, description, and category for each component.

get_component

Get the full source code, props interface, types, and usage examples for a specific component.

get_design_tokens

Extract all design tokens — colors, spacing, typography, border radii, shadows — as CSS custom properties.

get_design_guidelines

Get design system rules including spacing scale, type hierarchy, dark-mode patterns, and motion guidelines.

generate_composition

AI generates a complete page that composes multiple w3-kit components together based on a description.

get_example

Get a ready-to-use code example for a component. Supports basic and full variants.

Compatible Clients

Claude Desktop
Cursor
VS Code with Claude extension
Any MCP-compatible client