SuperAPI AI Directory
Partner with us中文AI newsFavorites
All toolsAI codingshadcn-ui-mcp-server

shadcn-ui-mcp-server

Access shadcn/ui v4 components, blocks, demos and metadata.

Open website

About this tool

Purpose

shadcn-ui-mcp-server is a Model Context Protocol (MCP) server whose goal is to give AI assistants (LLMs) context about shadcn/ui component structure, usage, and installation methods, thereby integrating shadcn/ui components into AI workflows. It targets scenarios using AI-assisted development, helping AI generate component code with the correct dependencies.

Main Capabilities

  • Multi-framework support: Provides retrieval for four shadcn implementations: React, Svelte, Vue, and React Native.
  • Component source code: Fetches the latest shadcn/ui v4 TypeScript source code.
  • Component examples: Provides example implementations and usage patterns.
  • Block support: Provides complete block implementations (such as dashboards, calendars, forms).
  • Metadata access: Fetches dependencies, descriptions, and configuration details.
  • Directory browsing: Can explore the repository structure.
  • Smart caching: Integrates the GitHub API and handles rate limits; list and read results carry protocol cache hints (ttlMs / cacheScope).
  • Parameter completion: Provides autocompletion for prompts and resource template parameters (component names, package managers, build tools, etc.).
  • Streamable HTTP transport: Provides a stateless /mcp endpoint for multi-client deployments (MCP specification 2026-07-28).
  • Docker ready: Provides production-ready containerization and Docker Compose.

Usage

One-click install (Claude Desktop): Download shadcn-ui-mcp-server.mcpb from Releases, double-click the file, Claude Desktop will open automatically, enter a GitHub token (optional, to raise rate limits), click Install and the tools are ready to use. Manual installation path: Claude Desktop → Settings → MCP → Add Server → Browse → select the .mcpb file.

HTTP transport and Docker deployment: The server implements the 2026-07-28 MCP specification (via MCP TypeScript SDK v2) and is compatible with 2025-era clients. In addition to stdio, it can serve Streamable HTTP on a single stateless /mcp endpoint for multi-client and production deployments. Transport modes include: stdio (default, for CLI), http (serves Streamable HTTP at /mcp), dual (supports both stdio and HTTP). The legacy SSE transport (/sse + /message) has been removed; --mode sse is still accepted as a deprecated alias for http.

Environment variables: MCP_TRANSPORT_MODE (transport mode stdio|http|dual), MCP_PORT (HTTP port, default 7423), MCP_HOST (bind host, default 0.0.0.0), MCP_CORS_ORIGINS (CORS origins, comma-separated), MCP_PROTOCOL (accepted protocol eras: any is the default, including 2026-07-28 and 2025-era fallback; modern is 2026-07-28 only; CLI argument --protocol), GITHUB_PERSONAL_ACCESS_TOKEN (GitHub API token), UI_LIBRARY (UI primitive library: radix is the default, or base, React only).

Editor integration: Provides integration instructions for Autohand Code, Claude Code, VS Code, Cursor, Claude Desktop, and Continue.dev. Autohand Code can add this MCP server via CLI; adding --scope project before shadcn saves the server to the current project's .autohand configuration instead of the user configuration. Claude Code supports quick CLI addition; production deployments can use the Streamable HTTP transport, and framework-specific commands are provided for React, Svelte, Vue, and React Native.

Building from source: Requires Node.js >= 20.0.0. The project includes a manifest.json conforming to the MCPB specification; the .mcpb file is a ZIP archive containing the server, dependencies, and configuration.

Applicable Scenarios

  • AI-assisted development: Lets AI assistants use shadcn/ui builds UI.
  • Multi-client deployment: stateless HTTP transport scales horizontally without sticky sessions.
  • Production environment: Docker Compose ready, with health checks and monitoring.
  • Component discovery: explore available components and their usage.
  • Multi-framework learning: compare React, Svelte, Vue, and React Native implementations.
  • Rapid prototyping: get complete block implementations for dashboards, forms, and more.
  • Code generation: generate component code with correct dependencies.

Limitations

The materials do not provide specific pricing, costs, performance metrics, or guarantees of results. When using the GitHub API, it is recommended to configure a GitHub token to increase the rate limit. The UI_LIBRARY base option applies only to React. The legacy SSE transport has been removed.

Related tools

Browse category