介绍

Bify 是基于 Taroify 的移动端组件库，基于 Vant 视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

Bify MCP 是一项独立的 MCP（模型上下文协议）服务，旨在将 Bify 与大模型连接起来。它使大模型能够直接从文档中检索组件、API 数据，并支持 Arco Mobile → Bify 代码转换。

• 直接使用 npx 运行
• 无需外部依赖，只需要 Node 环境
• 支持 68+ 个组件文档查询
• 支持 Arco Mobile 代码转换（40+ 组件映射）

配置方式

Cursor

{
  "mcpServers": {
    "@fjyueke/bify-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@fjyueke/bify-mcp"
      ],
      "env": {}
    }
  }
}

Trae

在 .trae/skills/ 目录下创建配置文件，或在 Trae 设置中添加 MCP 服务。

其他支持 MCP 的 IDE

参考对应 IDE 的 MCP 配置文档，使用上述配置格式。

双 MCP 协同配置（推荐）

同时配置 Arco Mobile MCP 和 Bify MCP，可获得更精确的代码转换：

{
  "mcpServers": {
    "@fjyueke/bify-mcp": {
      "command": "npx",
      "args": ["-y", "@fjyueke/bify-mcp"],
      "env": {}
    },
    "@fjyueke/arco-mcp": {
      "command": "npx",
      "args": ["-y", "@fjyueke/arco-mcp"],
      "env": {}
    }
  }
}

可用工具

| 工具名 | 功能 | |--------|------| | list-components | 列出所有可用的 Bify 组件 | | get-component-docs | 获取指定组件的详细文档 | | get-component-props | 获取指定组件的属性和 API 文档 | | list-component-example | 获取指定组件的所有示例代码 | | convert-arco-to-bify | 将 Arco Mobile React 代码转换为 Bify 代码（含详细报告） | | get-arco-conversion-help | 获取 Arco Mobile → Bify 转换帮助信息 |

使用示例

查询组件文档

# 列出所有组件
list-components

# 获取 Cell 组件文档
get-component-docs Cell

# 获取 Cell 组件属性
get-component-props Cell

# 获取 Cell 组件示例
list-component-example Cell

Arco Mobile 代码转换

# 获取转换帮助
get-arco-conversion-help

# 转换代码
convert-arco-to-bify "<Cell label='标题' desc='描述' showArrow>内容</Cell>"

转换示例

Arco Mobile 代码：

import { Cell, CellGroup, Button, Tag, Badge } from '@arco-design/mobile-react';

<CellGroup>
  <Cell label="标题" desc="描述" showArrow>内容</Cell>
</CellGroup>
<Button type="primary" ghost size="huge" block>按钮</Button>
<Tag type="success" closable>标签</Tag>
<Badge count={99} maxCount={99}>图标</Badge>

转换后 Bify 代码：

import { Cell, CellGroup, Button, Tag, Badge } from '@fjyueke/bify-core';

<CellGroup>
  <Cell title="标题" brief="描述" clickable="true">内容</Cell>
</CellGroup>
<Button color="primary" variant="outlined" size="large" block>按钮</Button>
<Tag color="success" closeable>标签</Tag>
<Badge content={99} max={99}>图标</Badge>

属性映射示例

| Arco 属性 | Bify 属性 | 说明 | |-----------|-----------|------| | label | title | 单元格标题 | | desc | brief | 单元格描述 | | showArrow | clickable | 是否显示箭头 | | visible | open | 弹窗显示状态 | | value | modelValue | 表单值绑定 | | type (Button) | color | 按钮颜色 | | ghost | variant="outlined" | 镂空按钮样式 | | type (Tag) | color | 标签颜色 | | count | content | Badge 内容 | | maxCount | max | Badge 最大值 |

版本历史

| 版本 | 日期 | 说明 | |------|------|------| | 1.0.6 | 2026-07-13 | 根据实际组件定义更新属性映射（Button 使用 color/variant，Tag 使用 color） | | 1.0.5 | 2026-07-13 | 优化转换工具，增加详细报告（警告、建议、映射列表） | | 1.0.4 | 2026-07-13 | 修复构建配置 | | 1.0.3 | 2026-07-13 | 优化代码转换工具，增加 40+ 组件映射、值映射、布尔属性转换 | | 1.0.2 | 2026-07-13 | 添加 Arco Mobile → Bify 代码转换功能 | | 1.0.1 | 2026-07-13 | 更正包名为 bify-mcp | | 1.0.0 | 2026-07-13 | 初始版本，支持 68+ 组件文档查询 |

相关链接

• npm 包地址：https://www.npmjs.com/package/@fjyueke/bify-mcp
• Bify 组件库：https://github.com/fjyueke/bify