mcpserver.so LogoMCPFly
Submit
Shadcn UI MCP Server logo

Shadcn UI MCP Server

by Jpisnice

AI/Integrationshadcn/uiAI AssistantTypeScriptComponent Library

A TypeScript implementation of a Model Context Protocol (MCP) server that helps AI assistants access and work with shadcn/ui components. This server acts as a bridge between AI models and shadcn/ui, enabling assistants to fetch component source code, demos, and installation guides.

View on GitHub

Last updated: N/A

What is Shadcn UI MCP Server?

This MCP server provides tools and resources to help AI assistants interact with shadcn/ui components. It allows AI models to fetch component source code, demo code, installation instructions, and framework-specific guides.

How to use Shadcn UI MCP Server?

To use the server, first install the dependencies with npm install. Then, run the server using the startup.sh script or individual commands like npm run clean, npm run build, and npm run start. The server can be integrated with tools like VS Code Agent Mode by configuring the MCP server URL in settings.json.

Key features of Shadcn UI MCP Server

  • Retrieves shadcn/ui component source code

  • Retrieves component demo code and usage examples

  • Generates installation instructions for shadcn/ui components

  • Provides framework-specific installation guides

  • Implements tools like get_component and get_component_demo

  • Provides resources like resource:get_components

  • Offers resource templates for generating install scripts and guides

Use cases of Shadcn UI MCP Server

  • Integrating shadcn/ui components into AI-powered development workflows

  • Enabling AI assistants to generate code snippets using shadcn/ui components

  • Providing AI-driven support for shadcn/ui component usage

  • Automating the installation and configuration of shadcn/ui components in different frameworks

FAQ from Shadcn UI MCP Server

How do I install the server?

Run npm install to install the necessary dependencies.

How do I start the server?

Use the startup.sh script or run npm run clean, npm run build, and npm run start.

How do I integrate this with VS Code Agent Mode?

Configure the MCP server URL in your VS Code settings.json file under the mcp.servers section.

What if a component is not found?

Check that the component name is correct and exists in the shadcn/ui library. Also, ensure the server has network connectivity to the shadcn/ui GitHub repository.

How do I debug the server?

Use the MCP Inspector at http://127.0.0.1:6274 when running with npm run start to debug request/response flows. Check the console output for error messages.