shadcn/ui logo

shadcn/ui

CommunityPopular
jpisnice

A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native

Publisherjpisnice
Repositoryshadcn-ui-mcp-server
LanguageTypeScript
Forks
291
Stars
2.8K
Available tools
7
Transport typestdio, streamable-http
Categories
Developer ToolsDesign
LicenseMIT
Links
GitHub
  • Connect tools to AI workflows

    shadcn/ui exposes MCP capabilities that can be used by compatible AI clients and agents.

  • 7 available tools

    Browse the callable actions below, including names and descriptions when provided by the server.

  • Ready-to-copy setup

    Use the installation snippets to configure this server in your preferred MCP client.

  • Open source signals

    2.8K stars and 291 forks from the linked repository.

Shadcn UI v4 MCP Server

npm version License: MIT

Trust Score

🚀 The fastest way to integrate shadcn/ui components into your AI workflow

A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.

✨ Key Features

  • 🎯 Multi-Framework Support - React, Svelte, Vue, and React Native implementations
  • 📦 Component Source Code - Latest shadcn/ui v4 TypeScript source
  • 🎨 Component Demos - Example implementations and usage patterns
  • 🏗️ Blocks Support - Complete block implementations (dashboards, calendars, forms)
  • 📋 Metadata Access - Dependencies, descriptions, and configuration details
  • 🔍 Directory Browsing - Explore repository structures
  • ⚡ Smart Caching - Efficient GitHub API integration with rate limit handling
  • 🌐 SSE Transport - Server-Sent Events support for multi-client deployments
  • 🐳 Docker Ready - Production-ready containerization with Docker Compose

🚀 Quick Start

bash
# Basic usage (60 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server

# With GitHub token (5000 requests/hour) - Recommended
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Switch frameworks
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

# Use Base UI instead of Radix (React only)
npx @jpisnice/shadcn-ui-mcp-server --ui-library base

🎯 Get your GitHub token in 2 minutes: docs/getting-started/github-token.md

📦 One-Click Installation (Claude Desktop)

Download and double-click the .mcpb file for instant installation:

  1. Download shadcn-ui-mcp-server.mcpb from Releases
  2. Double-click the file - Claude Desktop opens automatically
  3. Enter your GitHub token (optional, for higher rate limits)
  4. Click Install - tools are available immediately

Manual install: Claude Desktop → Settings → MCP → Add Server → Browse → Select .mcpb file

References: Anthropic Desktop Extensions | Building MCPB

🌐 SSE Transport & Docker Deployment

Run the server with Server-Sent Events (SSE) transport for multi-client support and production deployments:

Quick Start with SSE

bash
# SSE mode (supports multiple concurrent connections)
node build/index.js --mode sse --port 7423

# Docker Compose (production ready)
docker-compose up -d

# Connect with Claude Code
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse

Transport Modes

  • stdio (default) - Standard input/output for CLI usage
  • sse - Server-Sent Events for HTTP-based connections
  • dual - Both stdio and SSE simultaneously

Docker Examples

bash
# Basic container
docker run -p 7423:7423 shadcn-ui-mcp-server

# With GitHub API token
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server

# Docker Compose (recommended)
docker-compose up -d
curl http://localhost:7423/health

Environment Variables

  • MCP_TRANSPORT_MODE - Transport mode (stdio|sse|dual)
  • MCP_PORT - SSE server port (default: 7423 - SHADCN on keypad!)
  • MCP_HOST - Host binding (default: 0.0.0.0)
  • MCP_CORS_ORIGINS - CORS origins (comma-separated)
  • GITHUB_PERSONAL_ACCESS_TOKEN - GitHub API token
  • UI_LIBRARY - UI primitive library: radix (default) or base (React only)

📚 Documentation

SectionDescription
🚀 Getting StartedInstallation, setup, and first steps
⚙️ ConfigurationFramework selection, tokens, and options
🔌 IntegrationEditor and tool integrations
📖 UsageExamples, tutorials, and use cases
🎨 FrameworksFramework-specific documentation
🐛 TroubleshootingCommon issues and solutions
🔧 API ReferenceTool reference and technical details

🎨 Framework Support

This MCP server supports four popular shadcn implementations:

FrameworkRepositoryMaintainerDescription
React (default)shadcn/uishadcnReact components from shadcn/ui v4
Svelteshadcn-sveltehuntabyteSvelte components from shadcn-svelte
Vueshadcn-vueunovueVue components from shadcn-vue
React Nativereact-native-reusablesFounded LabsReact Native components from react-native-reusables

UI Library (React only)

shadcn/ui v4 supports two primitive libraries for React: Radix UI (default) and Base UI.

bash
# Radix UI (default)
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library radix

# Base UI
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library base

# Or via environment variable
UI_LIBRARY=base npx @jpisnice/shadcn-ui-mcp-server

