MCP Server
Wire UI provides an official MCP (Model Context Protocol) server that gives AI coding tools direct access to the component API — props, data attributes, usage examples, and decision trees.
The MCP server is published as @wire-ui/mcp on npm. It works with Claude Code, Claude Desktop, Cursor, VS Code, Windsurf, Trae, and any MCP-compatible client.
Installation
npx @wire-ui/mcpIDE Configuration
Add the Wire UI MCP server to your editor’s configuration file.
| IDE | Config File (macOS) | Config File (Linux) |
|---|---|---|
| Claude Code | ~/.claude.json or .mcp.json | ~/.claude.json or .mcp.json |
| Claude Desktop | ~/Library/Application Support/Claude/claude_desktop_config.json | N/A |
| VS Code | ~/Library/Application Support/Code/User/mcp.json | ~/.config/Code/User/mcp.json |
| Cursor | ~/Library/Application Support/Cursor/User/mcp.json | ~/.config/Cursor/User/mcp.json |
| Windsurf | ~/Library/Application Support/Windsurf/User/mcp.json | ~/.config/Windsurf/User/mcp.json |
| Trae | ~/Library/Application Support/Trae/User/mcp.json | ~/.config/Trae/User/mcp.json |
Example configuration
Add this to the appropriate config file for your IDE:
{
"mcpServers": {
"wire-ui": {
"command": "npx",
"args": ["@wire-ui/mcp"]
}
}
}Restart your editor after adding the configuration.
Available Tools
The MCP server exposes 6 tools that AI agents can call:
list_components
List all Wire UI components with categories and descriptions.
| Parameter | Type | Default | Description |
|---|---|---|---|
framework | "react" | "vue" | "solid" | "react" | Target framework |
category | "form" | "overlay" | "display" | "layout" | — | Filter by category |
get_component
Get full details for a specific component — props, data attributes, compound parts, and usage examples.
| Parameter | Type | Default | Description |
|---|---|---|---|
name | string | required | Component name (e.g., “Button”, “Modal”) |
framework | "react" | "vue" | "solid" | "react" | Target framework |
get_decision_tree
Get a decision tree to help choose the right component for a scenario.
| Parameter | Type | Description |
|---|---|---|
scenario | "form" | "overlay" | "styling" | Which decision tree to retrieve |
search_docs
Search across all component documentation by keyword.
| Parameter | Type | Default | Description |
|---|---|---|---|
query | string | required | Free-text search query |
framework | "react" | "vue" | "solid" | "react" | Target framework |
get_installation_guide
Get installation instructions, peer dependencies, styling approach, and data attribute reference.
No parameters required.
get_exports_list
List all exports from the Wire UI package — components, hooks, and TypeScript types.
| Parameter | Type | Default | Description |
|---|---|---|---|
framework | "react" | "vue" | "solid" | "react" | Target framework |
Example Prompts
Once connected, try these prompts in your AI coding tool:
- “List all Wire UI form components”
- “Show me the full API for the Modal component”
- “I need to build a form — help me choose the right Wire UI components”
- “How do I install Wire UI?”
- “What can I import from @wire-ui/react?”
- “What can I import from @wire-ui/vue?”
- “What can I import from @wire-ui/solid?”
- “Build me a login form with Wire UI using Tailwind”
Framework Support
The MCP server understands React, Vue, and SolidJS — pass the framework parameter ("react", "vue", or "solid") to any tool that accepts it and you’ll get framework-specific imports, component shapes, and code examples from the same @wire-ui/mcp install. No reinstallation needed when switching between projects.