shadcn-ui

This MCP server provides AI assistants with access to the shadcn/ui v4 component library across multiple frameworks (React, Svelte, Vue, and React Native). It exposes components, blocks, demos, and metadata to help AI-powered development workflows. You can run the server via npx, optionally selecting a framework or enabling additional UI libraries, and then connect to it using SSE transport for multi-client deployments or standard stdio usage for local work. Use cases include programmatically retrieving component source, usage examples, and metadata to accelerate UI implementation within an AI assistant or editor plugin.

Prerequisites:

• Node.js installed (recommended v14+)
• Internet access to fetch the MCP server package via npm/yarn

Installation steps:

1. Install and run the server with the default React framework:

npx @jpisnice/shadcn-ui-mcp-server

2. (Optional) Use a different framework, e.g., Svelte:

npx @jpisnice/shadcn-ui-mcp-server --framework svelte

3. (Optional) Provide a GitHub token for higher rate limits:

npx @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

4. If you prefer Docker or other deployment methods, refer to the README for SSE, Docker Compose, and Claude integration steps.

Note: The MCP server is published as an npm package named @jpisnice/shadcn-ui-mcp-server. If you use Claude Desktop or Claude Code integrations, you can also follow the Claude-specific config examples in the README.

Tips and caveats:

• SSE transport enables multi-client deployments; use node build/index.js --mode sse --port 7423 for SSE mode.
• You can switch frameworks per run with --framework (react, svelte, vue, react-native) and optionally choose a UI library for React with --ui-library (radix or base).
• For production deployments, consider using Docker or Docker Compose as shown in the README, and set environment variables such as MCP_PORT, MCP_HOST, MCP_TRANSPORT_MODE, and GITHUB_PERSONAL_ACCESS_TOKEN as needed.
• If you encounter rate-limit or token-related issues, supplying a GitHub token in the command line will increase request quotas.
• Claude integration examples in the README show how to add the MCP server to Claude Code or Claude Desktop for streamlined usage.