Skip to main content
Glama

shadcn-ui MCP Server

by ymadd

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:

  • The official shadcn/ui documentation site (https://ui.shadcn.com)
  • The shadcn/ui GitHub repository

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.

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

AI アシスタントが、コンポーネントの詳細、使用例、検索機能に関する参照情報を提供する TypeScript ベースの MCP サーバーを通じて shadcn/ui コンポーネントのドキュメントと例にアクセスできるようにします。

  1. 特徴
    1. ツール
    2. 機能性
  2. 発達
    1. インストール
      1. クロードデスクトップ構成
      2. ウィンドサーフィンの構成
      3. カーソルの設定
      4. デバッグ

    Related MCP Servers

    • A
      security
      A
      license
      A
      quality
      An MCP server implementation that provides tools for retrieving and processing documentation through vector search, enabling AI assistants to augment their responses with relevant documentation context
      Last updated -
      7
      18
      219
      MIT License
    • A
      security
      A
      license
      A
      quality
      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.
      Last updated -
      6
      862
      11
      MIT License
      • Apple
    • A
      security
      A
      license
      A
      quality
      Provides reference information for shadcn/ui components through a Model Context Protocol server that helps AI assistants access component documentation and examples.
      Last updated -
      4
      416
      MIT License
      • Apple
    • A
      security
      A
      license
      A
      quality
      A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation
      Last updated -
      7
      4,974
      1,947
      MIT License

    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/ymadd/shadcn-ui-mcp-server'

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