react-agent

用 React 组件方式快速搭建自主 AI Agent 应用

react-agent 是一个基于 React.js 构建的开源自主 LLM Agent 框架，它让开发者能够用熟悉的 React 组件模型来编排和运行大语言模型驱动的智能体。它解决的核心问题是：传统 Agent 开发往往需要复杂的状态管理和流程控制，而 react-agent 将 Agent 的思考、工具调用、输出渲染等环节抽象为可组合的 React 组件，使得构建自主 Agent 应用变得直观且声明式。其核心能力包括：支持多步骤推理循环、内置工具调用接口、可自定义的 UI 渲染层、以及基于 React 生态的组件复用。通过 TypeScript 编写，提供了类型安全的开发体验。项目目前处于成长阶段，星标数超过 1600，适合希望快速搭建带界面的自主 Agent 应用的开发者，尤其适合前端技术栈团队。

开源 free 开源模型

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 1656

维护状态低维护

是否开源是

定价模式 free

项目数据

分类开源模型

开发团队eylonmiz

所属国家

官网地址https://reactagent.io

GitHubhttps://github.com/eylonmiz/react-agent

定价模式free

价格说明开源项目，MIT许可证，完全免费，可自行部署使用。

访问状态

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型agent,gpt-4,headless,headlessui,llm,react

GitHub 星标★ 1656

30天Star增速

HF 下载量

上线时间2023-05-11 00:00:00

最近更新2026-09-18 00:00:00

维护状态低维护

中文支持

访问方式

移动端支持

综合评分

收录时间2026-08-09

浏览次数6

使用教程

难度：入门约 15 分钟部署方式：本地安装 8 步

环境要求

Node.js 环境与 yarn 包管理器（README 通过 yarn 安装依赖）
OpenAI API Key（项目基于 GPT-4 语言模型）
Git（用于克隆仓库）
建议准备两个终端窗口，分别运行后端与前端脚本

安装与启动步骤

1克隆仓库

使用 README 给出的 SSH 地址克隆 react-agent 到本地，确保已配置 GitHub SSH key。
```
git clone git@github.com:eylonmiz/react-agent.git
```
2进入项目目录

切换到刚克隆下来的项目根目录，后续所有命令都在此目录执行。
```
cd react-agent
```
3获取 OpenAI Key

前往 OpenAI 平台申请 API Key，项目使用 GPT-4 模型，需确保账号有对应调用权限。
4写入密钥到 .env

按 README 的脚本把 OPENAI_SECRET_KEY 追加到 backend/main/.env，也可参照 .env.example 手动填写。
```
echo 'OPENAI_SECRET_KEY="sk-xxxxxxxxxxxxxxxx"' >> backend/main/.env
```
5安装依赖

在项目根目录执行 yarn install，一次性安装前后端所需依赖，耗时视网络情况而定。
```
yarn install
```
6启动后端生成组件

运行后端脚本，它会调用模型根据用户故事生成 React 组件，需保持该终端不关闭。
```
yarn backend:dev
```
7启动前端应用

另开一个终端运行前端脚本，在浏览器中查看生成出来的组件效果。
```
yarn frontend:dev
```
8替换示例组件

打开 frontend/main/src/GenReactApp.tsx，按文件内说明把示例组件替换为你生成的组件。

关键配置

配置项	必填	说明	示例
`OPENAI_SECRET_KEY`	是	OpenAI API 密钥，供后端调用 GPT-4 生成 React 组件	`sk-xxxxxxxxxxxxxxxx`

如何确认成功

后端脚本成功生成组件，前端应用启动后能在浏览器页面中看到生成的 React 组件即为成功。

常见问题

Q：不设置 OpenAI API Key 能跑起来吗？

A：不能。README 明确要求在 backend/main/.env 中配置 OPENAI_SECRET_KEY，否则后端无法调用模型生成组件。

Q：一定需要 GPT-4 吗？

A：README 说明该项目使用 GPT-4 语言模型生成并组合 React 组件，需使用具备 GPT-4 调用权限的 OpenAI 账号。

Q：后端和前端必须分别启动吗？

A：是的。README 中 yarn backend:dev 负责生成组件，yarn frontend:dev 负责展示组件，建议在两个终端分别运行。

Q：生成的组件没有出现在页面上怎么办？

A：需要手动打开 frontend/main/src/GenReactApp.tsx，按文件内说明把示例组件替换成你生成的组件。

Q：如何进一步自定义项目？

A：README 指引阅读 Project Customization 章节，了解如何定制和操作项目，官网与文档 https://docs.reactagent.io 也有说明。

注意事项

项目定位为实验性（experimental）自主 Agent，README 未给出稳定版本号，请勿直接用于生产环境。
OpenAI API 调用会产生费用，密钥不要提交到 Git 仓库或公开分享。
README 未指定前端端口与 Node 版本，实际地址和版本要求以终端输出及项目文件为准。
命令中的密钥示例 sk-xxxxxxxxxxxxxxxx 需替换为你自己的真实 Key。

核心亮点

将 Agent 逻辑封装为 React 组件，前端开发者上手门槛极低
内置自主推理循环和工具调用，无需从零实现 Agent 核心机制
UI 渲染与 Agent 状态天然绑定，交互反馈实时直观

不足之处

项目仍处于早期，API 稳定性可能不足，需关注版本更新
文档和示例相对有限，复杂场景需自行探索

适用场景

快速构建带可视化界面的自主 Agent 演示应用
在 React 项目中集成 LLM 驱动的自动化任务处理
教育场景中演示 Agent 推理过程与工具调用

替代项目

LangChain、AutoGPT、AgentGPT

项目介绍

react-agent 是智能体领域的开源项目，由 eylonmiz 开发，2023 年首次发布。

在全站 13,014 个收录项目中，它的 GitHub 星标数（1,656）位列前 30%，在智能体分类中处于中上游。

项目已超过三个月没有代码更新，维护节奏明显放缓，最近一次代码更新于 2026-09-18。MIT许可证，完全免费，可自行部署使用。

它主要面向的使用场景是：快速构建带可视化界面的自主Agent演示应用。同类可对比的替代方案包括 LangChain、AutoGPT、AgentGPT。

上一篇：lotus

下一篇：docs-mcp-server