项目简介:

monday.com Vibe设计系统是一个广泛使用的React UI组件库。'@vibe/mcp'是该项目下的一个子包，专门实现了Model Context Protocol (MCP) 服务器。

这个MCP服务器旨在为大型语言模型（LLM）客户端提供标准化的结构化访问接口，使其能够查询Vibe设计系统的组件、图标、文档等资源信息，并获取使用示例或boilerplate代码。通过与此服务器交互，LLM能够更好地理解Vibe设计系统，生成符合规范的UI代码，并为开发者提供辅助。

主要功能点:

该MCP服务器通过提供一系列工具（Tools）来暴露其功能：

列出Vibe公共组件: 获取所有可用的Vibe组件（包括核心库和下一代组件）的名称列表。这有助于LLM了解当前可用的UI构建模块。
获取Vibe组件元数据: 根据指定的组件名称，获取该组件的详细信息，例如它接受的属性（props）、属性类型、默认值等。这使得LLM能够准确地了解如何使用某个组件。
获取Vibe组件示例代码: 根据指定的组件名称，获取其在Vibe Storybook中定义的常见使用示例或boilerplate代码片段。LLM可以使用这些示例来学习或生成具体的实现代码。
列出和搜索Vibe图标: 获取Vibe图标库中的所有图标列表，或者通过关键词搜索特定图标。返回的信息通常包含图标名称、描述、分类和标签，并可选择包含在React中使用的示例代码。

安装步骤:

这个MCP服务器是Vibe设计系统 monorepo 的一部分。要运行它，你需要：

克隆 mondaycom/vibe GitHub 仓库到你的本地。
导航到 'packages/mcp' 目录下。
通常需要在 monorepo 的根目录或 'packages/mcp' 目录下运行 'npm install' 或 'yarn install' 来安装所有依赖。
MCP服务器的入口文件是 'packages/mcp/src/index.ts'。它是一个Node.js脚本。你可能需要构建项目（如运行 'npm build'）将TypeScript编译为JavaScript，或者使用 'ts-node' 等工具直接运行TypeScript文件。构建后的可执行文件通常位于 'packages/mcp/dist/index.js'。

MCP客户端配置:

LLM客户端需要知道如何启动这个MCP服务器进程并与之通信。以下是MCP客户端配置中，用于描述如何启动并连接到此服务器的典型JSON片段示例：

{
  // 服务器的唯一标识名称，用于MCP客户端区分不同的上下文服务器
  "serverName": "@vibe/mcp",
  // 启动MCP服务器进程的命令
  // 例如，如果构建后可执行文件在 packages/mcp/dist/index.js
  "command": "node",
  // 传递给 'command' 的参数列表
  "args": [
    "path/to/your/cloned/vibe/repository/packages/mcp/dist/index.js"
    // 如果服务器需要其他启动参数，它们也会作为字符串元素添加到此数组中
  ],
  // 服务器使用的传输协议。此服务器代码中使用了 StdioServerTransport。
  "transport": "stdio"
  // 客户端可能还会在此处配置服务器暴露的能力 (capabilities) 等
}

注意：'path/to/your/cloned/vibe/repository/' 需要替换为你实际克隆Vibe仓库的本地绝对路径。

基本使用方法:

MCP服务器设计为供支持MCP协议的LLM客户端使用，而非直接由终端用户手动调用。

确保Vibe MCP服务器已正确安装并可执行。
在你的LLM客户端中配置上述JSON信息，使其知道如何启动和连接到Vibe MCP服务器。
启动LLM客户端。客户端会自动根据配置启动Vibe MCP服务器进程，并通过Stdio通道与其建立通信。
LLM客户端现在可以通过调用Vibe MCP服务器暴露的工具（例如 'list-vibe-public-components', 'get-vibe-component-metadata' 等）来获取关于Vibe设计系统的上下文信息。
用户通过与LLM客户端交互（例如输入提示词），间接利用Vibe MCP服务器提供的能力，例如让LLM根据需求生成使用Vibe组件的React代码。

关键词

信息