Claude Desktop config example:

json
{
  "args": ["--framework", "react", "--ui-library", "base"]
}

🛠️ Essential Setup

1. Get GitHub Token (Recommended)

bash
# Visit: https://github.com/settings/tokens
# Generate token with no scopes needed
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here

2. Run Server

bash
# React (default)
npx @jpisnice/shadcn-ui-mcp-server

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

# Vue  
npx @jpisnice/shadcn-ui-mcp-server --framework vue

# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

3. Integrate with Your Editor

💻 Claude Code Integration

Quick Add (CLI)

bash
# Add the shadcn-ui MCP server
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

SSE Transport

For production deployments with SSE transport:

bash
# Start server in SSE mode
node build/index.js --mode sse --port 7423

# Connect with Claude Code
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse

Framework-Specific Commands

See Claude Code Integration Guide for framework-specific commands (React, Svelte, Vue, React Native).

Reference: Claude Code MCP Documentation

🎯 Use Cases

  • AI-Powered Development - Let AI assistants build UIs with shadcn/ui
  • Multi-Client Deployments - SSE transport supports multiple concurrent connections
  • Production Environments - Docker Compose ready with health checks and monitoring
  • Component Discovery - Explore available components and their usage
  • Multi-Framework Learning - Compare React, Svelte, Vue, and React Native implementations
  • Rapid Prototyping - Get complete block implementations for dashboards, forms, etc.
  • Code Generation - Generate component code with proper dependencies

📦 Installation

bash
# Global installation (optional)
npm install -g @jpisnice/shadcn-ui-mcp-server

# Or use npx (recommended)
npx @jpisnice/shadcn-ui-mcp-server

🔨 Building from Source

Prerequisites

  • Node.js >= 18.0.0
  • npm or pnpm

Build Steps

bash
# Clone the repository
git clone https://github.com/Jpisnice/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server

# Install dependencies
npm install

# Build the project
npm run build

# Run the server
node build/index.js --github-api-key YOUR_TOKEN

Run Locally

bash
# After building, run with options
node build/index.js --github-api-key YOUR_TOKEN
node build/index.js --framework svelte

Building MCPB Package

The project includes a manifest.json following the MCPB specification. The .mcpb file is a ZIP archive containing the server, dependencies, and configuration.

See CONTRIBUTING.md for detailed packaging instructions.

Reference: Building Desktop Extensions with MCPB

🔗 Quick Links

📄 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

  • shadcn - For the amazing React UI component library
  • huntabyte - For the excellent Svelte implementation
  • unovue - For the comprehensive Vue implementation
  • Founded Labs - For the React Native implementation
  • Anthropic - For the Model Context Protocol specification

Made with ❤️ by Janardhan Polle

Star ⭐ this repo if you find it helpful!

Installation

TypingMind
Prerequisites:

Node.js 18+

