matchcn — Claude Code MCP server: what it does, how to install
Discovers shadcn UI components across external registries by behavior and layout description rather than exact package names.
claude mcp add matchcn -- npx -y matchcnWhat matchcn does
Component registries publishing a registry.json work smoothly with npx shadcn add, yet finding the right element usually stalls on naming mismatches. A prompt describing a three-tier pricing table misses components named after arbitrary adjectives. matchcn addresses this by indexing components across seven dimensions: category, domain, motion, visual density, interaction model, decorative purpose, and external data needs.
The server provides an agent with the pick_component tool. When given a plain-text brief, the tool applies deterministic matching against tagged properties and outputs the exact installation command alongside a dimension breakdown. When nothing fits closely, matchcn returns an explicit no-match response instead of forcing an irrelevant candidate.
Setting resolve: "caller" alongside known hints activates local ranking, cutting execution time to around 80 ms without outbound classifier calls.
What it helps with
- find shadcn components by behavior rather than exact package name
- retrieve ready-to-run
npx shadcn addcommands for UI blocks - select matching form or layout elements without browsing registry catalogs
- verify whether candidate components match requirements for animation and external data
Example prompts for the agent
- Find a dense bento grid component for a landing page using matchcn and show the install command.
- Pick a login form with email and password inputs from shadcn registries using pick_component.
- Search for a three-tier pricing section component and check the property match breakdown.
How to install matchcn
Platform CLI
claude mcp add matchcn -- npx -y matchcnPlatform CLI
codex mcp add matchcn -- npx -y matchcnConfig file
{
"mcpServers": {
"matchcn": {
"command": "npx",
"args": [
"-y",
"matchcn"
]
}
}
}Config file
{
"servers": {
"matchcn": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"matchcn"
]
}
}
}Platform CLI
gemini mcp add matchcn npx -y matchcnStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about matchcn
How to install matchcn in Claude Code?
Run claude mcp add matchcn -- npx -y matchcn in your terminal. This registers the server and exposes the pick_component tool to your assistant.
What does matchcn do?
It queries indexed shadcn-compatible registries using natural language briefs. The tool inspects seven structured traits, returns match reasons, and provides the exact command to add the component.
How does the local ranking mode work?
Supplying the hints object and setting resolve: "caller" bypasses server-side parsing calls. The matching runs locally against the tagged index in roughly 80 ms, letting the client break ties directly.
