https://github.com/HelloGGX/shadcn-vue-mcp
Shadcn-vue and Tailwind CSS are essential for component development, offering developers a fast and high-quality experience in Vue component development.
https://github.com/HelloGGX/shadcn-vue-mcp
Last synced: 5 days ago
JSON representation
Shadcn-vue and Tailwind CSS are essential for component development, offering developers a fast and high-quality experience in Vue component development.
- Host: GitHub
- URL: https://github.com/HelloGGX/shadcn-vue-mcp
- Owner: HelloGGX
- License: apache-2.0
- Created: 2025-04-05T13:00:45.000Z (3 months ago)
- Default Branch: fast-agent
- Last Pushed: 2025-06-11T05:46:18.000Z (9 days ago)
- Last Synced: 2025-06-11T06:36:15.000Z (9 days ago)
- Language: JavaScript
- Homepage:
- Size: 8.33 MB
- Stars: 32
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- mcp-index - Shadcn-vue MCP Server - A tool designed to instantly create UI components using natural language descriptions while integrating with the shadcn-vue component library and Tailwind CSS. It enhances front-end development through AI-driven code refinement and TypeScript support. (Content Creation)
README
A powerful AI Agent tool that helps developers instantly create high-quality UI components
[](https://GitHub.com/HelloGGX/shadcn-vue-mcp/network/)
[](https://GitHub.com/HelloGGX/shadcn-vue-mcp/stargazers/)
[](https://GitHub.com/HelloGGX/shadcn-vue-mcp/commit/)
[](https://smithery.ai/server/@HelloGGX/shadcn-vue-mcp)
[](https://github.com/HelloGGX/shadcn-vue-mcp/blob/main/LICENSE)
[](https://github.com/HelloGGX/shadcn-vue-mcp/graphs/contributors)
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 development workflow.
๐ Available Languages: 
## โ 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](https://cursor.com) IDE integration for seamless workflows.
- [Trae](https://www.trae.ai/) support for advanced AI-driven development.
- [VSCode](https://code.visualstudio.com/) support for a robust coding experience.
- [VSCode + Cline](https://cline.bot) 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.
### Method 1: CLI Quick Installation
To install shadcn-vue-mcp for all clients automatically via [Smithery](https://smithery.ai/server/@HelloGGX/shadcn-vue-mcp):
- Supported clients: cursor, windsurf, cline, claude, vscode, vscode-insiders
> **Note**: Take vscode as an example: When you select Auto, run the Smithery CLI command in the terminal:
```bash
npx -y @smithery/cli@latest install @HelloGGX/shadcn-vue-mcp --client vscode --profile parental-gayal-aplQPT --key xxxxx
```
You may get an error: Failed to install @HelloGGX/shadcn-vue-mcp
```bash
Error: spawnSync code-insiders.cmd EINVAL
```
**Solution**: Downgrade the Node version to 18.20.1 and rerun
### Method 2: Manual Configuration
Manually configure your AI application (e.g., Claude Desktop) by selecting the JSON option and copying the configuration for your operating system:
**For Mac/Linux:**
```json
{
"mcpServers": {
"shadcn-vue-mcp": {
"command": "npx",
"args": [
"-y",
"@smithery/cli@latest",
"run",
"@HelloGGX/shadcn-vue-mcp",
"--key",
"parental-gayal-aplQPT"
]
}
}
}
```
**For Windows:**
```json
{
"mcpServers": {
"shadcn-vue-mcp": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"@smithery/cli@latest",
"run",
"@HelloGGX/shadcn-vue-mcp",
"--key",
"parental-gayal-aplQPT"
]
}
}
}
```
### Method 3 URL Quick Installation for copilot
You can also install shadcn-vue-mcp via URL.
Step 1. copy the following URL and paste it into the URL field of the Smithery AI application:
Step 2. Open vscode, open copilot and select Agent model
Step 3: Select Add Server
Step 4: choose HTTP
Step 5: paste the URL
Step 6: config like this:
```json
{
"mcp": {
"servers": {
"shadcn-vue-mcp": {
"url": "https://server.smithery.ai/@HelloGGX/shadcn-vue-mcp/mcp?profile=parental-gayal-aplQPT&api_key=xxxxxxx"
}
}
}
}
```
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:
User: /check
AI: 
AI: Generated code as follows:
## ๐ค Contribution Guide
We welcome all forms of contributions! You can help us improve `@agent/shadcn-vue` by:
- **Reporting Bugs:** If you find a bug, please create an issue in our [GitHub repository](https://github.com/HelloGGX/shadcn-vue-mcp/issues).
- **Suggesting Enhancements:** Have an idea for a new feature or an improvement? Let us know by creating an issue.
- **Submitting Pull Requests:** We are happy to review and merge pull requests. Before making significant changes, please open an issue first to discuss your ideas.
The source code is open-sourced on [GitHub](https://github.com/HelloGGX/shadcn-vue-mcp).
## ๐ฅ Community & Support
- [Discord Community](https://discord.gg/82Kf65ut) - Join our active community
## ๐ License
## Licensed under the [Apache 2.0 License](./LICENSE).