vibe

Vibe's MCP server provides intelligent assistance for working with the Vibe design system. It helps you discover component APIs, offers usage examples, suggests appropriate icons, and highlights best practices when building with Vibe in React. The MCP is designed to integrate with AI development tools, enabling you to query component capabilities, retrieve usage snippets, and explore recommended icons or patterns directly from your development environment. To start using it, install the MCP package as described in the repository docs and connect it to your preferred AI tooling or development assistant.

Once running, you can interact with the MCP through your AI tooling or development environment to: retrieve component API surface details, fetch usage examples tailored to Vibe components, discover icons that fit a given component or context, and get guidance on best practices for accessibility, theming, and responsive behavior within Vibe’s design system.

Prerequisites:

• Node.js (recommended LTS, v14+)
• npm or yarn
• Internet access to install packages

Install steps:

1. Ensure you have Node.js and npm installed

   • Check versions:

     node -v
     npm -v
     

2. Install or run the MCP package for Vibe

   • Using npx (no global install required):

     npx -y @mondaycom/vibe-mcp
     

   • Or install via npm globally and then run:

     npm install -g @mondaycom/vibe-mcp
     vibe-mcp
     

3. Verify the MCP server is running and listening on the expected port (default 5000 or as configured by the package).

4. If you plan to connect via your AI tooling, refer to the docs for environment variables and endpoints to integrate with your desk setup.

Tips and common issues:

• Ensure your Node.js version is compatible with the MCP package requirements.
• If you encounter network or package resolution issues, try clearing npm/yarn caches or using a clean environment.
• Common environment variables: VIBE_MCP_LOG_LEVEL (debug, info, warn, error), VIBE_MCP_API_BASE_URL (custom API base if you host locally).
• When integrating with AI tools, verify the MCP endpoint URL and authentication as per your tooling documentation.
• If the MCP package name changes or you upgrade versions, consult the Vibe MCP docs for any breaking changes or required configuration updates.
• For troubleshooting, start the MCP in verbose mode and check logs for API discovery and component metadata requests.