Shadcn UI MCP Server v4 Details
Shadcn UI v4 MCP Server is an advanced MCP (Model Context Protocol) server designed to give AI assistants comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. It enables multi-framework support (React, Svelte, Vue, and React Native) with fast, cache-friendly access to component source code, demos, and directory structures, empowering AI-driven development workflows. The project emphasizes production-readiness with Docker Compose, SSE transport for multi-client deployments, and smart caching to optimize GitHub API usage while providing rich metadata and usage patterns for rapid prototyping and learning across frameworks.
Use Case
This MCP server enables AI assistants to learn from and interact with shadcn/ui v4 components across multiple frameworks. It provides a single integration point to fetch component source code, demos, blocks, and metadata, enabling use cases such as AI-powered UI generation, cross-framework comparison, and rapid prototyping. Example scenarios include: retrieving React and Vue implementations for a given component, exploring blocks like dashboards or forms, and fetching metadata about dependencies and configurations. Code examples from the docs illustrate how to run and configure the server, switch frameworks, and connect editors or agents via SSE transport for real-time interaction.
Examples & Tutorials
Code examples from the documentation:
npx @jpisnice/shadcn-ui-mcp-servernpx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_herenpx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native<h1 class="text-2xl font-semibold mt-5 mb-3">SSE mode with port 7423</h1>
node build/index.js --mode sse --port 7423<h1 class="text-2xl font-semibold mt-5 mb-3">Docker Compose (production ready)</h1>
docker-compose up -d
<h1 class="text-2xl font-semibold mt-5 mb-3">Connect with Claude Code</h1>
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse
<h1 class="text-2xl font-semibold mt-5 mb-3">Basic container</h1>
docker run -p 7423:7423 shadcn-ui-mcp-server<h1 class="text-2xl font-semibold mt-5 mb-3">With GitHub API token</h1>
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server
<h1 class="text-2xl font-semibold mt-5 mb-3">Docker Compose (recommended)</h1>
docker-compose up -d
curl http://localhost:7423/health
<h1 class="text-2xl font-semibold mt-5 mb-3">React (default)</h1>
npx @jpisnice/shadcn-ui-mcp-server<h1 class="text-2xl font-semibold mt-5 mb-3">Svelte</h1>
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
<h1 class="text-2xl font-semibold mt-5 mb-3">Vue</h1>
npx @jpisnice/shadcn-ui-mcp-server --framework vue
<h1 class="text-2xl font-semibold mt-5 mb-3">React Native</h1>
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sseInstallation Guide
Step-by-step installation and run commands from the docs:
<h1 class="text-2xl font-semibold mt-5 mb-3">Global installation (optional)</h1>
npm install -g @jpisnice/shadcn-ui-mcp-server<h1 class="text-2xl font-semibold mt-5 mb-3">Or use npx (recommended)</h1>
npx @jpisnice/shadcn-ui-mcp-server
Further options include:
<h1 class="text-2xl font-semibold mt-5 mb-3">Basic usage (60 requests/hour)</h1>
npx @jpisnice/shadcn-ui-mcp-server<h1 class="text-2xl font-semibold mt-5 mb-3">With GitHub token (5000 requests/hour) - Recommended</h1>
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
<h1 class="text-2xl font-semibold mt-5 mb-3">Switch frameworks</h1>
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
Integration Guides
Frequently Asked Questions
Is this your MCP?
Claim ownership and get verified badge
Notes and important considerations from the docs:
Prerequisites from the docs:
Compare Alternatives
Similar MCP Tools
6 related toolsAnki MCP Server
A Model Context Protocol (MCP) server that enables AI assistants to interact with Anki, the spaced repetition flashcard application. The Anki MCP Server allows AI models to access Anki's card data, enabling features like automated flashcard creation, review, and management.
1MCP Agent
A unified Model Context Protocol server implementation that aggregates multiple MCP servers into one. The 1mcp-app/agent is an open-source project that provides a single entry point for multiple MCP servers, making it easier to manage and interact with various AI models and tools.
Roundtable AI MCP Server
Roundtable AI MCP Server is a zero-configuration local MCP server that unifies multiple AI coding assistants (Codex, Claude Code, Cursor, Gemini) through intelligent auto-discovery and a standardized interface. It coordinates specialized sub-agents from within your IDE to solve engineering problems in parallel, sharing context and synthesizing responses into a single, high-quality output. This documentation details installation, available MCP tools, integration with popular IDEs, and a broad ecosystem of specialized tools and CLIs that can be invoked as part of a roundtable-powered workflow, enabling developers to delegate tasks to the right AI for each facet of a problem without leaving their development environment.
MCPJungle
MCPJungle is a self-hosted MCP Gateway and Registry for AI agents. It serves as a central registry and gateway to manage Model Context Protocol (MCP) servers and the tools they expose. By consolidating MCP server registration, tool discovery, and access control, MCPJungle enables AI agents and clients to discover, group, and securely invoke tools from a single, unified gateway. The project provides a CLI, Docker-based deployment options, and enterprise-ready features such as tool grouping, access control, and observability to streamline MCP-based workflows across organizations.
mcpmcp-server
mcpmcp-server is a focused solution for discovering, setting up, and integrating MCP servers with your favorite clients to unlock AI-powered workflows. It streamlines how you connect MCP-powered servers to popular clients, enabling seamless AI-assisted interactions across your daily tools. The project emphasizes an approachable, config-driven approach to linking MCP servers with clients like Claude Desktop, while directing you to the homepage for variations across apps and platforms. This README highlights a practical JSON configuration example and notes on supported environments, helping you get started quickly and confidently.
Imagen3-MCP
Imagen3-MCP is an image generation service based on Google's Imagen 3.0 that exposes its functionality through MCP (Model Control Protocol). The project provides a server to run a local MCP service that accesses Google Gemini-powered image generation, enabling developers to integrate advanced image synthesis into their applications. The documentation covers prerequisites (Gemini API key), installation steps for Cherry Studio, and a Cursor-based JSON configuration example for embedding the MCP server in broader tooling. This MCP is designed to be deployment-friendly, with configurable environment variables and optional proxy settings to adapt to various network environments.