MCP cover image
See in Github
2025-04-13

MCP server for shadcn/ui component references

1

Github Watches

3

Github Forks

18

Github Stars

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.

相关推荐

  • NiKole Maxwell
  • I craft unique cereal names, stories, and ridiculously cute Cereal Baby images.

  • Bora Yalcin
  • Evaluator for marketplace product descriptions, checks for relevancy and keyword stuffing.

  • https://suefel.com
  • Latest advice and best practices for custom GPT development.

  • Yusuf Emre Yeşilyurt
  • I find academic articles and books for research and literature reviews.

  • https://maiplestudio.com
  • Find Exhibitors, Speakers and more

  • Carlos Ferrin
  • Encuentra películas y series en plataformas de streaming.

  • Joshua Armstrong
  • Confidential guide on numerology and astrology, based of GG33 Public information

  • Emmet Halm
  • Converts Figma frames into front-end code for various mobile frameworks.

  • Elijah Ng Shi Yi
  • Advanced software engineer GPT that excels through nailing the basics.

  • lumpenspace
  • Take an adjectivised noun, and create images making it progressively more adjective!

  • apappascs
  • Discover the most comprehensive and up-to-date collection of MCP servers in the market. This repository serves as a centralized hub, offering an extensive catalog of open-source and proprietary MCP servers, complete with features, documentation links, and contributors.

  • ShrimpingIt
  • Micropython I2C-based manipulation of the MCP series GPIO expander, derived from Adafruit_MCP230xx

  • OffchainLabs
  • Go implementation of Ethereum proof of stake

  • modelcontextprotocol
  • Model Context Protocol Servers

  • huahuayu
  • A unified API gateway for integrating multiple etherscan-like blockchain explorer APIs with Model Context Protocol (MCP) support for AI assistants.

  • Mintplex-Labs
  • The all-in-one Desktop & Docker AI application with built-in RAG, AI agents, No-code agent builder, MCP compatibility, and more.

    Reviews

    5 (1)
    Avatar
    user_9uELQkLW
    2025-04-16

    As a devoted user of MCP applications, I find shadcn-ui-mcp-server to be an exceptional addition to the ecosystem. Created by the talented developer ymadd, this server enhances user experience with its seamless integration and robust functionality. The GitHub link provides comprehensive documentation for easy setup and usage. Highly recommend this for anyone looking to elevate their MCP application!