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
Sponsored
Notes and important considerations from the docs:
Prerequisites from the docs:
Compare Alternatives
Similar MCP Tools
9 related toolsNews MCP Server
MCP server for real-time news aggregation and search. Access headlines, full articles, and trending topics from major news sources worldwide. Supports keyword search, category filtering, and multi-source aggregation. Built on Apify cloud infrastructure with Streamable HTTP transport for seamless AI agent integration. Connect via: https://nexgendata--news-mcp-server.apify.actor/mcp
Skyvern MCP
Skyvern is the complete browser MCP for AI agents. 75+ tools for clicking, filling forms, extracting structured data, logging in with 2FA, uploading files, drag-and-drop, running JavaScript, inspecting network traffic, multi-tab browsing, and building reusable cached workflows. First workflow run uses AI; subsequent runs replay a cached script with zero LLM calls.
pageguard-mcp
pageguard-mcp is an MCP (Model Context Protocol) server that exposes PageGuard privacy compliance scanning as a set of tools for AI coding assistants. It enables seamless integration with Claude Code, Cursor, Windsurf, ChatGPT, and any MCP-compatible environment. The server supports local scans, live URL scans, and AI-generated privacy-related documents, helping developers identify tracking technologies, cookies, and third-party data processing, while also producing tailored privacy policies and compliance materials. With its straightforward MCP configuration and free local scanning capability, pageguard-mcp is designed to empower teams to maintain privacy compliance across their projects and websites.
Prop Firm Deal Finder
Prop Firm Deal Finder (PFDF) is a free MCP server that gives AI assistants real-time access to live discount codes across 20+ proprietary trading firms. It provides 6 tools: get_deals (all current discounts), search_firms (search by name/asset class), compare_firms (side-by-side comparison of challenges), find_cheapest (cheapest challenge by account size with PFDF code applied), get_firm_details (15+ data points per firm), and get_discount_code (universal PFDF code). Covers firms like Topstep, Apex Trader Funding, MyFundedFutures, FTMO, The Funded Trader, and 14 more. No API key required. Install via npx propfirmdealfinder-mcp-server or connect remotely at https://web-production-6607c.up.railway.app/mcp
mcp-server-with-spring-ai
mcp-server-with-spring-ai is a Spring Boot integrated MCP (Model Context Protocol) server example that showcases how to expose executable tools from an MCP server to clients (including LLMs) and how to wire a MCP client to consume those tools. The documentation explains MCP at a high level, outlines the three-layer MCP Java SDK architecture (Client/Server Layer, Session Layer, Transport Layer), and demonstrates two sample tools implemented in SellerAccountTools. This repo emphasizes how an MCP server can connect to external data sources (e.g., a PostgreSQL DB) and expose tools that an AI model can invoke to retrieve data, with the example illustrating tool invocation and automatic tool selection by prompts.
OpenClaw MCP Server
OpenClaw MCP Server is a secure Model Context Protocol (MCP) bridge that connects Claude.ai with a self-hosted OpenClaw assistant, enabling OAuth2 authentication and safe, controlled communication between the Claude AI ecosystem and your local or hosted OpenClaw deployment. This MCP server acts as an orchestration layer that exposes MCP tools to Claude.ai, manages authentication, and enforces security boundaries like CORS and transport options. It is designed to be deployed via Docker or run locally, with detailed installation, configuration, and security guidance provided in the documentation. By serving as a bridge, it enables Claude.ai to delegate tasks to your OpenClaw bot while preserving control over data flow and access controls, in line with MCP specifications and best security practices.
Graphiti MCP Server
Graphiti MCP Server is an experimental implementation that exposes Graphiti's real-time, temporally-aware knowledge graph capabilities through the MCP (Model Context Protocol) interface. It enables AI agents and MCP clients to interact with Graphiti's knowledge graph for structured extraction, reasoning, and memory across conversations, documents, and enterprise data. The server supports multiple backends (FalkorDB by default and Neo4j), a variety of LLM providers (OpenAI, Anthropic, Gemini, Groq, Azure OpenAI), and multiple embedder options, all accessible via an HTTP MCP endpoint at /mcp/ for broad client compatibility. It also includes queue-based asynchronous episode processing, rich entity types for structured data, and flexible configuration through config.yaml, environment variables, or CLI arguments.
Context7 MCP Server
Context7 MCP Server delivers up-to-date, code-first documentation and examples for LLMs and AI code editors by pulling content directly from the source. It supports multiple MCP clients and exposes tools that help you resolve library IDs and retrieve library documentation, ensuring prompts use current APIs and usage patterns. The repository provides installation and integration guides for Cursor, Claude Code, Opencode, and other clients, along with practical configuration samples and OAuth options for remote HTTP connections. This MCP server is designed to keep prompts in sync with the latest library docs, reducing hallucinations and outdated code snippets.
TrendRadar MCP
TrendRadar MCP is an AI-driven Model Context Protocol (MCP) based analysis server that exposes a suite of specialized tools for cross-platform news analysis, trend tracking, and intelligent push notifications. It integrates with TrendRadar’s multi-platform data aggregation (RSS and trending topics) and provides advanced AI-powered insights, sentiment analysis, and cross-platform correlation. The MCP server enables developers to query, analyze, and compare news across platforms using a consistent toolset, with ongoing updates that expand capabilities such as RSS querying, date parsing, and multi-date trend analysis. This documentation references the MCP module updates, tool additions, and architecture changes that enhance extensibility, cross-platform data handling, and AI-assisted reporting.