Any model will write you a Vue component. The part that usually gets skipped is whether it is keyboard-navigable, correctly labelled and consistent with the rest of the design system — and that is the step this splits out into its own tool, run after generation. The recommendation tool matters for the same reason: picking the wrong shadcn-vue primitive is a decision that costs more later than the code did.
An MCP server for building UI against the shadcn-vue component library and Tailwind CSS from natural-language descriptions, without leaving the editor. It targets Cursor, Trae, VS Code and VS Code with Cline.
- `requirement-structuring` — turns a described need into structured JSON, taking core functionality, user interaction and edge cases into account
- `components-filter` — recommends which shadcn-vue components fit, parsing descriptions in several languages and weighting by component relationships and usage frequency
- `component-usage-doc` — pulls live component documentation, API and usage examples, with variants previewed as rendered markdown in the browser
- `component-builder` — generates the Vue component against shadcn-vue and Tailwind conventions, with TypeScript types
- `component-quality-check` — scores the generated code for A11y compliance, performance and best practice, and returns suggestions
Node.js `18.20.1` or later — the README ties `Error: spawnSync code-insiders.cmd EINVAL` directly to running a different version. The quick path is a Smithery-generated URL carrying your own key, added to the client as an HTTP/SSE server; config files live at `~/.cursor/mcp.json`, `~/.Trae/mcp.json`, `~/.cline/mcp_config.json` or `~/.claude/mcp_config.json` depending on the client. Apache 2.0.
One command plus a key — npx -y mcp-remote https://server.smithery.ai/@HelloGGX/shadcn-vue-mcp/mcp?api_key=xxxx&profile=linguistic-landfowl-TWeEt8, then supply credentials