{"id":14003,"library":"shadcn-ui-mcp-server","title":"shadcn/ui MCP Server","description":"The shadcn-ui MCP Server is a TypeScript-based application that acts as a Model Context Protocol (MCP) server, providing AI assistants with structured and up-to-date reference information for shadcn/ui components. It scrapes and caches data directly from the official shadcn/ui documentation site and its GitHub repository, ensuring AI agents have access to accurate component descriptions, installation instructions, usage examples, props, variants, and code samples. This enables AI tools like Claude Desktop, Windsurf, Cursor, and others to generate more reliable and contextually appropriate UI code. The package is currently at version 0.1.2, suggesting an early but active development phase, with a focus on seamless integration with AI-powered development workflows to mitigate issues like outdated patterns or hallucinated properties commonly seen in AI-generated UIs without such specific context.","status":"active","version":"0.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/ymadd/shadcn-ui-mcp-server","tags":["javascript","shadcn/ui","MCP","model context protocol","component references"],"install":[{"cmd":"npm install shadcn-ui-mcp-server","lang":"bash","label":"npm"},{"cmd":"yarn add shadcn-ui-mcp-server","lang":"bash","label":"yarn"},{"cmd":"pnpm add shadcn-ui-mcp-server","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[],"quickstart":{"code":"npx -y shadcn-ui-mcp-server\n# For higher rate limits, especially during development:\n# GITHUB_PERSONAL_ACCESS_TOKEN='ghp_YOUR_TOKEN_HERE' npx -y shadcn-ui-mcp-server\n\n# To debug server communication via a browser UI:\nnpm install # if not already installed\nnpm run inspector","lang":"bash","description":"Demonstrates how to run the shadcn/ui MCP server using npx and how to access its debugging tools."},"warnings":[{"fix":"Double-check the `command` and `args` in your AI client's MCP configuration against the documentation. Verify file paths and JSON syntax. Restart your AI client after making changes.","message":"Incorrect client configuration is a common pitfall. Ensure the 'command' path (for local builds) or 'npx' arguments (for npx usage) are exact, and the configuration file is in the correct location for your specific AI client (e.g., `claude_desktop_config.json`, `.mcp.json`, or `.cursor/mcp.json`).","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Utilize the provided `npm run inspector` command to launch the MCP Inspector tool, which offers a browser-based UI for detailed debugging and interaction with the server.","message":"Debugging MCP servers can be challenging due to their stdio-based communication. Direct logging to the console might not be immediately visible or helpful in isolation.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Report issues to the package maintainers. Ensure you have a GitHub Personal Access Token configured to mitigate GitHub API rate limits, which can affect data fetching and caching.","message":"The server scrapes data from external sources (shadcn/ui documentation and GitHub). Changes to these external sites' structure or availability could temporarily impact the server's data accuracy or functionality.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Provide a GitHub Personal Access Token (classic tokens work, but granular are recommended for security) as an environment variable (`GITHUB_PERSONAL_ACCESS_TOKEN`) or via a `--github-api-key` flag when running the server (e.g., `npx shadcn-ui-mcp-server --github-api-key ghp_YOUR_TOKEN_HERE`) to increase your API request allowance to 5000 requests/hour.","message":"GitHub API rate limits can be a significant bottleneck, especially during initial data scraping or intensive usage, leading to 'Rate limit exceeded' errors.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'0.1.2':100 'access':60 'accur':62 'act':17 'activ':105 'agent':58 'ai':26,57,76,116,133 'ai-gener':132 'ai-pow':115 'applic':15 'appropri':91 'assist':27 'base':14 'cach':43 'claud':79 'code':72,93 'common':129 'compon':39,63,146 'context':21,139,144 'contextu':90 'current':97 'cursor':82 'data':44 'date':34 'descript':64 'desktop':80 'develop':106,118 'direct':45 'document':50 'earli':103 'enabl':75 'ensur':56 'exampl':68 'focus':110 'generat':86,134 'github':54 'hallucin':127 'inform':36 'instal':65 'instruct':66 'integr':113 'issu':122 'javascript':140 'like':78,123 'mcp':2,8,23,142 'mitig':121 'model':20,143 'offici':48 'other':84 'outdat':124 'packag':95 'pattern':125 'phase':107 'power':117 'prop':69 'properti':128 'protocol':22,145 'provid':25 'refer':35,147 'reliabl':88 'repositori':55 'sampl':73 'scrape':41 'seamless':112 'seen':130 'server':3,9,24 'shadcn':6 'shadcn-ui':5 'shadcn/ui':1,38,49,141 'site':51 'specif':138 'structur':29 'suggest':101 'tool':77 'typescript':13 'typescript-bas':12 'ui':7,92,135 'up-to-d':31 'usag':67 'variant':70 'version':99 'windsurf':81 'without':136 'workflow':119","created_at":"2026-04-20T01:57:26.102984+00:00","updated_at":"2026-04-20T01:57:26.102984+00:00","problems":[{"fix":"Verify the absolute path to the `index.js` file within your `shadcn-ui-mcp-server/build` directory. Ensure `npm run build` has been executed successfully.","cause":"The configured 'command' path in the AI client's MCP settings is incorrect or the server build files are not present at that location.","error":"Error: Command not found: /path/to/shadcn-ui-server/build/index.js"},{"fix":"First, restart your AI client (Claude Desktop, Cursor, etc.). Then, check your MCP server configuration for syntax errors and correct paths. Clear the npx cache (`npx clear-npx-cache`) and re-enable the MCP server in your client settings.","cause":"The AI client cannot establish communication with the MCP server, or the server isn't correctly registering its capabilities. This can be due to configuration errors, the server not running, or an `npx` cache issue.","error":"MCP Server not responding / No tools or prompts available"},{"fix":"Carefully review your client's MCP configuration file. Ensure it is valid JSON and contains the `mcpServers` object with the correct structure as specified in the README.","cause":"The `claude_desktop_config.json`, `.mcp.json`, or other client configuration file is either missing the `mcpServers` object or contains invalid JSON syntax.","error":"Error: Missing 'mcpServers' configuration or malformed JSON in client config file."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/ymadd/shadcn-ui-mcp-server","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/shadcn-ui-mcp-server","openapi_spec":null,"status_page":null,"smithery":null,"categories":["llm-agents","web-framework","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-04-19","next_check":"2026-07-18","install_tag":null}}