shadcn-vue-mcp - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #golang #deep-learning #linux #nodejs #java #windows #kubernetes #vue #pytorch #ios #openai

shadcn-vue-mcp

(★ 109)

Shadcn-vue and Tailwind CSS are essential for component development, offering developers a fast and high-quality experience in Vue component development.

File Explorer

Download Latest Version (.zip)

- - component-builder-todolist-en.md
  - component-builder-todolist.md
- - high-quality-ui-component-standards.md
  - quality-dx-acceptance-criteria.md
- - target-users-analysis.md
- check.png
- logo.png
- logo1.png
- README-zh-CN.md
- uiDemo.png
- url.png
- - resources.ts
  - tools.ts
- - callback-server.ts
  - http-server.ts
  - server.ts
- index.ts
.gitignore
Dockerfile
eslint.config.js
LICENSE
package.json
pnpm-lock.yaml
prettier.config.mjs
README.md
smithery.yaml
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/HelloGGX/shadcn-vue-mcp

Downloads the entire project code from GitHub to your computer.

cd shadcn-vue-mcp

Moves into the project folder you just downloaded.

2. Docker

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

docker build -t shadcn-vue-mcp .

Builds a runnable image based on the Dockerfile.

docker run -p 8080:80 shadcn-vue-mcp

Runs the built image as an actual container.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <a href="https://smithery.ai/server/@HelloGGX/shadcn-vue-mcp">
    <img src="https://github.com/HelloGGX/tailwindcss-mcp/raw/fast-agent/docs/logo1.png" alt="shadcnVue MCP Logo" max-height="450">
  </a>

<br />

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

[![GitHub forks](https://img.shields.io/github/forks/HelloGGX/shadcn-vue-mcp.svg?style=social&label=Fork)](https://GitHub.com/HelloGGX/shadcn-vue-mcp/network/)
[![GitHub stars](https://img.shields.io/github/stars/HelloGGX/shadcn-vue-mcp.svg?style=social&label=Star)](https://GitHub.com/HelloGGX/shadcn-vue-mcp/stargazers/)
[![GitHub commits](https://badgen.net/github/commits/HelloGGX/shadcn-vue-mcp)](https://GitHub.com/HelloGGX/shadcn-vue-mcp/commit/)
[![smithery badge](https://smithery.ai/badge/@HelloGGX/shadcn-vue-mcp)](https://smithery.ai/server/@HelloGGX/shadcn-vue-mcp)
[![License](https://img.shields.io/github/license/HelloGGX/shadcn-vue-mcp?colorA=00C586&colorB=000000)](https://github.com/HelloGGX/shadcn-vue-mcp/blob/main/LICENSE)
[![Contributors](https://img.shields.io/github/contributors/HelloGGX/shadcn-vue-mcp?colorA=00C586&colorB=000000)](https://github.com/HelloGGX/shadcn-vue-mcp/graphs/contributors)

[![MseeP.ai Security Assessment Badge](https://mseep.net/pr/helloggx-shadcn-vue-mcp-badge.png)](https://mseep.ai/app/helloggx-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 development workflow.

<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>

<a href="https://glama.ai/mcp/servers/@HelloGGX/shadcn-vue-mcp">
  <img width="380" height="200" src="https://glama.ai/mcp/servers/@HelloGGX/shadcn-vue-mcp/badge" alt="shadcn-vue-mcp MCP server" />
</a>

## ❌ 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.

### 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](https://smithery.ai/server/@HelloGGX/shadcn-vue-mcp).

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

<img src="https://raw.githubusercontent.com/HelloGGX/shadcn-vue-mcp/fast-agent/docs/url.png" width="700" >

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.
1. In your IDE project, find or create the configuration file named mcp.json.
2. Add or merge the following JSON object into the servers field of that file.

Step 3: for vscode IDE, Select Add Server

<img src="https://raw.githubusercontent.com/HelloGGX/shadcn-vue-mcp/main/docs/add_server.png" width="600">

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

<img src="https://raw.githubusercontent.com/HelloGGX/shadcn-vue-mcp/main/docs/choose_mcp_type.png" width="600">

Step 5: paste the URL

Step 6: config like this:

```json
{
  "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](https://github.com/HelloGGX/tailwindcss-mcp/raw/fast-agent/docs/uiDemo.png)

User: /check

AI: ![alt text](https://github.com/HelloGGX/tailwindcss-mcp/raw/fast-agent/docs/check.png)

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).