Vibe MCP
Vibe MCP gives an agent components, icons and tokens of the monday.com Vibe design system
- 692 ★ on the repository
- Last commit
Extended access
Why this level
- Starts from npm through npx and runs on your machine with the editor's permissions
- The migration tools read project files to find Vibe component usage
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/vibe-mcpDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Starts from npm through npx and runs on your machine with the editor's permissions
- The migration tools read project files to find Vibe component usage
This is third-party code. Review the repository files before installing.
What it does
Vibe MCP is a local server for people who build React interfaces with monday.com's Vibe design system. The agent asks it for component metadata from @vibe/core, React usage examples, accessibility requirements, icons from @vibe/icons and tokens from @vibe/style instead of guessing props from memory. Icon and token lists can be narrowed by query text and category. Migration tools help move between Vibe versions. Each one scans the project, finds breaking changes and deprecated components, then returns ready-to-run codemod commands and a report with recommendations. The server starts with npx @vibe/mcp and runs over stdio with no keys or sign-in. Cursor has an install button, and VS Code has a vscode://mcp-server/add link.
Who it is for. For front-end developers who build interfaces on Vibe and ask Cursor, Claude Code or Copilot to pick components, icons and tokens and to drive version upgrades.
Good fit when
- The agent picks a component and must know its real props: get-vibe-component-metadata returns them
- You need a working React example for a button, dialog or dropdown: get-vibe-component-examples
- You must check a component's accessibility requirements before a UI review: get-vibe-component-accessibility
- You need an icon for a word such as calendar or a spacing token: list-vibe-icons and list-vibe-tokens filter by query and category
- The project moves from Vibe 2 to 3, from 3 to 4 or to the new Dropdown and needs a list of breaking changes with codemod commands
Not a fit when
- The project does not use Vibe or @vibe/core: the server knows only this design system
- You need to work with monday.com boards, items and columns: a separate monday.com MCP server does that
- You expect the server to apply a migration itself: it returns codemod commands, and you or the agent run them in the terminal
Example request
I need a button with a loading state built from Vibe components: find the right component, show an example and remind me of the accessibility requirementsMCP
- Transport
- stdio
- Authentication
- not required
Limitations
- Node.js is required because the server starts through npx. It runs locally and asks for no keys or account.
- The server lives in the Vibe design system monorepo and has no repository of its own; the @vibe/mcp package is versioned separately.
- The package README names one migration tool, v3-migration, while the Vibe documentation page adds v4-migration and dropdown-migration, so the tool set depends on the package version.
- It knows only Vibe: components from other design systems and plain HTML are outside its scope.
How to disable. Remove the vibe entry from ~/.cursor/mcp.json or .vscode/mcp.json and restart the editor. The project and the @vibe/core packages stay as they were, because the server installs nothing into them.
FAQ
How do I connect Vibe MCP to Cursor?
Click the Install MCP Server button in the Vibe documentation or add a vibe server to ~/.cursor/mcp.json with the command npx and the arguments -y and @vibe/mcp. After Cursor restarts, tools such as get-vibe-component-metadata appear in chat.
How do I install Vibe MCP in VS Code?
Open the vscode://mcp-server/add link with the ready config from the documentation or create .vscode/mcp.json. In VS Code the top-level key is servers, and the command stays npx -y @vibe/mcp.
How do I migrate a project from Vibe 3 to Vibe 4 with the agent?
Ask the agent to help with the migration and it calls v4-migration. The tool scans the project, finds component usage, flags breaking changes and returns codemod commands with a report. Older versions have v3-migration and the new Dropdown has dropdown-migration.
Which tools does Vibe MCP have?
For components: get-vibe-component-metadata, list-vibe-public-components, get-vibe-component-examples and get-vibe-component-accessibility. For icons list-vibe-icons, for tokens list-vibe-tokens. For migrations v3-migration and, per the documentation, v4-migration and dropdown-migration.
Does Vibe MCP need a monday.com token?
No. The server runs locally through npx, reads design system metadata from its own packages and takes nothing from your monday.com account.
Discussion
No questions or reviews yet.
Related
MCP serversA Vite plugin with an MCP server that shows the agent the components, routes and Pinia stores of a running Vue app
Nuxt MCP Dev
nuxt-mcp-dev / vite-plugin-mcp
A Nuxt module and a Vite plugin start an MCP server on the dev server port so the agent sees config, pages, components, auto-imports and the module graph
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
Inspo
inspo
An MCP server with a reference of real working sites an agent studies for design before writing an interface. Take techniques and do not copy pages
Shadcn UI MCP Server
Shadcn UI v4 MCP Server
An MCP server that gives the agent shadcn/ui component source, demos and blocks for React, Svelte, Vue and React Native
An MCP server and skill for a set of thousands of brand SVG icons: the agent searches and inserts icons with no key
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Vibe MCP (this entry) | yes | not required | 692 | |
| Design System Extractor MCP | no | not required | 72 | pulls components and tokens from any project's Storybook, while Vibe MCP knows only the Vibe design system and drives migrations between its versions |
| Shadcn UI MCP Server | no | key is optional | 3,073 | serves shadcn/ui component sources and demos and has nothing to do with Vibe |
README in short
The @vibe/mcp README begins with an install button for Cursor and a VS Code link with example JSON configs. The tools follow in groups: components, icons, tokens, migration. The MCP page in the Vibe documentation is wider: it has v4-migration and dropdown-migration, example prompts for the agent and a list of benefits.