A powerful AI Agent tool that helps developers instantly create high-quality UI components
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.
❌ 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 suitableshadcn-vue
components.✅ High-Quality Code Auto-Generation:
component-builder
automatically generates high-quality Vue component code that complies withshadcn-vue
andtailwindcss
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:
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.
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.
👥 Community & Support
Discord Community - Join our active community
📝 License
Licensed under the Apache 2.0 License.
remote-capable server
The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.
Tools
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
Related MCP Servers
- -securityAlicense-qualityMCP server for querying the Shodan API and Shodan CVEDB. This server provides tools for IP lookups, device searches, DNS lookups, vulnerability queries, CPE lookups, and more.Last updated -79477MIT License
- AsecurityAlicenseAqualityHelps AI assistants access shadcn/ui component documentation and examples through a TypeScript-based MCP server that provides reference information for component details, usage examples, and search capabilities.Last updated -427260MIT License
- -securityFlicense-qualityThis is a Model Context Protocol (MCP) server that provides access to the Shodan API. It allows you to programmatically query Shodan for information about devices, vulnerabilities, and more.Last updated -1
- -securityAlicense-qualityMCP server that helps AI models understand Vite/Nuxt applications better, available as both a Nuxt module and Vite plugin.Last updated -MIT License