MCP Container

shadcn-ui-mcp-server

A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,and vue

GitHub

GitHub Stars

2,161

User Rating

Not Rated

Favorites

0

Views

94

Forks

237

Issues

8

Installation
Difficulty
Advanced
Estimated Time
20-45 minutes

Installation

Installation

Prerequisites

Please specify required software and versions:
Node.js: 18.0.0 or higher
npm: 8.0.0 or higher
Claude Desktop: Latest version

Installation Steps

1. Clone Repository

bash
git clone https://github.com/Jpisnice/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server

2. Install Dependencies

bash
npm install

3. Configure Claude Desktop

Edit claude_desktop_config.json to add the MCP server: 
json
{
  "mcpServers": {
    "shadcn-ui-mcp-server": {
      "command": "node",
      "args": ["path/to/server.js"]
    }
  }
}

4. Start Server

bash
npm start

Troubleshooting

Common Issues

Issue: Server won't start Solution: Check Node.js version and reinstall dependencies. Issue: Not recognized by Claude Desktop Solution: Verify configuration file path and syntax.

Additional Resources

GitHub Repository
Author Information
Jpisnice
Jpisnice
GitHub

0

Followers

0

Repositories

0

Gists

0

Total Contributions

Tags
aimcpmodelcontextprotocolnextjsnpmnpm-packagenpxreactshadcn-uisveltesveltekittstypescriptuivuevuejswebdev
Related MCPs
saiki logo
saiki
203

The Orchestration Engine for AI agents. A toolkit to connect your models, tools, and data into a smart interface to create agentic apps that can think, act and you can talk to. Supports MCP

TypeScript
mcp-ts-template logo
mcp-ts-template
67

A production-grade TypeScript template for building robust Model Context Protocol (MCP) servers, featuring built-in observability with OpenTelemetry, advanced error handling, comprehensive utilities, and a modular architecture.

TypeScript
mirrorlake logo
mirrorlake
4

mirrorlake is a high-functionality development tool built with TypeScript. It features code generation and translation capabilities aimed at enhancing developer productivity. With its intuitive interface and rich set of features, it is suitable for a wide range of users from beginners to advanced developers.

TypeScript