AI-Agent

1.4 本教程学习路径

概述

本教程采用渐进式教学方式，从最简单的 LLM 调用开始，逐步构建一个功能完整的 AI Agent 系统。每个步骤都是独立的，可以单独学习，也建议按顺序阅读。

学习路径图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
┌─────────────────────────────────────────────────────────────┐
│                     第一章：概述                            │
│                  理解 AI Agent 的基本概念                    │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  第二章：基础 LLM 交互 (Step 0)             │
│               学习如何调用 LLM API 进行对话                  │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  第三章：对话历史管理 (Step 1)               │
│               添加对话上下文，支持多轮对话                   │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  第四章：工具调用系统 (Step 2)               │
│               实现 Function Calling，扩展能力                │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  第五章：流式输出 (Step 3)                   │
│               实现 SSE 流式响应，提升体验                    │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  第六章：配置管理 (Step 4)                   │
│               支持配置文件和环境变量                         │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  第七章：会话持久化 (Step 5)                 │
│               保存和恢复对话会话                             │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  第八章：技能系统 (Step 6)                   │
│               动态加载技能，扩展 Agent 能力                  │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  第九章：服务化架构 (Step 7)                 │
│               实现客户端-服务器分离架构                      │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  第十章：Web 客户端 (Step 8)                 │
│               开发浏览器界面，提供更好的用户体验             │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  第十一章：总结与展望                         │
│               回顾项目并展望未来发展方向                      │
└─────────────────────────────────────────────────────────────┘

各章节概要

第一章：概述

学习目标：

  • 理解 AI Agent 的定义和特征
  • 了解 AI Agent 与传统聊天机器人的区别
  • 掌握本项目的学习路径

适用人群： 所有读者

预计时间： 30 分钟

第二章：基础 LLM 交互 (Step 0)

学习目标：

  • 理解 OpenAI API 的基本使用
  • 实现第一个 AI 对话程序
  • 了解代码的基本结构

代码示例：

1
2
3
4
const response = await openai.chat.completions.create({
  model: 'deepseek-chat',
  messages: [{ role: 'user', content: 'Hello!' }]
});

难度： ⭐

预计时间： 1 小时

第三章：对话历史管理 (Step 1)

学习目标：

  • 理解对话上下文的重要性
  • 实现消息历史存储
  • 支持多轮对话

关键概念：

  • 消息数组
  • 上下文窗口
  • Token 限制

难度： ⭐⭐

预计时间： 1.5 小时

第四章：工具调用系统 (Step 2)

学习目标：

  • 理解 Function Calling 机制
  • 实现工具定义和注册
  • 掌握工具执行循环

核心技能：

1
2
3
4
5
6
7
8
9
// 工具定义
const tool = {
  name: 'read',
  description: 'Read a file',
  parameters: { type: 'object', properties: {...} }
};

// 工具调用
const result = await tool.execute(params);

难度： ⭐⭐⭐

预计时间： 2 小时

第五章：流式输出 (Step 3)

学习目标：

  • 理解流式响应的优势
  • 实现 SSE 流式输出
  • 处理流式数据

代码示例：

1
2
3
4
const stream = await openai.chat.completions.create({... stream: true});
for await (const chunk of stream) {
  process.stdout.write(chunk.choices[0]?.delta?.content || '');
}

难度： ⭐⭐

预计时间： 1.5 小时

第六章：配置管理 (Step 4)

学习目标：

  • 设计配置文件结构
  • 实现环境变量支持
  • 添加配置验证

配置优先级：

1
环境变量 > 配置文件 > 默认值

难度： ⭐⭐

预计时间： 1 小时

第七章：会话持久化 (Step 5)

学习目标：

  • 设计会话存储方案
  • 实现会话序列化
  • 构建会话管理系统

数据结构：

1
2
3
4
5
6
7
interface Session {
  id: string;
  name: string;
  messages: Message[];
  createdAt: number;
  updatedAt: number;
}

难度： ⭐⭐⭐

预计时间： 2 小时

第八章：技能系统 (Step 6)

