RTaro UI MCP

RTaro UI MCP 是一项独立的 MCP（模型上下文协议）服务，旨在将 RTaro UI 与大模型连接起来。它使大模型能够直接从文档中检索组件、API数据。

介绍

RTaro UI 是基于 Taro 框架的 React UI 组件库，提供丰富的移动端组件。

RTaro UI MCP 是一项独立的 MCP（模型上下文协议）服务，旨在将 RTaro UI 与大模型连接起来。它使大模型能够直接从文档中检索组件、API数据。

特点

• 🚀 直接使用 npx 运行，无需安装
• 📦 无需外部依赖，只需要 Node 环境
• 🔧 支持 Augment、Cursor 等主流AI工具
• 📋 包含81个RTaro UI组件的完整文档

使用方法

Augment 用法

在Augment中使用RTaro UI MCP服务：

1. 打开Augment设置

   • 点击设置图标或使用快捷键
   • 找到 "Model Context Protocol" 或 "MCP" 设置

2. 添加MCP服务器配置

   {
     "mcpServers": {
       "@rtarojs/mcp-rtaro-ui": {
         "command": "npx",
         "args": [
           "-y",
           "@rtarojs/mcp-rtaro-ui"
         ],
         "env": {}
       }
     }
   }

3. 重启Augment

   • 保存配置后重启Augment以加载MCP服务

4. 开始使用

   • 在对话中询问RTaro UI组件相关问题
   • AI会自动调用MCP工具获取组件信息

📖 详细配置指南: 查看 AUGMENT.md 获取完整的Augment配置和使用说明

Cursor 用法

Cursor MCP 使用指南参考：https://docs.cursor.com/context/model-context-protocol#using-mcp-tools-in-agent

{
  "mcpServers": {
    "@rtarojs/mcp-rtaro-ui": {
      "command": "npx",
      "args": [
        "-y",
        "@rtarojs/mcp-rtaro-ui"
      ],
      "env": {}
    }
  }
}

功能特性

• 📋 列出所有可用的 RTaro UI 组件 (81个组件)
• 📖 获取组件的详细文档
• 🔧 获取组件的 API 参数说明
• 💡 获取组件的使用示例
• 🔍 根据关键词搜索组件
• 🚀 获取快速开始指南
• 📚 获取项目介绍文档

可用工具

list-components

列出所有可用的 RTaro UI 组件

get-component-docs

获取指定组件的详细文档

• 参数: componentName (string) - 组件名称，例如: button, input, modal 等

get-component-props

获取指定组件的属性和API文档

• 参数: componentName (string) - 组件名称

get-component-examples

获取指定组件的使用示例和代码

• 参数: componentName (string) - 组件名称

search-components

根据关键词搜索相关组件

• 参数: keyword (string) - 搜索关键词，例如: 按钮, 输入, 表单 等

get-quick-start

获取 RTaro UI 的快速开始指南

get-introduction

获取 RTaro UI 的介绍文档

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 分析文档
npm run analyze

# 测试服务
npm test

发布前准备

在发布新版本前，请确保运行以下命令更新文档：

# 复制最新的组件文档到 metaData
npm run copy-docs

# 构建项目
npm run build

# 检查打包内容
npm pack --dry-run

自动化发布流程

项目配置了自动化的发布流程：

• prebuild: 构建前自动复制最新文档
• prepublishOnly: 发布前自动构建项目
• files 字段确保 metaData 目录被包含在发布包中

直接运行 npm publish 即可，无需手动执行其他命令。

项目结构

packages/rtaro-ui-mcp/
├── src/                    # 源代码
│   ├── index.ts           # 主入口文件
│   ├── services/          # 服务层
│   └── tools/             # MCP工具定义
├── scripts/               # 构建脚本
│   ├── copy-docs.ts      # 复制文档脚本
│   ├── analyze-doc.ts    # 分析文档脚本
│   └── test-service.ts   # 测试服务脚本
├── metaData/             # 文档数据
│   └── docs/             # 组件文档
│       ├── *.md          # 各组件文档
│       └── index.json    # 组件索引
└── dist/                 # 构建输出

注意事项

• metaData 目录包含了所有组件文档的副本，确保MCP服务不依赖外部文件
• 每次发布前需要运行 npm run copy-docs 来更新文档
• 构建过程会自动执行文档复制（通过 prebuild 钩子）

License

MIT