第 1 章项目概述与环境搭建

📌 本章目标：了解这个项目是做什么的，把开发环境跑起来

⭐ 难度：入门 | ⏱️ 预计时间：30 分钟

1.1 项目是做什么的？

用一句话说清楚

我们要做的是一个 AI Agent 工作台------用户可以在一个界面里管理自己的 AI 助手，跟它们聊天，看它们干活，还能审批它们的操作。

举个例子你就懂了

想象一下你是一个运维工程师，你有一个叫「小运」的 AI 助手：

bash 复制代码

👨‍💻 你：帮我看看生产服务器的 CPU 使用率高不高
💬 小运：好的，我来查一下...
🔧 小运正在执行命令：top -bn1 | grep Cpu
✅ 小运：CPU 使用率是 35%，一切正常

这个工作台就是干这个的：

左边是你的 AI 助手列表
中间是聊天窗口
右边是 AI 正在做什么的详细过程
遇到危险操作还会弹出来让你审批

核心功能清单

功能	说明	你用过类似的吗？
💬 AI 对话	跟 AI 聊天，它会一个字一个字地回复	类似 ChatGPT
🤖 多 Agent	可以有多个 AI 助手，各司其职	类似有多个专属客服
🔧 工具调用	AI 可以执行命令、查数据库、读文件	这是 Agent 比普通聊天强的地方
✅ 审批机制	AI 要做危险操作前会问你同不同意	企业级应用必备
⏰ 定时任务	让 AI 定时自动干活	类似闹钟提醒
📝 记忆系统	AI 能记住你说过的话和偏好	越用越懂你

1.2 技术栈一览

别被下面的列表吓到！我们会一章一章学，每一个都讲明白。

前端框架

技术	作用	你需要知道的
React 19	UI 框架	用组件搭界面
TypeScript	类型系统	给 JS 加上类型，减少 bug
Vite	构建工具	项目启动、打包都靠它，很快

状态管理

技术	作用	类比
MobX	状态管理	类似 Redux，但更简单直接
mobx-react-lite	React 绑定	让 React 组件响应 MobX 的状态变化

💡 小贴士：如果你只学过 Redux，MobX 会让你感觉「啊？这么简单？」。它的核心理念是：你改数据，UI 自动更新，不用写 reducer、action 那些样板代码。

UI 组件库

技术	作用
Ant Design v5	企业级 UI 组件库（按钮、弹窗、表格...都有现成的）

其他重要的库

技术	作用	什么时候学
react-router-dom	路由（不同 URL 显示不同页面）	第 2 章
axios	HTTP 请求	第 5 章
WebSocket	实时通信（AI 流式回复就靠它）	第 6 章
react-markdown	渲染 Markdown 消息	第 7 章
Less	CSS 预处理器	第 3 章

1.3 环境搭建

前置工具

在开始之前，请确保你的电脑上装了这些：

工具	推荐版本	怎么检查
Node.js	18+	`node -v`
npm 或 yarn	最新版	`npm -v` 或 `yarn -v`
VS Code	最新版	写代码的编辑器

⚠️ 注意：Node.js 版本不要太低，建议 18 或更高。怎么安装？直接去 Node.js 官网下载 LTS 版本，一路下一步就行。

新建项目

让我们从零开始创建一个 Vite + React + TypeScript 项目：

bash 复制代码

# 用 npm 创建项目
npm create vite@latest ai-agent-workbench -- --template react-ts

# 或者用 yarn
yarn create vite ai-agent-workbench --template react-ts

执行完之后，进入项目目录，安装依赖：

bash 复制代码

cd ai-agent-workbench
npm install
# 或者
yarn

启动项目

bash 复制代码

npm run dev
# 或者
yarn dev

如果一切顺利，你会看到类似这样的输出：

bash 复制代码

  VITE v7.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

打开浏览器访问 http://localhost:5173/，你就能看到 Vite 的默认欢迎页面了。

🎉 恭喜！你的第一个项目跑起来了！

1.4 项目目录结构长什么样？

先来看一下我们最终项目的目录结构，心里有个谱：

bash 复制代码

ai-agent-workbench/
├── public/                 # 静态资源（图片、字体等）
├── src/
│   ├── app.tsx             # 应用入口（路由配置）
│   ├── main.tsx            # React 渲染入口
│   ├── styles/             # 全局样式
│   │   ├── variables.less  # 全局样式变量
│   │   └── mixins.less     # 样式 mixin
│   ├── utils/              # 通用工具函数
│   ├── components/         # 通用组件（跨模块复用）
│   │   ├── Button/
│   │   ├── Dialog/
│   │   └── ...
│   └── pages/
│       └── workbench/      # 工作台主页面（核心！）
│           ├── components/ # 工作台的 UI 组件
│           ├── store/      # MobX 状态管理
│           ├── services/   # 服务层（API、WebSocket）
│           └── utils/      # 工作台专用工具
├── package.json
├── vite.config.ts
└── tsconfig.json

💡 小贴士 ：现在看不懂没关系，我们会一步步搭建。先记住一个原则：文件夹按功能分，不按类型分。比如「聊天相关的所有东西」放在一起，而不是「所有组件放一个文件夹，所有样式放另一个」。

1.5 本章小结

你学到了什么？

✅ 知道了 AI Agent 工作台是做什么的
✅ 了解了项目用到的技术栈
✅ 把 Vite + React + TS 项目跑起来了
✅ 对项目目录结构有了初步印象

关键术语回顾

术语	一句话解释
Agent	AI 助手，能调用工具、主动做事，不只是聊天
MobX	状态管理库，改数据就自动更新 UI
Vite	新一代前端构建工具，启动飞快
流式回复	AI 一个字一个字地输出，而不是等全部生成完才显示

✏️ 动手练习

把项目在本地跑起来，访问 http://localhost:5173/ 确认能看到页面
试着修改 src/App.tsx 里的文字，看看页面会不会自动刷新（热更新）
在本子上画一下你想象中的 AI 工作台界面草图

下一章我们会用简单易懂的方式，搞明白一个 AI 工作台项目到底是怎么「分层」的，为什么要这么设计。

第 1 章 项目概述与环境搭建

1.1 项目是做什么的？

用一句话说清楚

举个例子你就懂了

核心功能清单

1.2 技术栈一览

前端框架

状态管理

UI 组件库

其他重要的库

1.3 环境搭建

前置工具

新建项目

启动项目

1.4 项目目录结构长什么样？

1.5 本章小结

你学到了什么？

关键术语回顾

✏️ 动手练习

第 1 章项目概述与环境搭建