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.

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

Related MCP server: OpenFigma MCP

🛠️ Tools Arsenal

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

💡 Prompts for Every Need

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

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

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