Vibe Design System MCP Server

What is Vibe Design System?

Vibe Design System is a collection of official monday.com UI resources for application development in React.js. It includes an MCP (Model Context Protocol) server that provides intelligent assistance for discovering component APIs, getting usage examples, finding appropriate icons, and following best practices.

How to use Vibe Design System?

Install the core library via npm install @vibe/core or yarn add @vibe/core, then import the CSS tokens in your root file. Components like Button are imported from @vibe/core. For MCP integration, follow the installation instructions in the @vibe/mcp documentation to connect with your preferred AI development tools.

Key features of Vibe Design System

• Core component library for React.js applications
• MCP server for intelligent component assistance
• Icons library (@vibe/icons)
• Testing utilities for Playwright (@vibe/testkit)
• Codemods and CLI tools (@vibe/codemod)
• Styling foundations included in @vibe/core

Use cases of Vibe Design System

• Building monday.com-compatible UIs with consistent design
• Rapidly prototyping React applications using pre-built components
• Discovering component APIs and usage examples via AI tools
• Migrating between major versions with codemod tooling