What is the Vibe MCP server?
The Vibe MCP server is the @vibe/mcp package in monday.com's Vibe Design System repo. It runs locally over stdio with npx and gives your agent seven tools for Vibe React components, accessibility guidance, icons, design tokens and Vibe 2 to Vibe 3 migration checks.
Vibe is monday.com's official React design system. Its repo includes an MCP server, published as @vibe/mcp, that helps an AI coding agent discover component APIs, get usage examples, find icons, read design tokens and follow best practices.
It is a documentation and metadata server for the design system, not a component installer. Your agent asks it what a Vibe component accepts, then writes React code that matches the real API. For registry-style installs, see the shadcn MCP server.
What it changes in your workflow
- The agent lists public Vibe components and reads the metadata for any one of them.
- It gets React usage examples and accessibility requirements pulled from component documentation.
- It searches Vibe icons by text, category or tag, and reads design tokens from the style package.
- It checks a project for Vibe 2 to Vibe 3 breaking changes and produces the migration commands.
Who it is for
Best for
- Apps and monday.com integrations built with the Vibe React library.
- Teams migrating from Vibe 2 to Vibe 3, who get a project analysis from one tool.
- Developers who want accessibility rules in the loop while an agent writes components.
Not for
- Projects that do not use Vibe. The data is specific to this design system. For token extraction from other sites see Dembrandt MCP.
- Registry installs of third-party components. Use the 21st MCP or the shadcn server for that.
Use it with UiChemy
Vibe covers React apps on monday.com's design system. UiChemy covers the WordPress side. Composer is a visual editor for Elementor or Gutenberg, and AI to WordPress imports an existing AI build as an editable page. Click Get Started on uichemy.com.
Connect Vibe MCP Server: monday.com Design System for Agents to your AI client
npx @vibe/mcpOpen your MCP config
For Cursor this is ~/.cursor/mcp.json, which you create if it does not exist. For VS Code it is .vscode/mcp.json.
Add the server
Paste the config above. In VS Code the top-level key is servers instead of mcpServers, and the README adds the -y flag to the args.
Or use the one-click link
The README offers an install deeplink for Cursor and a vscode:// link for VS Code.
Restart the client
Reload the client so it starts the server.
Try a prompt
Ask the agent to list Vibe components, then get the examples and accessibility notes for the Button component.
Client configuration
{
"mcpServers": {
"vibe": {
"command": "npx",
"args": ["@vibe/mcp"]
}
}
}Endpoints and ports
npx @vibe/mcpStarts the server over stdio. Your client normally runs it.https://github.com/mondaycom/vibe/blob/master/packages/mcp/README.mdSetup and tool reference.https://vibe.monday.comComponent documentation and Storybook catalog.What you can do with it
- Component metadataThe agent reads the real API of a Vibe component before it writes the JSX.
- Usage examplesReact examples and patterns for specific components come straight from the design system.
- Accessibility guidanceStructured requirements are extracted from component documentation and returned as data.
- Icon searchIcons can be filtered by text query, category or tags, with optional React usage examples.
- Design token lookupToken names, values and categories come from the style package, with optional CSS usage.
- Migration analysisThe v3 tool checks a project against the official migration guide and generates the commands to fix breaking changes.
- Runs locallyThe server starts with npx and needs no account, per the package README.
Tools it exposes
get-vibe-component-metadata
Returns metadata for one Vibe component, or for all components if no name is given.
list-vibe-public-components
Lists the names of all public @vibe/core and @vibe/core/next components.
get-vibe-component-examples
Returns React usage examples and patterns for specific or all components.
get-vibe-component-accessibility
Returns structured accessibility requirements extracted from component docs.
list-vibe-icons
Lists icons from @vibe/icons with descriptions, categories and tags. Filters by query, category or tags and can include React usage.
list-vibe-tokens
Lists design tokens from @vibe/style with names, values, categories and files. Filters by query or category and can include CSS usage.
v3-migration
Evaluates a project for Vibe 2 to Vibe 3 migration needs and generates the commands to resolve breaking changes.
Frequently asked questions
What is the Vibe MCP server?
It is the MCP server in monday.com's Vibe Design System repo, published as @vibe/mcp. It gives an AI coding agent component metadata, usage examples, accessibility guidance, icon and token lookup, and a Vibe 2 to Vibe 3 migration analysis.
How do I set up the Vibe MCP server?
Add an entry with command npx and args @vibe/mcp to your client's MCP config, such as ~/.cursor/mcp.json for Cursor or .vscode/mcp.json for VS Code, then restart the client. The README also offers one-click install links.
Which AI coding agents work with it?
The package README gives setup for Cursor and VS Code. Any other MCP client that can launch a stdio command should work with the same npx entry, but the README does not confirm that.
Does it install components into my project?
No. It supplies metadata, examples, accessibility notes, icons, tokens and migration guidance. You add the @vibe/core package yourself and import its tokens file, as the main README describes. That keeps installs under your own control, and the server only advises.
Can it help me upgrade from Vibe 2 to Vibe 3?
Yes. The v3-migration tool evaluates your project against the official migration guide, identifies breaking changes and generates the commands to resolve them. The main README now points to Vibe 4 as the actively maintained line.
Is there a license?
GitHub reports no license for the repository, but the MCP package manifest in the repo declares MIT. Check the repo yourself before relying on it commercially. The license question matters most if you plan to redistribute or embed the code in a product.
Is it only for monday.com apps?
It is for any React app that uses the Vibe component library. The components, icons and tokens it serves are Vibe's, so it adds little to projects built on other design systems such as shadcn/ui.