Shadcn UI MCP Server

What is Shadcn UI MCP Server?

Shadcn UI MCP Server is an open-source MCP server that exposes shadcn/ui components and related resources to AI applications. It enables language models and intelligent agents to programmatically retrieve component source code, view demo usages, and generate installation scripts or framework-specific guides through a standardized interface. This facilitates seamless integration of shadcn/ui component knowledge into AI-driven workflows and code assistants.

How to Configure

Clone the repository to your development environment.
Ensure you have Node.js (v18 or later) and npm installed.
Install dependencies with:
```
npm install
```

Build and start the server using:

bash startup.sh

or same steps individually:

npm run clean
npm run build
npm run start

To enable integration with other applications (e.g., VS Code Agent Mode), configure your client (such as VS Code's settings.json) to connect to the SSE endpoint, e.g.:
```
"mcp": {
    "servers": {
        "shadcnui": {
            "type": "sse",
            "url": "http://localhost:3001/sse"
        }
    }
}
```
Optionally, use the built-in MCP Inspector (by default at http://127.0.0.1:6274) for interactive debugging and server inspection.

How to Use

Start the server and verify it is running (default SSE endpoint at http://localhost:3001/sse).
In your AI tool, IDE, or assistant (such as VS Code with Agent Mode), ensure the MCP server is properly configured as an external tool provider.
Use available commands to:
- List all shadcn/ui UI components
- Fetch the source code of any component (e.g., button, accordion)
- Retrieve demo code and usage examples for components
- Generate package manager-specific installation scripts
- Request framework-specific installation guides
Test API endpoints directly (for developers) using curl, browser, or Inspector UI to verify functionality.
Analyze responses and integrate results into your coding workflow or AI-driven development process.

Key Features

Direct access to the latest shadcn/ui component source code from the official GitHub repository.
On-demand retrieval of demo code and practical component usage examples for rapid prototyping.
Generation of installation instructions tailored to your preferred package manager (npm, yarn, pnpm, bun).
Framework-specific installation guides for supported environments (Next.js, Vite, Remix, and others).
Easy-to-use MCP server with best-practice error handling and extensibility for adding new tools or resources.
Seamless integration with development tools and AI assistants, including VS Code Agent Mode.

Use Cases

AI Coding Assistants: Powering AI tools or chatbots that help developers explore, insert, or modify shadcn/ui components in their codebase.
IDE Integration: Enabling in-editor workflows for fetching component source or demos, and generating installation scripts on-the-fly.
Automated Project Setup: Allowing bots or scripts to programmatically prepare installation steps for specific frameworks and package managers.
Developer Learning Tools: Supplying up-to-date code snippets and guides to educational applications or documentation generators.
AI-driven Code Refactoring: Assisting in component upgrades or migration tasks by providing always-current component source code.

FAQ

Q1: How does the server find the latest version of components?
The server fetches component information directly from the shadcn/ui GitHub repository, using multiple search strategies to adapt to how components are stored or named.

Q2: What should I do if a component name is not found or returns an error?
Double-check the component name as it appears in the official shadcn/ui library. If it still fails, verify the shadcn/ui repo structure or look for any recent renaming or deprecation.

Q3: Can I extend the server to add new tools or resources?
Yes, the server is designed for extensibility. You can add new tools to tools.ts, resources to resources.ts, and resource templates to resource-templates.ts.

Q4: Is this server production-ready?
While robust, this project is designed mainly for local development, experimentation, and assistant integration. If deploying to production, review and harden its security and error handling.

Q5: How do I debug issues with the server or its integration?
Utilize the MCP Inspector at http://127.0.0.1:6274, monitor console logs, and ensure correct network access to both your development environment and the shadcn/ui GitHub repository.

Tool Name	Description
get_component	Retrieves the source code for a specified shadcn/ui component by name (e.g., "button", "accordion"), providing the latest original implementation code fetched from GitHub.
get_component_demo	Fetches a usage demo or example code for a specified shadcn/ui component, showing how to properly implement and use it in a project.
resource:get_components	Returns a current list of all shadcn/ui components available for use, helping users discover what is accessible through the server.
resource-template:get_install_script_for_component	Generates a shell command or script tailored to your chosen package manager (npm, yarn, pnpm, bun) for installing a given shadcn/ui component.
resource-template:get_installation_guide	Provides a detailed, framework-specific guide (for Next.js, Vite, Remix, etc.) on how to install and configure shadcn/ui using your preferred package manager.