Registry / llm-agents / shadcn-ui-mcp-server

shadcn-ui-mcp-server

library0.1.2jsnpmunverified

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.

llm-agents web-framework devops

npm install shadcn-ui-mcp-server

github ↗package ↗

INSTALL

IMPORT

SIG · SHADCN-UI-MCP-SERV

shadcn-ui-mcp-server

llm-agentsjavascriptv0.1.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Demonstrates how to run the shadcn/ui MCP server using npx and how to access its debugging tools.

npx -y shadcn-ui-mcp-server # For higher rate limits, especially during development: # GITHUB_PERSONAL_ACCESS_TOKEN='ghp_YOUR_TOKEN_HERE' npx -y shadcn-ui-mcp-server # To debug server communication via a browser UI: npm install # if not already installed npm run inspector

Debug

Known issues

gotchaIncorrect 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`).

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.

affects: >=0.1.0

gotchaDebugging 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.

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.

affects: >=0.1.0

gotchaThe 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.

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.

affects: >=0.1.0

gotchaGitHub API rate limits can be a significant bottleneck, especially during initial data scraping or intensive usage, leading to 'Rate limit exceeded' errors.

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.

affects: >=0.1.0

Errors

Common errors & fixes

Error: Command not found: /path/to/shadcn-ui-server/build/index.js

The configured 'command' path in the AI client's MCP settings is incorrect or the server build files are not present at that location.

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.

MCP Server not responding / No tools or prompts available

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.

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.

Error: Missing 'mcpServers' configuration or malformed JSON in client config file.

The `claude_desktop_config.json`, `.mcp.json`, or other client configuration file is either missing the `mcpServers` object or contains invalid JSON syntax.

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.

Upgrade

Version history

0.1.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

21 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ymadd/shadcn-ui-mcp-server ↗

packagehttps://www.npmjs.com/package/shadcn-ui-mcp-server ↗