{
  "mcpServers": {
    "shadcn-ui-mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Available Tools

  • get_component

    Get the source code for a specific shadcn/ui v4 component

  • get_component_demo

    Get demo code illustrating how a shadcn/ui v4 component should be used

  • list_components

    Get all available shadcn/ui v4 components

  • get_component_metadata

    Get metadata for a specific shadcn/ui v4 component

  • get_directory_structure

    Get the directory structure of the shadcn-ui v4 repository

  • get_block

    Get source code for a specific shadcn/ui v4 block (e.g., calendar-01, dashboard-01)

  • list_blocks

    Get all available shadcn/ui v4 blocks with categorization

Use shadcn/ui MCP with multiple AI models

TypingMind connects MCP tools at the workspace level, so once shadcn/ui is connected, you can use it with different AI models in TypingMind instead of setting it up separately for each model. You can run MCP locally on your device or connect to a remote MCP server URL.

Option 1: Use the local connector

Use this when the MCP server needs access to local files, apps, or private resources on your computer.

1

Open the MCP settings

In TypingMind, go to Settings, Advanced Settings, then Model Context Protocol and choose Setup Connector.

  1. Open TypingMind in your browser.
  2. Click the Settings icon.
  3. Go to Advanced Settings.
  4. Open the Model Context Protocol section.
  5. Click Setup Connector and choose This Device.
TypingMind MCP connector setup screen with This Device selected
2

Run the connector command

Choose This Device, copy the command from TypingMind, and run it in Terminal. Keep the process running while you use MCP.

  1. Copy the setup command shown by TypingMind.
  2. Open Terminal on macOS or Windows Terminal on Windows.
  3. Paste and run the command.
  4. Approve the package install if Terminal asks you to proceed.
  5. Keep the Terminal window running while using MCP tools.
3

Add shadcn/ui as a server

When the connector status is Ready, click Edit Servers and paste the MCP server configuration.

  1. Wait until the connector status shows Ready.
  2. Click Edit Servers.
  3. Paste the shadcn/ui MCP server configuration.
  4. Save the server list.
  5. Refresh if you want to confirm the connector is still ready.
TypingMind MCP settings showing active server and Edit Servers button
{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}
4

Use it across models

Save the server list, open Plugins, enable the shadcn/ui MCP tools, then select any supported AI model in TypingMind and use the tools in chat or assign them to an AI agent.

  1. Open the Plugins page in TypingMind.
  2. Enable the shadcn/ui MCP tools.
  3. Start a chat and choose the AI model you want to use.
  4. Use the MCP tools in chat or assign them to an AI agent.
  5. Switch to another AI model whenever needed without reconnecting MCP.
TypingMind chat using enabled MCP tools with a selected AI model
Can you use shadcn/ui to help me with this task?
shadcn/ui
Sure. I read it.
Here is what I found using shadcn/ui.

Option 2: Add an MCP server URL

Use this when shadcn/ui is already hosted remotely or your team wants one shared connector that multiple users can access.

1

Open MCP connectors

In TypingMind, go to Plugins, open MCP connectors, then choose Add URL.

  1. Open TypingMind in your browser.
  2. Go to Plugins.
  3. Open MCP connectors.
  4. Click Add URL.
TypingMind Add Custom MCP Server URL form
2

Paste the server URL

Enter your server URL in the Server URL field. Add a connection name, description, icon, custom HTTP headers, or OAuth client settings if the server requires them.

  1. Paste your server URL into the Server URL field.
  2. Enter a connection name for shadcn/ui.
  3. Add a description and icon if you want it to be easier to identify.
  4. Add custom HTTP headers or OAuth client details if the server requires authentication.
3

Create the connection

Click Create connection, then return to the Plugins list and confirm the new MCP connection is active.

  1. Click Create connection.
  2. Return to the MCP connectors list.
  3. Confirm the shadcn/ui connection appears as active.
  4. Refresh the plugin list if the connection does not appear immediately.
4

Switch models without reconnecting

Start a chat with your preferred model, enable the shadcn/ui tools from Plugins, and switch to another model whenever needed. The MCP connection stays available to the TypingMind workspace.

  1. Start a new chat in TypingMind.
  2. Select the AI model you want to use.
  3. Enable the shadcn/ui tools from Plugins.
  4. Ask the model to use the tool when needed.
  5. Switch to another AI model and reuse the same MCP connection.
TypingMind chat using enabled MCP tools with a selected AI model
Can you use shadcn/ui to help me with this task?
shadcn/ui
Sure. I read it.
Here is what I found using shadcn/ui.

Frequently asked questions

What is the shadcn/ui MCP server used for?

shadcn/ui is an MCP server that lets compatible AI clients connect to external tools and context. In TypingMind, you can add this MCP server once and make its tools available in your AI workspace.

Can I use shadcn/ui MCP with multiple AI models in TypingMind?

Yes. TypingMind connects MCP tools at the workspace level, so you can use shadcn/ui with different AI models such as Claude, ChatGPT, Gemini, or other models you have configured in TypingMind without setting up the MCP server separately for each model.

Why use shadcn/ui MCP with TypingMind?

TypingMind is one of the best frontends for LLM chat because it brings multiple AI models, prompts, plugins, AI agents, API keys, and MCP tools into one workspace. With shadcn/ui connected, you can use its MCP tools across your preferred models while keeping your chat workflow organized in TypingMind.

How do I connect shadcn/ui MCP to TypingMind?

shadcn/ui can be connected in TypingMind with the local MCP connector or by adding a remote MCP server URL. Use the local connector when the server needs access to files, apps, or private resources on your device, and use a server URL when the MCP server is hosted remotely.

What tools does shadcn/ui MCP provide in TypingMind?

shadcn/ui exposes 7 MCP tools that can be enabled from the TypingMind Plugins page and used in chat or assigned to AI agents.

Do I need to share my API keys with TypingMind to use shadcn/ui MCP?

No. TypingMind is local-first and lets you keep your model providers, API keys, prompts, and MCP configuration under your control. If shadcn/ui requires authentication, add the required headers, OAuth settings, or local configuration for that MCP server when you create the connection.

Related MCP Servers

View all
chromedevtools logo

Chrome DevTools

chromedevtools
OrganizationPopular

Chrome DevTools for coding agents

2.5K
39.5K
26 tools
View details
ChromeDevTools logo

Chrome DevTools MCP

ChromeDevTools
OrganizationPopular

Chrome DevTools for coding agents

2.5K
39.5K
0 tools
View details
github logo

GitHub

github
OrganizationPopular

GitHub's official MCP Server

4.2K
29.8K
0 tools
View details
jlowin logo

FastMCP

jlowin
CommunityPopular

🚀 The fast, Pythonic way to build MCP servers and clients.

2K
25.3K
0 tools
View details

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