v0-mcp-ts

The Ultimate Model Context Protocol (MCP) Server for AI-Powered Web Development, designed to bridge the gap between design and code.

v0-mcp-ts is a powerful, high-performance MCP server built with Bun and TypeScript. It integrates directly with v0.dev, a generative UI platform by Vercel, to bring AI-powered design and development to your workflow. Seamlessly generate UI from text prompts, iterate on designs like you would in Figma, and get production-ready code for modern web frameworks.

This server is your copilot for turning ideas into beautiful, functional, and accessible user interfaces.

<p align="center"> <img src="https://raw.githubusercontent.com/Conce-AI/v0.dev/main/assets/v0-mcp-ts-demo.png" alt="v0-mcp-ts Demo" width="800"> </p>

---

✨ Key Features

• 🚀 High-Performance: Built on Bun, providing a 25x faster development experience.
• 🎨 Design-to-Code: Leverages v0.dev to generate UI from text prompts and design iterations.
• 🧩 Component Generation: Create reusable components for React, Vue, Svelte, and more.
• 💅 Styling & Theming: Generate Tailwind CSS layouts and CSS-in-JS themes.
• ♿ Accessibility Audits: Ensure your components are WCAG compliant.
• 🔧 Code Refactoring: Improve existing components with AI-powered suggestions.
• ✅ Type-Safe: Written in TypeScript with strict type checking using Zod.
• 🧪 Comprehensive Testing: Includes a full suite of tests with Vitest.

---

🛠️ Tools Arsenal

This MCP server comes packed with a suite of tools to supercharge your development process:

Tool	Description	Key Features
generate_component	Complete web component generation	React, Vue, Svelte support, TypeScript, Props
generate_shadcn_component	Create components using the shadcn/ui library	Leverages shadcn/ui primitives, variants, custom CSS
generate_tailwind_layout	Generate responsive layouts with Tailwind CSS	Sidebar, Header/Footer, Grid, Flex, Dark Mode
generate_css_theme	Design accessible CSS themes	WCAG AA compliance, CSS Vars, Tailwind Config
refactor_component	Refactor components with best practices	Performance, Accessibility, Typing, Modern Patterns
audit_accessibility	Comprehensive accessibility audit for your code	WCAG compliance, screen-reader, keyboard navigation

---

💡 Prompts for Every Need

Use these prompts to guide the AI in generating exactly what you need:

Prompt	Description	Use Case
component-generator	Generate React components with TypeScript	Create new UI components from scratch.
shadcn-component-generator	Generate components using shadcn/ui	Build complex UIs with a trusted component library.
tailwind-layout-generator	Generate responsive layouts with Tailwind CSS	Scaffold page layouts and responsive designs.
css-theme-generator	Generate accessible CSS themes	Create a consistent design system and color palette.
component-refactor	Refactor React components with best practices	Improve code quality, performance, and accessibility.
accessibility-auditor	Comprehensive accessibility audit tool	Ensure your application is usable by everyone.
webapp-generator	Generate complete web applications	Kickstart a new project with a solid foundation.

---

🚀 Quick Start

1. Prerequisites

• Bun v1.2.0+
• v0.dev API Key
• An MCP Client (e.g., Cursor) =======

Installing via Smithery

To install v0-dev-mcp for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @nicotordev/v0-dev-mcp --client claude

2. Installation

# Clone the repository
git clone https://github.com/Conce-AI/v0.dev.git
cd v0-mcp-ts

# Install dependencies with Bun
bun install

# Run the interactive setup
bun run setup

3. Configuration

Configure your MCP client to connect to the server. Here's an example for Cursor:

// settings.json
{
  "mcp.servers": {
    "v0-mcp-ts": {
      "command": "bun",
      "args": ["run", "dev"],
      "cwd": "/path/to/your/v0-mcp-ts",
      "env": {
        "V0_API_KEY": "your-v0-api-key"
      }
    }
  }
}

---

🎬 Usage Examples

Generate a new Component

{
  "tool": "generate_component",
  "arguments": {
    "component_name": "UserProfileCard",
    "component_description": "A card to display user information with an avatar, name, and bio.",
    "theme": "dark",
    "styling_system": "tailwind"
  }
}

Refactor an existing Component

{
  "tool": "refactor_component",
  "arguments": {
    "code": "/* your existing component code here */",
    "focus_areas": "performance,accessibility"
  }
}

Audit for Accessibility

{
  "tool": "audit_accessibility",
  "arguments": {
    "code": "/* your JSX/HTML code here */",
    "audit_level": "wcag-aa"
  }
}

---

🏗️ Supported Technologies

• Frontend Frameworks: Next.js, React, Vue, Svelte, Angular
• Styling: Tailwind CSS, CSS Modules, Styled Components, Emotion
• Testing: Vitest, Jest, Cypress, Playwright

---

🧪 Development & Testing

# Run development server with hot reload
bun run dev

# Run all tests
bun test

# Run tests with coverage report
bun run test:coverage

# Type-check the codebase
bun run type-check

---

🤝 Contributing

Contributions are welcome! Please see CONTRIBUTING.md for more details.

1. Fork the repository.
2. Create a new feature branch: git checkout -b feature/your-amazing-feature
3. Commit your changes: git commit -m 'Add some amazing feature'
4. Push to the branch: git push origin feature/your-amazing-feature
5. Open a Pull Request.

---

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👨‍💻 Author

Nicolas Torres

• 🌍 Location: Chile
• 🐙 GitHub: @nicotordev
• 💼 LinkedIn: nicotordev
• 🎥 YouTube: NicoTorDev Channel

A Full Stack Developer from Chile, passionate about modern web technologies, AI integration, and building high-performance applications.

---

🌟 Show Your Support

If this project helps you build amazing things, please give it a ⭐ on GitHub!

<p align="center"> <a href="https://github.com/sponsors/nicotordev"> <img src="https://img.shields.io/badge/Sponsor-GitHub-pink?style=for-the-badge&logo=github" alt="GitHub Sponsors"> </a> </p>

---

<p align="center"> _{Built with ❤️ and ⚡ Bun by <a href="https://github.com/nicotordev">Nicolas Torres</a> and Conce AI L.L.C. in Chile 🇨🇱} </p>

---

Note on Legal Entities: Conce AI L.L.C. is a US-based company, while Conce AI spA is the Chilean entity.