链载Ai

标题: 聊聊React Agent的实现思路 [打印本页]
作者: 链载Ai    时间: 4 小时前
标题: 聊聊React Agent的实现思路


ingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">最近，国内AI领域创新速度不断刷新记录，卷出了新高度。近两周诞生了n款颠覆性的开源大模型，在智能体（Agent）和深度研究（DeepResearch）方向也同样，几乎每隔一段时间就有新产品或新功能上线，可谓是百花齐放！

ingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">

ingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">今天我们聚焦实践，和大家探讨一下React Agent的核心原理和实现思路。

ingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;display: table;padding: 0.3em 1em;color: rgb(255, 255, 255);background: rgb(85, 201, 234);border-radius: 8px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;">什么是React Agent

ingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">React（Reasoning and Acting）Agent是一种基于推理-行动循环的智能代理模式。与传统的单次问答不同，React Agent能够：

    ingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 14px;color: rgb(63, 63, 63);" class="list-paddingleft-1">
  1. ingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 14px;text-indent: -1em;display: block;margin: 0.5em 8px;color: rgb(63, 63, 63);">
    1.ingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: inherit;color: rgb(85, 201, 234);">思考（Think）：分析当前问题，制定解决策略。
  2. ingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: 14px;text-indent: -1em;display: block;margin: 0.5em 8px;color: rgb(63, 63, 63);">
    2.ingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;font-size: inherit;color: rgb(85, 201, 234);">行动（Act）：调用外部工具或API获取信息。
  3. 3.观察（Observe）：分析工具返回的结果。
  4. 4.循环迭代：基于观察结果继续思考和行动，直到得出最终答案。

这种模式让AI能够像人类一样进行多步骤推理，处理复杂的实际业务场景问题。

底层原理

React Agent的核心工作流程，简单拆解一下，大致如下：

用户问题→思考→选择工具→执行工具→观察结果→继续思考或给出最终答案

关键组件

架构图

以下是React Agent的整体架构图，展示了各个组件之间的关系：

流程图

以下是React Agent的执行流程图，展示了从用户提问到得出最终答案的完整过程：

实现细节

1. Prompt模板设计

Prompt模板是React Agent的灵魂，它指导AI的思考和行动模式。一个精心设计的Prompt模板应包括以下内容：

2. 工具定义与注册

工具是React Agent的核心组件之一，包括本地/外部工具和MCP Server等。列举几个在Agent比较常见的工具：联网搜索工具、报告生成工具、本地自定义工具、各种MCP Server（如高德地图、12306等）。

3. 核心执行循环

执行引擎负责管理React Agent的思考-行动循环，其主要逻辑如下：

  1. 1.接收用户问题：从用户获取问题。
  2. 2.生成Prompt：根据Prompt模板生成初始Prompt。
  3. 3.AI响应：将Prompt发送给AI模型，获取响应。
  4. 4.解析响应：通过结果解析器解析AI的输出，判断是否需要调用工具。
  5. 5.工具调用：如果需要调用工具，则执行工具并获取结果。
  6. 6.更新Prompt：将工具的返回结果添加到Prompt中，继续思考。
  7. 7.循环迭代：重复上述过程，直到得出最终答案或达到最大迭代次数。

优质开源推荐

这里给大家分享一款由京东开源的多智能体产品：JoyAgent-JDGenie，它基于MIT开源协议，目前在github上有3.7K Star。

github：https://github.com/jd-opensource/joyagent-jdgenie

核心服务解析

1、ui（前端模块）：独立的系统前端模块；基于React框架构建，结合Vite构建系统和Node.js，使用Ant Design（antd）作为UI组件库。

2、genie-Backend（核心后端模块）：作为系统的核心服务，负责接收前端传来的请求，调用多智能体引擎以及整合后端的各类工具，并协调处理工具与各智能体的响应。它是一个多智能体的执行引擎与任务的核心调度模块，支持任务与工具的并发执行，以提高响应性能；基于Spring Boot3.x框架构建，未使用SpringAi等AI框架，核心功能纯手撸。

3、genie-client（后端模块）：作为MCP（模型上下文协议）客户端，用于与MCP Server进行通信，调用外部工具和服务；使用Python 3.11开发，结合UV包管理。

4、genie-tool（后端模块）：提供了多种工具和服务，如代码解释、报告生成、搜索操作等，用于支持多智能体系统的任务执行；使用Python 3.11开发，结合UV包管理。

关于私有化部署：

支持docker部署、源码部署，项目源码的说明文档中有详细的操作步骤！这里，我极力推荐大家尝试源码启动，本地Debug一圈可以学到不少东西，中间会遇到一些坑，过程中会让你收获满满！

为什么推荐JoyAgent-JDGenie？

一个原因：Agent核心服务高度可拓展，代码逻辑清晰，针对Agent框架学习这件事极度友好！

genie-backend是JoyAgent-JDGenie的核心后端服务，基于SpringBoot3.x。它负责处理页面请求，完成Agent核心能力调度：计划制定、思考决策、工具调度、结果整合。

在配置文件application.yml中，我们可以看到各个核心流程的大模型配置、提示词模版。上面我们讲到了，Prompt是React Agent的灵魂。感兴趣的小伙伴，非常建议阅读仔细研究一下这块的提示词，另外，在本地部署Debug过程中也可以尝试修改微调提示词来验证效果。

最让我感到意外的是，它没有集成SpringAI等成熟的AI框架，各个功能模块完全是纯手撸，代码逻辑也清晰明了，我们可以看到各个节点的处理细节！







欢迎光临 链载Ai (https://www.lianzai.com/) Powered by Discuz! X3.5