学习目标：

  • 设计技能系统架构
  • 实现技能动态加载
  • 构建 Prompt 生成器

技能格式：

1
2
3
4
5
6
---
name: "coding-assistant"
description: "Help with coding"
---
# Coding Assistant
...

难度： ⭐⭐⭐⭐

预计时间： 2.5 小时

第九章：服务化架构 (Step 7)

学习目标：

  • 理解客户端-服务器分离
  • 实现 WebSocket 通信
  • 管理并发连接

架构图：

1
2
3
CLI Client ←→ WebSocket Server ←→ Agent Service
                                   ↓
                              File System

难度： ⭐⭐⭐⭐

预计时间： 3 小时

第十章：Web 客户端 (Step 8)

学习目标：

  • 实现 HTTP 静态文件服务
  • 构建 WebSocket 客户端
  • 设计响应式 UI

技术栈：

  • HTML5 + CSS3
  • 原生 JavaScript
  • WebSocket API

难度： ⭐⭐⭐

预计时间： 2.5 小时

第十一章：总结与展望

学习目标：

  • 回顾整个项目
  • 了解未实现功能
  • 探索技术路线

难度： ⭐

预计时间： 1 小时

学习建议

对于初学者

  1. 按顺序学习 - 不要跳过任何章节
  2. 动手实践 - 每章都要运行对应代码
  3. 理解原理 - 不只是复制代码，要理解为什么
  4. 做笔记 - 记录关键概念和问题

对于有经验的开发者

  1. 选择性学习 - 可以跳过熟悉的内容
  2. 深入细节 - 研究代码实现细节
  3. 思考改进 - 考虑如何优化现有实现
  4. 扩展功能 - 尝试添加新功能

学习时间估算

读者类型 总时间 每章平均
初学者 20-25 小时 2-2.5 小时
有经验 12-15 小时 1.2-1.5 小时
快速浏览 6-8 小时 0.6-0.8 小时

配套资源

代码仓库

每个步骤对应一个目录：

1
2
3
4
5
steps/
├── step0/  # 第二章代码
├── step1/  # 第三章代码
├── ...     # ...
└── step8/  # 第十章代码

运行步骤

1
2
3
cd steps/stepN
npm install
npm run dev

工作报告

每个步骤都有详细的工作报告：

1
steps/stepN/reports/stepN-report.md

学习检查点

每章结束后，你应该能够：

第二章

  • 调用 LLM API 并获取响应
  • 理解消息格式和角色概念
  • 运行 Step 0 代码

第三章

  • 实现多轮对话
  • 理解上下文管理
  • 运行 Step 1 代码

第四章

  • 定义和调用工具
  • 理解 Function Calling
  • 运行 Step 2 代码

第五章

  • 实现流式输出
  • 处理流式数据
  • 运行 Step 3 代码

第六章

  • 使用配置文件
  • 管理环境变量
  • 运行 Step 4 代码

第七章

  • 保存和加载会话
  • 管理会话列表
  • 运行 Step 5 代码

第八章

  • 创建自定义技能
  • 动态加载技能
  • 运行 Step 6 代码

第九章

  • 启动 WebSocket 服务器
  • 连接 CLI 客户端
  • 运行 Step 7 代码

第十章

  • 访问 Web 界面
  • 使用会话管理
  • 运行 Step 8 代码

常见问题

Q: 我可以跳过某些章节吗？

A: 可以，但建议至少阅读第二章到第四章，这是基础内容。

Q: 遇到问题怎么办？

A: 每个步骤都有工作报告，记录了实现细节和已知问题。

Q: 如何验证学习效果？

A: 尝试修改代码，添加新功能，这能检验你的理解程度。

Q: 学完后能做什么？

A: 你将具备构建自定义 AI Agent 的能力，可以应用到实际项目中。

开始学习

准备好了吗？让我们从第二章开始，踏入 AI Agent 的世界！

下一章： 第二章：基础 LLM 交互 →

导航

上一篇： 1.3 技术栈选择

下一篇： 2.1 OpenAI API 简介