想系统学 AI Agent 又怕半途而废，这套中文教程网站把 21 章内容做成带动画流程图的可视化课本，每章配题库和随时提问的 AI 助教，整个站纯静态、扔到 Nginx 就能跑。

内容按 6 大篇章铺开 21 章，从大模型基础、Function Calling、MCP、Skills、多 Agent、LangGraph，一直讲到 RAG、评测可观测、安全防护、部署运维和 2026 趋势，每章头顶挂着「文章 / 八股 / 考试」三个页签。

fuzhengwei/ai-agent-guide

Source: https://github.com/fuzhengwei/ai-agent-guide

AI Agent 通识教程

从零到面试通关 — 21 章渐进式可视化教程，动画拆解 AI Agent 核心概念

在线阅读：ai-agent-guide.xiaofuge.cn

✨ 项目亮点

• 🎬 动画拆解：自研 SVG 流程图引擎，ReAct 循环、MCP 调用链等核心流程可视化呈现
• 📚 21 章体系：从 LLM 基础到 2026 技术展望，6 大篇章渐进式学习路径
• 📋 八股速记：每章面试高频考点精炼总结，面试官视角点评
• 📝 在线考试：130+ 道单选/多选题，自动判分 + 错题本，模拟真实面试
• 💬 AI 助教：内置 AI 学习助手，支持 OpenAI 兼容协议，阅读中随时提问
• 🌙 深色主题：一键切换亮/暗主题，护眼阅读
• 📊 进度追踪：localStorage 记录学习进度，断点续读
• 🚀 零依赖部署：纯静态 HTML + CSS + JS，Nginx 直接托管

📖 21 章大纲

🏗️ 项目结构

ai-agent-guide/
├── index.html                    # 主页面（三栏布局 + 工具栏）
├── cors-proxy.js                 # CORS 代理（AI 对话助手，Node.js）
├── css/
│   ├── book.css                  # 核心样式系统（设计令牌 + 组件 + 深色主题）
│   └── animations.css            # 动画效果库（翻页、渐入、高亮）
├── js/
│   ├── main.js                   # 主控制器（导航、主题、考试、Tab 书签）
│   ├── flowchart.js              # 自研 SVG 流程图渲染引擎
│   ├── quiz.js                   # 考试系统（题库加载、答题、判分、错题）
│   ├── progress.js               # 学习进度追踪（localStorage 持久化）
│   └── chat.js                   # AI 对话助手（OpenAI 兼容协议 + 流式响应）
├── chapters/                     # 21 个章节内容
│   ├── ch00-fundamentals.html    # 序章：Agent 能力全景展示
│   ├── ch01-llm-basics.html      # 第1章：大模型与 Agent 基础概念
│   ├── ch02-what-is-agent.html   # 第2章：什么是 AI Agent？
│   ├── ...
│   └── ch20-inference-framework.html  # 第20章：推理框架与模型服务化
├── data/
│   └── quiz-bank.json            # 题库（21 章，约 130+ 题，162KB）
├── nginx/                        # Nginx 部署配置
│   ├── conf/conf.d/              # 站点配置（HTTPS + SPA 路由）
│   └── ssl/                      # SSL 证书
└── assets/                       # 静态资源

🎨 设计理念

不要“AI味“

三栏布局

┌──────────┬────────────────────────────┬──────────┐
│  左侧栏  │         中间内容区          │  右侧栏  │
│  260px   │                            │  340px   │
│          │                            │          │
│ 📚 目录  │   📖 文章 / 📋 八股 / 📝 考试  │ 💬 AI   │
│ 进度条   │   翻页过渡动画              │ 学习助手 │
│ 章节状态 │   自研流程图渲染            │ 流式对话 │
│          │   Prism.js 代码高亮         │ 多模型   │
└──────────┴────────────────────────────┴──────────┘

• 左侧（260px）：目录导航，带进度条和章节完成状态
• 中间：内容阅读区，每章三个书签标签页（📖 文章 / 📋 八股 / 📝 考试）
• 右侧（340px）：AI 学习助手，可配置多个 OpenAI 兼容 API

章节书签 Tab

每章内容顶部有三个书签标签页：

• 📖 文章：章节正文内容，含动画流程图和代码示例
• 📋 八股：面试高频考点总结（带题目计数徽章）
• 📝 考试：课后考试题（单选 + 多选，自动判分，错题收录）

💬 AI 学习助手

内置 AI 对话助手，阅读过程中随时提问：

• 开箱即用：内置免费 API 配置（Agnes AI），无需额外设置
• 自定义模型：支持配置多个 OpenAI 兼容 API（GPT / Claude / Gemini / 国产模型）
• 流式响应：支持 SSE 流式输出，打字机效果实时显示
• 上下文感知：对话自动携带当前章节信息，助教能针对性回答
• 配置持久化：API 配置保存到 localStorage，刷新不丢失
• CORS 代理：内置 cors-proxy.js 代理服务，绕过浏览器跨域限制

📝 考试系统

题库设计

• 题量：21 章，约 130+ 道题（每章 5 单选 + 3 多选）
• 题型：单选题 + 多选题，自动判分
• 来源：data/quiz-bank.json（162KB），按章节组织
• 面试官视角：题目表述像面试官在提问，解析像面试官在点评

考试功能

• ✅ 章节考试：学完一章立即测试
• ✅ 随机考试：全库随机抽题，模拟综合面试
• ✅ 自动判分：提交后即时出分 + 逐题解析
• ✅ 错题本：答错的题目自动记录，可回顾复习
• ✅ 计时器：考试计时，模拟真实面试压力

🛠️ 技术栈

🚀 本地预览

方式一：Python HTTP Server

cd ai-agent-guide
python3 -m http.server 8080
# 打开 http://localhost:8080

方式二：启动 AI 对话助手（可选）

AI 助手默认使用内置免费 API，可直接使用。如需自定义 API，启动 CORS 代理：

node cors-proxy.js 8092
# 代理运行在 http://localhost:8092/proxy/chat/completions

🌐 线上部署

项目使用 Nginx 托管，配置文件位于 nginx/ 目录：

# 1. 将静态文件部署到服务器
scp -r ./* user@server:/usr/share/nginx/html/ai-agent-guide.xiaofuge.cn/

# 2. 配置 Nginx（已包含 HTTPS + SPA 路由）
cp nginx/conf/conf.d/ai-agent-guide.xiaofuge.cn.conf /etc/nginx/conf.d/

# 3. 重载 Nginx
nginx -s reload

Nginx 配置要点：

• HTTP → HTTPS 自动重定向
• SPA 路由回退（try_files $uri /index.html）
• 静态资源 7 天缓存（CSS / JS / 图片 / 字体）
• UTF-8 字符编码

📊 项目数据

📜 License

Apache-2.0