Price Per TokenPrice Per Token
Shadcn UI Component Reference Server

Shadcn UI Component Reference Server

by heilgar

GitHub 22 12 uses
0

About

Shadcn UI Component Reference Server provides integrated access to the shadcn/ui design system for React applications. It enables AI coding assistants to query available components, retrieve documentation, and manage installations directly within development workflows. Key capabilities include: - Browse and discover available shadcn/ui components and pre-built blocks - Retrieve detailed documentation and usage examples for specific components - Install individual components or blocks with automatic package manager detection (npm, pnpm, yarn, bun) - Access component metadata to accelerate UI development This supports developers working with the shadcn/ui component library, streamlining the process of finding, understanding, and integrating UI components into React projects.

README

Shadcn UI MCP Server

A powerful and flexible MCP (Model Control Protocol) server designed to enhance the development experience with Shadcn UI components. This server provides a robust foundation for building and managing UI components with advanced tooling and functionality.

Features

Tools

The MCP server provides a set of tools that can be used through the Model Control Protocol:

  • list-components: Get the list of available shadcn/ui components
  • get-component-docs: Get documentation for a specific component
  • install-component: Install a shadcn/ui component
  • list-blocks: Get the list of available shadcn/ui blocks
  • get-block-docs: Get documentation for a specific block
  • install-blocks: Install a shadcn/ui block
  • Functionality

  • Component Management
  • - List available shadcn/ui components - Get detailed documentation for specific components - Install components with support for multiple package managers (npm, pnpm, yarn, bun)

  • Block Management
  • - List available shadcn/ui blocks - Get documentation and code for specific blocks - Install blocks with support for multiple package managers

  • Package Manager Support
  • - Flexible runtime support for npm, pnpm, yarn, and bun - Automatic detection of user's preferred package manager

    Installation

    Prerequisites

  • Node.js (v18 or higher)
  • npm or yarn package manager
  • 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

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

    Windsurf Configuration

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

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

    Cursor Configuration

    Add this to your .cursor/mcp.json:

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

    Development and Debugging

    Local Development

    1. Install dependencies:
    npm install
    

    2. Build the server:

    npm run build
    

    Debugging

    Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector for debugging:

    npm run inspector
    

    The Inspector will provide a URL to access debugging tools in your browser, allowing you to:

  • Monitor MCP communication
  • Inspect tool calls and responses
  • Debug server behavior
  • View real-time logs
  • Related Projects and Dependencies

    This project is built using the following tools and libraries:

  • Model Context Protocol TypeScript SDK - The official TypeScript SDK for MCP servers and clients
  • MCP Inspector - A debugging tool for MCP servers
  • Cheerio - Fast, flexible, and lean implementation of core jQuery designed specifically for the server
  • License

    MIT License - feel free to use this project for your own purposes.

    Contributing

    Contributions are welcome! Please feel free to submit a Pull Request.

    Related MCP Servers

    AI Research Assistant

    AI Research Assistant

    hamid-vakilzadeh

    AI Research Assistant provides comprehensive access to millions of academic papers through the Semantic Scholar and arXiv databases. This MCP server enables AI coding assistants to perform intelligent literature searches, citation network analysis, and paper content extraction without requiring an API key. Key features include: - Advanced paper search with multi-filter support by year ranges, citation thresholds, field of study, and publication type - Title matching with confidence scoring for finding specific papers - Batch operations supporting up to 500 papers per request - Citation analysis and network exploration for understanding research relationships - Full-text PDF extraction from arXiv and Wiley open-access content (Wiley TDM token required for institutional access) - Rate limits of 100 requests per 5 minutes with options to request higher limits through Semantic Scholar

    Web & Search
    12 8
    Linkup

    Linkup

    LinkupPlatform

    Linkup is a real-time web search and content extraction service that enables AI assistants to search the web and retrieve information from trusted sources. It provides source-backed answers with citations, making it ideal for fact-checking, news gathering, and research tasks. Key features of Linkup: - Real-time web search using natural language queries to find current information, news, and data - Page fetching to extract and read content from any webpage URL - Search depth modes: Standard for direct-answer queries and Deep for complex research across multiple sources - Source-backed results with citations and context from relevant, trustworthy websites - JavaScript rendering support for accessing dynamic content on JavaScript-heavy pages

    Web & Search
    2 24
    Math-MCP

    Math-MCP

    EthanHenrickson

    Math-MCP is a computation server that enables Large Language Models (LLMs) to perform accurate numerical calculations through the Model Context Protocol. It provides precise mathematical operations via a simple API to overcome LLM limitations in arithmetic and statistical reasoning. Key features of Math-MCP: - Basic arithmetic operations: addition, subtraction, multiplication, division, modulo, and bulk summation - Statistical analysis functions: mean, median, mode, minimum, and maximum calculations - Rounding utilities: floor, ceiling, and nearest integer rounding - Trigonometric functions: sine, cosine, tangent, and their inverses with degrees and radians conversion support

    Developer Tools
    22 81