Shadcn Vue MCP Server

by HelloGGX

GitHub 107 4,381 uses Remote

About

Shadcn Vue MCP Server is an AI-powered tool that generates modern Vue.js UI components from natural language descriptions. Key capabilities: - Instantly creates production-ready Vue components using the shadcn-vue component library and TailwindCSS styling - Generates accessible (A11y), responsive UI elements following Vue.js best practices and coding standards - Integrates directly with mainstream IDEs to streamline the UI development workflow without context switching - Provides intelligent component selection and recommendations from the shadcn-vue ecosystem - Handles boilerplate code, component states, and complex interaction logic automatically

Tools 5

requirement-structuring

analyze the user's natural language and structure the requirements into a clear and structured component requirement document. Use this tool when the user requests a new UI component—e.g., mentions /ui, or asks for a button, input, dialog, table, form, banner, card, or other Vue component

components-filter

filter components with shadcn/ui components and tailwindcss, Use this tool when mentions /filter

component-usage-doc

read usage doc of a component， Use this tool when mentions /doc.

component-builder

Retrieve documentation for all filtered components and charts to prepare for component generation, This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase.

component-quality-check

Automatically check Vue component quality and provide detailed feedback. Use this tool when you need to validate component quality, accessibility, performance, and best practices compliance. or when mentions /check.

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)

[](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.

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

Related MCP Servers

AI Research Assistant

hamid-vakilzadeh

AI Research Assistant provides comprehensive access to millions of academic papers through the Semantic Scholar and arXiv databases. This MCP server enables AI coding assistants to perform intelligent literature searches, citation network analysis, and paper content extraction without requiring an API key. Key features include: - Advanced paper search with multi-filter support by year ranges, citation thresholds, field of study, and publication type - Title matching with confidence scoring for finding specific papers - Batch operations supporting up to 500 papers per request - Citation analysis and network exploration for understanding research relationships - Full-text PDF extraction from arXiv and Wiley open-access content (Wiley TDM token required for institutional access) - Rate limits of 100 requests per 5 minutes with options to request higher limits through Semantic Scholar

Web & Search

12 8

Linkup

LinkupPlatform

Linkup is a real-time web search and content extraction service that enables AI assistants to search the web and retrieve information from trusted sources. It provides source-backed answers with citations, making it ideal for fact-checking, news gathering, and research tasks. Key features of Linkup: - Real-time web search using natural language queries to find current information, news, and data - Page fetching to extract and read content from any webpage URL - Search depth modes: Standard for direct-answer queries and Deep for complex research across multiple sources - Source-backed results with citations and context from relevant, trustworthy websites - JavaScript rendering support for accessing dynamic content on JavaScript-heavy pages

Web & Search

2 24

Math-MCP

EthanHenrickson

Math-MCP is a computation server that enables Large Language Models (LLMs) to perform accurate numerical calculations through the Model Context Protocol. It provides precise mathematical operations via a simple API to overcome LLM limitations in arithmetic and statistical reasoning. Key features of Math-MCP: - Basic arithmetic operations: addition, subtraction, multiplication, division, modulo, and bulk summation - Statistical analysis functions: mean, median, mode, minimum, and maximum calculations - Rounding utilities: floor, ceiling, and nearest integer rounding - Trigonometric functions: sine, cosine, tangent, and their inverses with degrees and radians conversion support

Developer Tools

22 81