shadcn-ui-mcp-server

Overview

The shadcn-ui-mcp-server is a comprehensive Model Context Protocol server that provides AI assistants with direct access to shadcn/ui v4 component libraries. It supports multiple frameworks including React (with Radix UI or Base UI), Svelte 5, Vue, and React Native, allowing AI tools to retrieve component source code, demos, blocks, and metadata. The server features GitHub API integration with smart caching, support for Server-Sent Events transport, and Docker containerization for production deployments.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

• list_components

  List all available shadcn/ui components

  Try:Show me all available componentsTry:What components can I use?
• get_component

  Retrieve detailed information about a specific shadcn/ui component

  Try:Get details about the button componentTry:Tell me about the card component
• get_block

  Retrieve complete implementation of shadcn/ui blocks

  Try:Show me a dashboard block implementationTry:Get a login form block
• search_components

  Search components by name or keywords

  Try:Search for components related to formsTry:Find components for data display
• get_component_code

  Get the source code for a specific component

  Try:Show me the source code for the button componentTry:Get implementation details for the select component
• get_component_demos

  Retrieve usage demos and examples for a component

  Try:Show me demos for the input componentTry:Get examples of the dialog component
• get_dependencies

  Get the dependency information for a specific component

  Try:What dependencies does the button component need?Try:Show required packages for the table component
• browse_repository

  Browse the repository structure of shadcn/ui components

  Try:Show me the repository structureTry:List all component directories
• get_configuration

  Get configuration details for the shadcn/ui setup

  Try:Show the components.json configurationTry:Get tailwind config settings
• compare_frameworks

  Compare component implementations across different frameworks

  Try:Compare button component across React and VueTry:Show button implementation in Svelte

Note: Tool names inferred from documentation and features described. Actual tool names and signatures not explicitly documented in README.

Comparable tools

Installation

# Basic usage
npx @jpisnice/shadcn-ui-mcp-server

# With GitHub token (recommended)
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Framework-specific
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "YOUR_TOKEN"]
    }
  }
}

FAQ

Which shadcn/ui frameworks are supported?

The server supports React (default), Svelte 5, Vue, and React Native implementations. For React, you can choose between Radix UI (default) and Base UI.

How do I increase the GitHub API rate limit?

Use a GitHub personal access token with the --github-api-key flag to increase from 60 requests/hour to 5000 requests/hour.

Compare shadcn-ui-mcp-server with