MCP 服务器

shadcn-vue-mcp

Shadcn-vue MCP Server is a powerful AI-driven tool that helps developers instantly create beautiful, modern UI components through natural language descriptions. It integrates the shadcn-vue component library and tailwindcss, seamlessly connects with mainstream IDEs, and provides a streamlined UI dev

README

<br />

A powerful AI Agent tool that helps developers instantly create high-quality UI components

<div align="center"> 🌐 Available Languages: <a href="./docs/README-zh-CN.md"><img src="https://img.shields.io/badge/docs-中文版-yellow" alt="中文文档"></a> </div>

</div>

❌ Without shadcn-vue MCP

Developers face multiple challenges when building UI components:

❌ Tedious Development Workflow: Constantly switching between the IDE, official documentation, and browser severely impacts development efficiency and focus.
❌ Difficulty in Component Selection: Faced with numerous components from shadcn-vue, developers struggle to quickly find the best fit for their needs without intelligent recommendations.
❌ High Repetitive Workload: Involves manually writing extensive boilerplate code and handling various component states and complex interaction logic.
❌ Insufficient Quality Assurance: It's easy to overlook quality standards like accessibility (A11y), performance optimization, and best coding practices, leading to inconsistent component quality.
❌ High Maintenance Costs: As the project grows, manually maintaining the style, behavior, and dependencies of all components becomes exceptionally difficult, making consistency hard to achieve.

✅ With shadcn-vue MCP

shadcn-vue MCP provides an intelligent UI component development experience that revolutionizes the traditional workflow:

✅ One-Stop Development Experience: Complete the entire process—from component selection and coding to preview—without ever leaving your editor, simply by describing your needs in natural language.
✅ Intelligent Component Recommendation: The components-filter tool intelligently analyzes your requirements and recommends the most suitable shadcn-vue components.
✅ High-Quality Code Auto-Generation: component-builder automatically generates high-quality Vue component code that complies with shadcn-vue and tailwindcss standards, with best practices built-in.
✅ Built-in Quality Assurance: component-quality-check automatically performs accessibility (A11y) and code quality checks on the generated code, ensuring professional-grade components.
✅ Instant Documentation and Previews: component-usage-doc provides real-time component documentation, APIs, and usage examples to get you started immediately.
✅ Ensures High Design Consistency: All generated components strictly adhere to a unified design specification, ensuring visual and interactive consistency across the entire application and enhancing brand value.

🌟 Features

Natural Language Descriptions:
- AI-Powered UI Generation: Create UI components by describing them in natural language
Multi-IDE Support:
- Cursor IDE integration for seamless workflows.
- Trae support for advanced AI-driven development.
- VSCode support for a robust coding experience.
- VSCode + Cline integration (Beta) for enhanced collaboration.
Modern Component Library:
- Built on the shadcn-vue component library and tailwindcss for modern, responsive designs.
TypeScript Support:
- Full TypeScript support ensures type-safe and scalable development.
Intelligent Documentation Query:
- Real-time access to detailed shadcn-vue component documentation with integrated previews of usage and best practices.
Component Enhancement:
- Accessibility: WCAG 2.1 compliant, keyboard navigation, ARIA support
- Performance: Code splitting, tree shaking, optimized bundles
- Consistency: Unified design system, consistent behavior patterns
- Maintainability: Clean code architecture, well-documented components
- Developer Experience: TypeScript support, hot reload, intuitive APIs

🚀 Getting Started

Prerequisites

Before you begin, ensure you have Node.js installed on your system.

Recommended Node.js version: 18.20.1 or later.

Using a different version might lead to installation errors like Error: spawnSync code-insiders.cmd EINVAL. Downgrading or upgrading to the recommended version is the best solution.

Qucik install: URL Quick Installation for copilot

First, you need to obtain a unique connection URL from the Smithery service that contains your personal credentials. Visit the shadcn-vue-mcp page on Smithery.

Step 1. Click the Generate URL button on the page.:

The system will generate a unique URL for you, which includes an API key for authentication. Copy this entire URL.

Step 2. Open vscode, open copilot and select Agent model, Next, add the URL you just obtained to your IDE's MCP configuration file.

In your IDE project, find or create the configuration file named mcp.json.
Add or merge the following JSON object into the servers field of that file.

Step 3: for vscode IDE, Select Add Server

Step 4: choose HTTP(HTTP or Server-Sent Events)

Step 5: paste the URL

Step 6: config like this:

{
  "servers": {
    "shadcn-vue-mcp": {
      "url": "https://server.smithery.ai/@HelloGGX/shadcn-vue-mcp/mcp?api_key=xxxx&profile=linguistic-landfowl-TWeEt8"
    }
  }
}

Config file locations:

Cursor: ~/.cursor/mcp.json
Trae: ~/.Trae/mcp.json
Cline: ~/.cline/mcp_config.json
Claude: ~/.claude/mcp_config.json

🛠️ Tool List & Core Features

Component Generation Tools

requirement-structuring
- Analyzes natural language requirements
- Converts user needs into structured JSON format
- Considers core functionality and essential features
- Built-in user interaction and edge case analysis

Documentation & Analysis Tools

component-usage-doc
- Real-time access to shadcn-vue component documentation
- Interactive preview of component variants
- Built-in markdown rendering in browser
- Detailed API and usage examples

Component Filtering & Management

components-filter
- Smart component recommendation system
- Supports multi-language description parsing
- Component relationship analysis
- Usage frequency statistics and weighting

Code Quality & Testing

component-quality-check
- Automated code quality assessment
- A11y (Accessibility) compliance checking
- Performance optimization suggestions
- Best practices validation

Smart Code Generation

component-builder
- AI-powered component generation
- shadcn-vue and Tailwind CSS integration
- TypeScript type safety
- Built-in best practices implementation

Result Example

User: /ui create a flight display component

AI: Generated code as follows:

UI Component Example

User: /check

AI: alt text