MCP Server - AI Integration

What is MCP?

The Model Context Protocol (MCP) lets AI coding assistants understand your component library without guessing APIs from source code. Instead of scanning raw files, the AI gets structured metadata about all 27 w3-kit components — props, types, examples, design tokens, and guidelines — served directly into your AI workflow.

Quick Setup

Add the following to your .mcp.json file in your project root:

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

Works with Claude Code, Cursor, and any MCP-compatible client.

Available Tools

The MCP server exposes six tools your AI assistant can call:

Tool	Description
`list_components`	List all w3-kit components, filter by category (token, nft, wallet, defi, utility, general)
`get_component`	Get full props, types, source code, and dependencies for any component
`get_design_tokens`	Get colors, spacing, and typography from the Tailwind config
`get_design_guidelines`	Get design rules for spacing, dark mode, motion, and Vercel style
`generate_composition`	Generate a page composing multiple w3-kit components
`get_example`	Get basic or full working code examples for any component

Examples

Ask your AI assistant to call these tools directly, or let it invoke them automatically as it helps you build with w3-kit.

List all DeFi components

list_components({ category: "defi" })

Get token-card details

get_component({ name: "token-card" })

Generate a dashboard

generate_composition({ description: "token dashboard" })

Get design guidelines

get_design_guidelines({ topic: "vercel-style" })

Component Categories

Use the category filter with list_components to narrow results:

token — Token display, trading, and management
nft — NFT display, collection, and marketplace
wallet — Wallet connection, balance, and transactions
defi — DeFi protocol interaction and portfolio
utility — Gas estimation, network switching, contract tools
general — Cross-cutting components (bridges, subscriptions)

Development Mode

For contributors working on the w3-kit repository, use the dev config to run the MCP server from local source files instead of the published package:

{
  "mcpServers": {
    "w3-kit": {
      "command": "node",
      "args": ["ui/packages/mcp-server/dist/index.js", "--dev"]
    }
  }
}

Dev mode reads live source files from the monorepo, so changes to component definitions and design tokens are reflected immediately without republishing.

npm Package

The MCP server is available as @w3-kit/mcp on npm. You can install it globally or run it directly with npx as shown in the Quick Setup above.

npm install -g @w3-kit/mcp