mcpField
S
shadcn-ui MCP Server

shadcn-ui MCP Server

Local
github.com/ymaddDeveloper Tools60Updated 81w ago
Repository

About shadcn-ui MCP Server

shadcn-ui MCP Server is a TypeScript MCP server that provides reference information for shadcn/ui components. It is intended for AI assistants that need component documentation and examples, and it caches data scraped from the official docs site and GitHub repository.

Key features

  1. 01Lists all available shadcn/ui components
  2. 02Returns detailed information for a single component
  3. 03Provides usage examples per component
  4. 04Searches components by keyword

Use cases

  1. 01Helping an AI assistant find suitable shadcn/ui components
  2. 02Retrieving installation instructions and code samples
  3. 03Reviewing props and variants of a component

MCP support

This project is an MCP server that exposes list_shadcn_components, get_component_details, get_component_examples and search_components as tools to MCP clients.

#shadcn-ui#mcp-server

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "-y",
        "shadcn-ui-mcp-server"
      ]
    }
  }
}
Run commandnpx -y shadcn-ui-mcp-server

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmshadcn-ui-mcp-server

Tools

4

Saved tool list · updated 3w ago

This tool takes no parameters.

Details

From the project README

shadcn-ui MCP Server

MCP server for shadcn/ui component references

This is a TypeScript-based MCP server that provides reference information for shadcn/ui components. It implements a Model Context Protocol (MCP) server that helps AI assistants access shadcn/ui component documentation and examples.

Features

Tools
  • list_shadcn_components - Get a list of all available shadcn/ui components
  • get_component_details - Get detailed information about a specific component
  • get_component_examples - Get usage examples for a specific component
  • search_components - Search for components by keyword
Functionality

This server scrapes and caches information from:

It provides structured data including:

  • Component descriptions
  • Installation instructions
  • Usage examples
  • Props and variants
  • Code samples

Development

Install dependencies:

npm install

Build the server:

npm run build

For development with auto-rebuild:

npm run watch

Installation

Claude Desktop Configuration

To use with Claude Desktop, add the server config:

On MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json On Windows: %APPDATA%/Claude/claude_desktop_config.json

Option 1: Using local build
{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "/path/to/shadcn-ui-server/build/index.js"
    }
  }
}
Option 2: Using npx command
{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}
Windsurf Configuration

Add this to your ./codeium/windsurf/model_config.json:

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}
Cursor Configuration

Add this to your .cursor/mcp.json:

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

Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector, which is available as a package script:

npm run inspector

The Inspector will provide a URL to access debugging tools in your browser.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.