Skip to main content
Glama

Shadcn UI MCP Server

by heilgar

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
  1. 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

This project is built using the following tools and libraries:

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.

Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

A Model Control Protocol server that allows users to discover, install, and manage Shadcn UI components and blocks through natural language interactions in compatible AI tools.

  1. Features
    1. Tools
    2. Functionality
  2. Installation
    1. Prerequisites
    2. Claude Desktop Configuration
    3. Windsurf Configuration
    4. Cursor Configuration
  3. Development and Debugging
    1. Local Development
    2. Debugging
  4. Related Projects and Dependencies
    1. License
      1. Contributing

        Related MCP Servers

        • -
          security
          F
          license
          -
          quality
          A Model Control Protocol server that enables AI assistants to interact with Metabase databases, allowing models to explore database schemas, retrieve metadata, visualize relationships, and execute actions.
          Last updated -
          4
          Python
        • A
          security
          A
          license
          A
          quality
          Helps AI assistants access shadcn/ui component documentation and examples through a TypeScript-based MCP server that provides reference information for component details, usage examples, and search capabilities.
          Last updated -
          4
          352
          56
          JavaScript
          MIT License
          • Apple
        • A
          security
          F
          license
          A
          quality
          A Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.
          Last updated -
          3
          255
          4
          TypeScript
        • -
          security
          F
          license
          -
          quality
          A server that integrates Blender with local AI models via the Model Context Protocol, allowing users to control Blender using natural language prompts for 3D modeling tasks.
          Last updated -
          43
          Python
          • Linux
          • Apple

        View all related MCP servers

        MCP directory API

        We provide all the information about MCP servers via our MCP API.

        curl -X GET 'https://glama.ai/api/mcp/v1/servers/heilgar/shadcn-ui-mcp-server'

        If you have feedback or need assistance with the MCP directory API, please join our Discord server