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.
0.4.0 (May 2026) — Catalogue now covers the 22 new components added in @wire-ui/react, @wire-ui/vue, and @wire-ui/solid 0.4 — including the new AI components (Chat, Citation, CodeBlock, Diff, Markdown, Mention, Typewriter). list_components, get_component, and get_exports_list return them across all three frameworks, with Slider now documented for every framework.
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 8 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" | "navigation" | "feedback" | — | 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 |
list_hooks
List all Wire UI hooks/primitives/composables for the chosen framework. React and Vue expose them as useX; Solid exposes them as createX. As of 0.3.0 the catalogue holds 36 entries across six categories.
| Parameter | Type | Default | Description |
|---|---|---|---|
framework | "react" | "vue" | "solid" | "react" | Target framework |
category | "state" | "interaction" | "observer" | "positioning" | "timing" | "dom" | — | Filter by hook category |
Categories at a glance:
| Category | Examples |
|---|---|
state | useControllableState, useDisclosure, useId, usePrevious, useStateMachine, useUndoRedo |
interaction | useClickOutside, useFocusTrap, useFocusVisible, useKeyboard, useHotkeys, useLongPress, useCopyToClipboard |
positioning | useFloating, useScrollLock |
observer | useIntersectionObserver, useResizeObserver, useMutationObserver, useElementSize, useWindowSize |
timing | useDebounce, useThrottle, useTimeout, useInterval |
dom | useEventListener, useDocumentVisibility, useOnlineStatus, useMediaQuery, useReduceMotion, useLocalStorage, useSessionStorage, useIsomorphicLayoutEffect (React-only) |
get_hook
Get full details for a specific hook — signature, returns, import, and example code for the chosen framework. The name parameter is name-normalised: useDisclosure, createDisclosure, and the canonical disclosure all resolve to the same hook.
| Parameter | Type | Default | Description |
|---|---|---|---|
name | string | required | Hook name in any form (useDisclosure, createDisclosure, or canonical) |
framework | "react" | "vue" | "solid" | "react" | Target framework |
get_decision_tree
Get a decision tree to help choose the right component or hook for a scenario.
| Parameter | Type | Description |
|---|---|---|
scenario | "form" | "overlay" | "navigation" | "feedback" | "hooks" | "styling" | Which decision tree to retrieve |
search_docs
Free-text search across components, hooks, and decision trees for the chosen framework.
| Parameter | Type | Default | Description |
|---|---|---|---|
query | string | required | Free-text search query |
framework | "react" | "vue" | "solid" | "react" | Target framework |
get_installation_guide
Get framework-specific installation instructions, peer dependencies, styling approach, and data attribute reference.
| Parameter | Type | Default | Description |
|---|---|---|---|
framework | "react" | "vue" | "solid" | "react" | Target framework |
get_exports_list
List all exports from the chosen Wire UI package — components, hooks/composables/primitives, 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”
- “List all Wire UI navigation components for Vue”
- “Show me the full API for the Modal component”
- “What hooks does Wire UI ship?”
- “Show me the signature of
useDisclosure” - “Show me the Solid primitive for click-outside detection”
- “I need to build a form — help me choose the right Wire UI components”
- “Pick a Wire UI hook for trapping focus inside a dialog”
- “Wire up a
mod+kcommand palette using a Wire UI hook” - “Use Wire UI to persist a draft to localStorage with cross-tab sync”
- “Pause a Wire UI interval when the tab is hidden”
- “Add undo/redo to a text editor with Wire UI”
- “How do I install Wire UI for Vue?”
- “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.