# React-Agent **Repository Path**: fgai/react-agent ## Basic Information - **Project Name**: React-Agent - **Description**: React 智能体工作流搭建 - **Primary Language**: Python - **License**: AGPL-3.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-03-26 - **Last Updated**: 2026-01-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # React Agent：从零开始可视化构建大模型智能体与工作流 React Flow 实战・智能体开发・工作流开发・MCP 开发・低代码平台搭建 ![alt text](assets/ReactAgent.png) ## 项目介绍 本项目致力于培养四大核心能力：✅ AI 智能体与工作流开发（Agent 架构设计 / 多轮对话 / 任务规划 / 工作流 / MCP）✅ React Flow 技术栈（可视化工作流搭建 / 自定义节点开发 / 状态管理）✅ 低代码平台构建（可视化编程 / 工作流编排 / 动态流程配置）✅ 工程化实战（从 0 到 1 落地智能体应用 / 前后端集成 / 云端部署）。专栏旨在帮助开发者从零基础开始掌握 AI 智能体（Agent）构建技能，涵盖React Flow、工作流搭建、MCP 开发、低代码平台开发及可视化编程等核心技术。通过理论结合实战案例的方式，带您深度学习如何设计并实现个性化的 AI 智能体及其工作流。 配套书籍与教材：即将出版 - 《React Agent：从零开始可视化构建大模型智能体与工作流》 - 第 1 章 基本概念 - 第 2 章 React Flow基础 - 第 3 章 大模型智能体 - 第 4 章 React Flow 智能体组件 - 第 5 章 智能体组件与工作流交互 - 第 6 章 工作流设计实战 - 第 7 章 RAG 问答机器人工作流 - 第 8 章 大模型 MCP 协议技术与实践 ## 程序使用说明 [程序说明](程序说明.md)：所有程序位于 project 目录下。 ## 配套文档 [专栏地址](https://blog.csdn.net/suiyingy/category_12933485.html)：`https://blog.csdn.net/suiyingy/category_12933485.html` [项目文档](https://gitee.com/fgai/react-agent/blob/master/README.md)：`https://gitee.com/fgai/react-agent/blob/master/README.md` [博客地址](https://blog.csdn.net/suiyingy)：`https://blog.csdn.net/suiyingy` [FGAI 人工智能平台](https://www.botaigc.cn/)：`https://www.botaigc.cn/` [人工智能学习资料：持续补充](https://gitee.com/fgai/resource-center)：`https://gitee.com/fgai/resource-center` ## 交流讨论（请注明：React Agent） 微信：fgai66 qq：1303885649 微信公众号：乐乐感知学堂 微信与qq交流群： ![alt text](assets/微信群.png) ![alt text](assets/qq群.png) # 项目程序使用说明 ![alt text](assets/页面示例.png) 本项目程序路径：所有程序位于 project 目录下。 ## 1 目录构成 |目录/文件名称 | 文件描述 | | ---------------- | ------------------------------------------------------------ | | project/chapter_xx | 各个章节配套程序 | | project/project_example.yaml | 配置文件，大模型账号等 | | project/file_merge.py | 合并指定目录或文件内容，用于向大模型提问 | ## 2 环境安装 ### 2.1 Node.js 环境 - Ubuntu 系统 ``` # Ubuntu安装命令如下 curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - sudo apt-get install -y nodejs node -v npm -v ``` - Windows 系统 前往官网下载安装程序：https://nodejs.org/zh-cn/download ### 2.2 Python 环境 - Python 3.10+，较低版本无法安装 mcp 库 - 推荐使用 Miniconda 进行安装 ``` 历史版本： Ubuntu Python 3.10：https://repo.anaconda.com/miniconda/Miniconda3-py310_25.9.1-1-Linux-x86_64.sh Windows Python 3.10：https://repo.anaconda.com/miniconda/Miniconda3-py310_25.9.1-1-Windows-x86_64.exe ``` --- - 也可使用 conda 直接创建环境 ``` conda create -n fgai python=3.10 -y conda activate fgai ``` - 安装依赖库：pip install requirements.txt ## 3 项目创建与启动 ### 3.1 配置大模型 - 将 project/project_example.yaml 复制或另存为 project/project.yaml - 修改文件内容，设置大模型请求地址、API 密钥和模型名称 - 可以是第三方 API，也可以本地搭建大模型 ``` llm: base_url: "https://dashscope.aliyuncs.com/compatible-mode/v1" # 大模型请求地址 api_key: "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxx" # 大模型API密钥 model: "qwen-turbo-latest" # 对话模型 embedding_model: "text-embedding-v1" # 文本嵌入模型 ``` ### 3.2 react 项目前端启动 各程序不做特殊说明的情况下，均可运行下面命令启动 ``` 进入示例程序目录，例如 cd exp01 安装依赖：npm install reactflow axios react-icons @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons tailwindcss@3.4.17 启动命令：npm start 启动后在浏览器输入地址访问：http://localhost:3000/ ``` ### 3.3 Django 项目后端启动 各程序不做特殊说明的情况下，均可运行下面命令启动 ``` 进入示例程序目录，例如 cd backend python manage.py makemigrations python manage.py migrate python manage.py runserver 8000 ``` ## 4 各章节配套程序 ### chapter_02：第2章配套程序 - 第 2 章 React Flow基础 #### exp01：默认项目 #### exp02：基本实例程序 #### exp03-node：节点控制程序，各个示例文件复制到 App.js 即可运行查看效果 - exp03-node/src/App_property.js：节点属性控制，同时需要修改 App.css 文件 - exp03-node/src/App_defaultnode.js：内置默认节点 - exp03-node/src/App_customnode_handle.js：自定义节点，控制连接句柄 handle - exp03-node/src/App_customnode_fontawesome.js：fontawesome 图标，需要安装库： npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons - exp03-node/src/App_customnode_icon.js：react 图标，需要安装库： npm install react-icons - exp03-node/src/App_customnode_style.js：自定义节点样式 - exp03-node/src/App_customnode_expand.js：自定义交互示例 - exp03-node/src/App_customnode_progress.js：扩展数据内容，显示进度条 - exp03-node/src/App_three_nodes.js：三种类型节点 - exp03-node/src/App_file_three_nodes.js、src/nodes/InputNode.jsx、src/nodes/OutputNode.jsx、src/nodes/InputOutputNode.jsx：从文件导入三种类型节点 - exp03-node/src/App_event_mouse.js：鼠标事件 - exp03-node/src/App_event_mouse_handle.js：handle 鼠标事件 - exp03-node/src/App_event_keyboard.js：键盘事件 - exp03-node/src/App_event_drag.js：拖动事件 - exp03-node/src/App_event_useeffect.js：useEffect 事件 #### exp04-edge：边控制程序，各个示例文件复制到 App.js 即可运行查看效果 - exp04-edge/src/App_edge_basis.js：边基本示例程序 - exp04-edge/src/App_edge_handle.js：边的起止点控制 - exp04-edge/src/App_edge_style.js：边样式控制 - exp04-edge/src/App_edge_mouse_double_click.js：双击事件 - exp04-edge/src/App_event_mouse_hover.js：鼠标悬停事件 - exp04-edge/src/App_event_mouse_click.js：鼠标点击事件 - exp04-edge/src/App_event_keyboard.js：键盘事件 - exp04-edge/src/App_event_onconnect.js：连接事件 - exp04-edge/src/App_event_rules.js：连接规则控制 - exp04-edge/src/App_event_onedgesdelete.js：连接断开事件 #### exp05-minimap：Minimap 与 Controls 组件 #### exp06-data：数据管理 - exp06-data/src/App_usestate.js：状态管理 - exp06-data/src/App_localstorage.js：保存数据到本地与加载 #### exp07-backend：保存数据到后端与加载 - exp07-backend/backend：django 后端程序 ``` 1. 进入 backend 目录 2. python manage.py makemigrations 3. python manage.py migrate 4. 启动项目：python manage.py runserver 0.0.0.0:8000 ``` - exp07-backend/frontend：react 前端程序 ### chapter_03：第3章配套程序 - 第 3 章 大模型智能体 #### exp01-agent-basis：智能体基础 - exp01-agent-basis/api_basis.py：大模型 API 接口调用示例程序 - exp01-agent-basis/llm_tools.py：大模型工具调用 - exp01-agent-basis/conversation_agent.py：对话智能体 - exp01-agent-basis/data_analysis_agent.py：数据分析智能体 - exp01-agent-basis/code_agent.py：代码执行智能体 - exp01-agent-basis/weather_agent.py：天气智能体 ### chapter_04：第4章配套程序 - 第 4 React Flow 智能体组件 #### exp01-agent-nodes：React Flow 智能体组件 - exp01-agent-nodes/src/nodes/InputNode.js：输入节点 - exp01-agent-nodes/src/nodes/OutputNode.js：输出节点 - exp01-agent-nodes/src/nodes/HttpNode.js：输入输出节点 - exp01-agent-nodes/src/nodes/CodeNode.js：代码节点 - exp01-agent-nodes/src/nodes/ToolNode.js：工具节点 - exp01-agent-nodes/src/nodes/AgentNode.js：对话节点 #### exp02-server： - exp02-server\light_server.py ``` 轻量后端服务器，如果需要使用前端相同地址访问，需要修改 package.json， 在version 字段后增加 proxy，取值为后端地址。 "version": "0.1.0", "proxy": "http://127.0.0.1:8000", ``` ### chapter_05：第5章配套程序 - 第 5 章 智能体组件与工作流交互 #### backend：智能体与工作流后端，第5~8章均使用该项目 ``` 1. 进入 backend 目录 2. python manage.py makemigrations 3. python manage.py migrate 4. 启动项目：python manage.py runserver 0.0.0.0:8000 ``` #### frontend：智能体与工作流前端，第5~8章均使用该项目 ``` 1. 进入 frontend 目录 2. 安装依赖：npm install reactflow axios react-icons @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons tailwindcss@3.4.17 3. 启动命令：npm start 4. 启动后在浏览器输入地址访问：http://localhost:3000/ - frontend/src/nodes/InputNode.jsx：输入节点 - frontend/src/nodes/OutputNode.jsx：输出节点 - frontend/src/nodes/HttpNode.jsx：输入输出节点 - frontend/src/nodes/CodeNode.jsx：代码节点 - frontend/src/nodes/ToolNode.jsx：工具节点 - frontend/src/nodes/AgentNode.jsx：对话节点 - frontend/src/nodes/KnowledgeBaseNode.jsx：知识库节点 - frontend/src/nodes/MCPNode.jsx：MCP 节点 ``` ### chapter_06：第6章配套程序 - 第 6 章 工作流设计实战 - backend/frontend：智能体与工作流前后端，见 chapter_05 - load_config.py：读取大模型账号等信息到环境变量 - translation_workflow.py：多步翻译润色工作流（双智能体协作） - light_server.py：天气查询模拟 API 接口 - weather_workflow.py：智能天气预警工作流（网络+逻辑+生成） - feedback_workflow.py：智能分发与回复工作流（分析+清洗+生成） ### chapter_07：第7章配套程序 - 第 7 章 RAG 问答机器人工作流 - backend/frontend：智能体与工作流前后端，见 chapter_05 - load_config.py：读取大模型账号等信息到环境变量 - chunck_content.py：文档分片（Chunking）：拆分文档提升检索精准度 - text2embedding.py：嵌入模型（Embedding Model）：文本转语义向量 - vector_chromdb.py：ChromaDB 存储文本向量 - vector_retrieve.py：向量数据库检索 - rag_generate.py：RAG 生成环节：基于检索信息生成精准答案 ### chapter_08：第8章配套程序 - 第8章 大模型 MCP 协议技术与实践 - backend/frontend：智能体与工作流前后端，见 chapter_05 - load_config.py：读取大模型账号等信息到环境变量 - math_server.py：MCP 基础服务端示例 - math_client.py：MCP 基础客户端示例 - math_server_remote.py：远程服务端 - math_client_remote.py：远程客户端 - sqlite_server.py：数据库交互 Agent 服务端 - sqlite_client.py：数据库交互 Agent 客户端 - filesystem_server.py：系统运维助手服务端 - filesystem_client.py：系统运维助手客户端 - simple_fs_client.py：第三方 MCP 测试客户端