webcomponents-react-mcp-server

用于 React 的 UI5 Web Components MCP 服务

为 UI5 Web Components for React 提供开发辅助和 API 文档的 MCP 服务。

这是什么？

此 MCP 服务可让 AI 助手直接访问 UI5 Web Components for React 的文档、组件 API 和实用工具信息。它帮助开发者获取准确、最新的库信息，无需离开 IDE。

设置

此服务已收录在 MCP Registry 中，兼容的客户端可直接安装。

Claude Code

claude mcp add ui5-wcr -- npx @ui5/webcomponents-react-mcp@latest

VS Code / Cursor

添加到 .vscode/mcp.json：

{
  "servers": {
    "ui5-wcr": {
      "command": "npx",
      "args": ["@ui5/webcomponents-react-mcp@latest"]
    }
  }
}

固定特定版本

此 MCP 服务自 @ui5/[email protected] 起提供。它与库使用相同的版本号，并打包了对应版本的文档和 API 数据。固定版本以匹配项目版本，可确保 AI 助手为你实际使用的组件和 API 提供准确信息。

追加 @<version> 以安装特定版本。请注意，更新 @ui5/webcomponents-react 后，也需要相应更新固定的 MCP 服务版本。

npx @ui5/[email protected]

若要与项目中安装的 @ui5/webcomponents-react 版本匹配，请在项目根目录运行：

这要求项目的 node_modules 中已安装 @ui5/webcomponents-react。

npx @ui5/webcomponents-react-mcp@$(node -p "require('@ui5/webcomponents-react/package.json').version")

传输方式

此服务支持两种传输方式。两者都在开发者的计算机上本地运行。

stdio（默认）

上述 设置 配置使用此方式。客户端会将服务作为子进程启动，并通过 stdin/stdout 通信。无需任何标志。

HTTP（流式 HTTP）

某些 MCP 客户端改用 HTTP 连接。使用 --http 标志启动服务，以启用 流式 HTTP 传输方式：

npx @ui5/webcomponents-react-mcp@latest --http

服务监听 http://localhost:7427/mcp。使用 --port（或 PORT 环境变量）更改端口：

npx @ui5/webcomponents-react-mcp@latest --http --port 7500

它以无状态方式运行，且仅绑定到 localhost — 可通过本地 HTTP 端口访问，但除此之外，与 stdio 模式一样，仍是仅限本地且版本固定的服务。将基于 HTTP 的客户端指向此端点：

{
  "servers": {
    "ui5-wcr": {
      "url": "http://localhost:7427/mcp"
    }
  }
}

功能

工具

1. create_app - 使用官方模板搭建新应用

   • Vite（TypeScript）、Next.js App Router、Next.js Pages Router
   • 使用 degit 返回分步设置说明

2. list_components - 浏览所有可用组件

   • 按类别筛选（数据展示、布局与平面图、输入、模态框与弹出框、用户反馈、图表、AI 组件、Web 组件）
   • 按软件包筛选（@ui5/webcomponents-react、@ui5/webcomponents-react-charts、@ui5/webcomponents-ai-react）
   • 包含说明和导入示例

3. get_component_api - 完整的组件 API 文档

   • Props，包括 TypeScript 类型、说明和默认值
   • 事件详情参数（e.detail 中的可用字段）
   • Ref 方法和返回类型
   • 用于设置 Shadow DOM 样式的 CSS ::part() 选择器
   • 复杂 Props 的子类型文档（例如 AnalyticalTable 列定义）
   • 包含复杂行为逻辑的组件的上游文档链接
   • 组件名称匹配时不区分大小写
   • 返回结构化 JSON 输出

4. get_documentation - 文档、指南和知识库

   • 按章节名称浏览，或按关键字搜索所有文档
   • 入门指南、知识库（样式、i18n、SSR、插槽、FAQ、无障碍等）、项目模板
   • 从打包的本地文件中读取完整内容（无需联网）
   • 支持按行范围获取内容（startLine/endLine），适用于较长文档

5. get_public_utils - 来自 @ui5/webcomponents-react-base 的公共工具

   • Device API（设备检测、响应式断点、调整大小/方向变化处理程序）
   • useI18nBundle hook（国际化）
   • useViewportRange hook（响应式断点检测）
   • ThemingParameters（JavaScript 中的 CSS 变量）

资源

• llms.txt - 面向 LLM 的文档索引，包含范围、关键概念和快速参考链接

用法

配置完成后，你的 AI 助手即可使用这些工具。你可以提出以下问题：

创建：

• “使用 UI5 Web Components for React 创建一个新的 Vite 应用”
• “搭建一个带有简单仪表板的 Next.js 应用”

文档：

• “如何设置组件样式？”
• “插槽是如何工作的？”

组件：

• “列出所有可用组件”
• “显示图表组件”
• “有哪些布局组件？”
• “显示 AnalyticalTable 的 API”
• “如何使用 DynamicPage 组件？”

贡献

开发环境设置、脚本、架构和构建流水线的详细信息，请参阅 CONTRIBUTING.md。