requirement-structuringLABSCO SUMMARY
The check step is what separates it from a prompt.
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.
What it is
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.
What you get
requirement-structuring— turns a described need into structured JSON, taking core functionality, user interaction and edge cases into accountcomponents-filter— recommends which shadcn-vue components fit, parsing descriptions in several languages and weighting by component relationships and usage frequencycomponent-usage-doc— pulls live component documentation, API and usage examples, with variants previewed as rendered markdown in the browsercomponent-builder— generates the Vue component against shadcn-vue and Tailwind conventions, with TypeScript typescomponent-quality-check— scores the generated code for A11y compliance, performance and best practice, and returns suggestions
Requirements
Node.js 18.20.1 or later — the README ties Error: spawnSync code-insiders.cmd EINVAL directly to running a different version. Run it from a clone with pnpm install and pnpm run start:http, which serves http://localhost:3001/mcp, and add that URL to the client as an HTTP 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.
Setup effort
Build from source — git clone https://github.com/HelloGGX/shadcn-vue-mcp.git
USE CASES
01
Building a component you can describe but not name
Say what it has to do; the requirement pass structures it and the filter proposes which shadcn-vue components to compose.
02
Auditing what the model just wrote
Run the accessibility and quality pass over generated code and read the concrete suggestions instead of trusting it on sight.
03
Checking an API without opening the docs site
Ask for the component's props and usage examples in the editor, with a rendered preview of its variants.
5 tools
Listed in project docs. Your client may show a different list.
component-usage-doccomponents-filtercomponent-quality-checkcomponent-builderBEFORE YOU INSTALL
What to know first
Tools you get
5 tools named in the project's documentation.
Requires
- Node.js 18.20.1 or later
- pnpm
Where it runs
All 4 documented clients run the server on your machine.
INSTALLATION
Connect your client
This one is built from source rather than installed with a single command.
Server setup
TERMINAL
git clone https://github.com/HelloGGX/shadcn-vue-mcp.git
cd shadcn-vue-mcp
pnpm install
pnpm run start:httpMCP Clients
VS Code
VS CODE · JSON
{
"servers": {
"shadcn-vue-mcp": {
"url": "http://localhost:3001/mcp"
}
}
}Cursor, Trae
JSON
{
"mcpServers": {
"shadcn-vue-mcp": {
"url": "http://localhost:3001/mcp"
}
}
}Cline
CLINE · JSON
{
"mcpServers": {
"shadcn-vue-mcp": {
"type": "streamableHttp",
"url": "http://localhost:3001/mcp"
}
}
}
