fix: fix readme

Author: Mrjing

README.md

@@ -18,36 +18,39 @@ Agent UI 演示效果图
 - **企业级功能集成** 流式输出/联网搜索/深度思考/多轮会话 开箱即用
 - **多模型支持** 深度兼容 DeepSeek、Hunyuan 等主流大模型
 - **配置即开发** 通过配置快速接入组件能力，无需处理复杂通信逻辑
+- **支持 MCP Server 调用&自定义工具卡片** 对接云开发MCP Server能力，支持开发者定制工具卡片展示
 
 ## 📦 使用指南
 
-### 1. 开通环境
+### 组件集成
+
+#### 1. 开通环境
 
 Agent UI 微信小程序组件依赖**微信云开发**服务，需先开通云开发环境
 
-#### 1.1 开通微信云开发
+##### 1.1 开通微信云开发
 
 开通方式，点击开发者工具顶部“云开发” 进行开通
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/f06ca4761f54ecc8ed8d9644229c92f9.png)
 
 如已开通微信云开发服务，请跳转至[云开发平台](https://tcb.cloud.tencent.com/dev)创建AI服务。
 
-#### 1.2、创建AI服务
+##### 1.2、创建AI服务
 
 - 方式一：直接使用agent智能体服务
   ![](https://qcloudimg.tencent-cloud.cn/raw/97786aaaa15aa1f23e9bbd39a7a6762f.png)
 - 方式二：接入大模型
   ![](https://qcloudimg.tencent-cloud.cn/raw/876d2238b5331a7bdcbd91a1b38b8248.png)
 
-### 2. 获取组件
+#### 2. 获取组件
 
 可通过以下两种方式获取组件包代码
 
 1. **克隆仓库到本地，提取其中components/agent-ui 目录使用**
 2. **下载GitHub Release 包 agent-ui.zip，直接使用**
 
-### 3. 微信小程序项目引入组件
+#### 3. 微信小程序项目引入组件
 
 1. **配置云开发环境ID**
    打开 miniprogram/app.js 文件，配置云开发环境ID。
@@ -117,6 +120,54 @@ Page({
 })
 ```
 
+### 自定义 MCP 工具卡片
+
+> 以下示例流程以结合腾讯地图 MCP Server 开发自定义工具卡片举例说明
+
+#### 1. 开通 MCP 能力
+
+- 进入云开发平台 AI+ MCP 页面，点击创建MCP Server
+
+![](https://qcloudimg.tencent-cloud.cn/raw/bc2a7815b542b26f5931aa835514dc37.png)
+
+- 若未开通过云托管服务，需先开通云托管
+
+![](https://qcloudimg.tencent-cloud.cn/raw/084b50f265e0335201801c3fb741d04d.png)
+
+#### 2. 配置 MCP Server
+
+- 以腾讯地图 MCP Server 举例，选择模板进行安装（按照指引获取腾讯地图平台API KEY后，配置环境变量）
+
+![](https://qcloudimg.tencent-cloud.cn/raw/a5b15af9bfff83008257a0c99d252b83.png)
+
+#### 3. agent 绑定 MCP Server tools
+
+- 在 agent 配置页点击添加MCP 服务，选择对应的MCP Server tools 使用 （此处腾讯地图示例可勾选 geocoder,placeSearchNearby, directionDriving, weather等工具）
+
+![](https://qcloudimg.tencent-cloud.cn/raw/b45a95e06ec0df8dab5c9d9ec7707faa.png)
+
+
+#### 4. 开发自定义卡片组件
+
+- 参照本工程中 apps/miniprogram-agent-ui/miniprogram/components/toolCard 目录内自定义工具卡片组件实现
+
+![](https://qcloudimg.tencent-cloud.cn/raw/14a4a82810f0b45bde0c124cc8f3ed1c.png)
+
+#### 5. 卡片组件引用配置
+
+- 自定义卡片组件引用声明配置（可在用户小程序项目全局app.json中配置 或 agent-ui组件index.json中配置）
+
+![](https://qcloudimg.tencent-cloud.cn/raw/cd1dc376a1e238f3186a2209e5875698.png)
+
+- agent-ui 组件内 customCard/index.wxml 中添加自定义组件
+
+![](https://qcloudimg.tencent-cloud.cn/raw/b4cd35ccaa3e72189934ed59d35f7ae5.png)
+
+#### 6. 卡片效果
+
+<img src="https://qcloudimg.tencent-cloud.cn/raw/82adcd08eec9443f8b8a336342a4fa23.png" width="375px"> 
+
+
 ## 🏗 项目结构
 
 ```bash

apps/miniprogram-agent-ui/miniprogram/components/agent-ui/customCard/index.wxml

@@ -23,4 +23,5 @@
   <view class="customCard" wx:if="{{name === 'placeSearchNearby'}}">
     <custom-business-list name="{{name}}" toolData="{{toolData}}"></custom-business-list>
   </view>
+  <!-- 用户可类似添加自定义组件 -->
 </block>