This project provides a Model Context Protocol (MCP) server designed to give AI assistants deep context about shadcn/ui components. It enables tools like Continue.dev, Cursor, and Claude Desktop to access component source code, demos, blocks, and metadata, significantly enhancing AI-powered UI development and learning.

How It Works

The server acts as a bridge, fetching data directly from the shadcn/ui (React) or shadcn-svelte (Svelte) GitHub repositories. It leverages the GitHub API for efficient data retrieval and caching, supporting various MCP tools for component source code, demos, blocks, and metadata. This approach allows AI models to understand and generate code based on real-world component implementations.

Quick Start & Requirements

• Install/Run: npx @jpisnice/shadcn-ui-mcp-server
• Prerequisites: Node.js 18+ (for npx). A GitHub Personal Access Token is highly recommended for increased API rate limits (5000/hour vs. 60/hour).
• Setup Time: Instantaneous via npx.
• Docs: shadcn-ui-mcp-server

Highlighted Details

• Supports both React (shadcn/ui) and Svelte (shadcn-svelte) frameworks via a --framework flag.
• Integrates with popular AI development tools like Continue.dev, Cursor, Claude Desktop, and VS Code extensions.
• Provides specific tools for AI interaction: get_component, get_component_demo, list_components, get_component_metadata, get_block, list_blocks, get_directory_structure.

Maintenance & Community

The project is maintained by Jpisnice. Links to support, discussions, documentation, and the npm package are available in the README.

Licensing & Compatibility

Licensed under the MIT License, permitting commercial use and integration with closed-source projects.

Limitations & Caveats

Without a GitHub API token, users are subject to strict API rate limits (60 requests/hour), which can hinder frequent or extensive usage. The project relies on the stability and structure of the shadcn/ui and shadcn-svelte GitHub repositories.