react-agent

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

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署开源模型 🍴 复刻 156 🐛 待处理 14 👀 关注 15

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 1656

维护状态低维护

是否开源开源

定价模式 🏷️完全免费开源项目，MIT许可证，完全免费，可自行部署使用。

项目预览

react-agent 项目界面预览图 — 图片来源：GitHub 官方仓库名片

项目数据

分类开源模型

开发团队eylonmiz

官网地址https://reactagent.io

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

定价模式🏷️完全免费

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

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议MIT

主要语言TypeScript

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

GitHub 星标★ 1656

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

代码更新2024-04-12

仓库体积5.3 MB

本站数据更新2026-11-08

维护状态低维护

收录时间2026-08-09

浏览次数8

项目介绍

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

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 1656

技术标签

agent gpt-4 headless llm react

使用教程

难度：入门约 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，按文件内说明把示例组件替换为你生成的组件。