基于 AGUI 和 MCP 实现端 Tool

1. 概念解析

AGUI

是 Agent 与前端/客户端应用进行交互的一个通用通讯协议

MCP

是 LLM 远程调用 Tool 的一个通用协议

端 Tool

类似于 MCP 的 Stdio 版，就是用户端自行定义 Tool ，通过一定手段让远端的 Agent 可以调用用户端能力，包括远程操控浏览器等骚操作。

2. 实现方式

在远端 Agent 架起一个空 MCP Server ，而 MCP Server 内部是 AGUI ，当用户端连上远端 Agent 之后，MCP Server 通过 AGUI 协议向用户端发送 tool/list 和 tool/call 元数据，用户端通过 AGUI 协议返回对应的响应结果，当然这一环节的响应请求格式都是符合 AGUI 协议的，而非 MCP 协议。

当数据来到 MCP Server 时， MCP Server 将数据改造成 MCP 协议格式扔出去给 LLM 使用。

3. 流程示例如下

3.1. LLM 侧发起工具调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "jsonrpc": "2.0",
  "id": 3,
  "method": "tools/call",
  "params": {
    "name": "agui_user_confirm",
    "arguments": {
      "title": "转账确认",
      "body": "向 0x9c...b3ef 转 100 USDT？",
      "ok_text": "确认转账",
      "cancel_text": "再想想"
    }
  }
}

3.2. agui-mcp-server 收到后 → 把参数包装成 AG-UI 事件

AGUI 事件名【agui.tool.invoke】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
POST /agui/events?id=3
Content-Type: text/event-stream

event: agui.tool.invoke
data: {
  "call_id": "3",                       // 与 MCP jsonrpc id 保持一致
  "tool": "agui_user_confirm",
  "params": {
    "title": "转账确认",
    "body": "向 0x9c...b3ef 转 100 USDT？",
    "okText": "确认转账",
    "cancelText": "再想想"
  }
}

3.3. 端侧（Web）收到事件 → 渲染弹窗

AGUI 事件名【agui.tool.return】

用户点击 “确认转账” 后，前端把结果写回：

1
2
3
4
5
6
WebSocket SEND:
{
  "type": "agui.tool.return",
  "call_id": "3",
  "result": "ok"
}

3.4. agui-mcp-server 把前端回包转成 MCP CallToolResult

1
2
3
4
5
6
7
8
9
10
11
12
{
  "jsonrpc": "2.0",
  "id": 3,
  "result": {
    "content": [
      {
        "type": "text",
        "text": "ok"
      }
    ]
  }
}

然后交付给 LLM

End.