大家好,我是双越。wangEditor 作者,前百度 滴滴 资深前端工程师,慕课网金牌讲师,PMP,前端面试派 作者。
去年我搞了一个 AI Agent 项目 【智语】 并有很多同学参与学习和开发。随着一年的发展,AI Agent 相关技术也发生了极大的变化,因此我要重构这个项目,做一个符合当前 AI Agent 技术要求的项目。
如果你也想一起来,可私信我~ 沉浸式的体验从 0 开发一个 AI Agent 的详细过程。
项目介绍
先讲做什么,再讲怎么做。
Agent 是什么
很多同学可能还不知道 Agent 到底是一个什么东西,它和 AI LLM 有什么关系。
- AI 人工智能,是一个很宽泛的概念,泛指我们当前正在发展的人工智能行业中的所有内容
- LLM 大预言模型,这个好理解,就是现在常用的 GPT Claude Deepseek Qwen kimi 等大模型
- Agent 智能体,指的是在大模型基础上创建的应用,如 Claude Code、Cursor、Manus、OpenClaw Hermes 等。
可以做一个比喻,LLM 大模型就是大脑,聪明但能力不足,Agent 就是给大脑装配上手脚口鼻眼等,不仅能思考,还能真正的做事情。

做一个什么项目?
去年做的第一版项目是一个 AI 面试官,应用范围比较窄,主要是优化简历、模拟面试、解答面试题...
这次重构我要做一个通用的,参考当前比较流行的 AI Agent ,做一个像 OpenClaw 小龙虾一样的项目 。
只不过它目前是运行在控制台的,像 Claude Code 一样。当前还不能连接飞书、钉钉等 IM 聊天工具。
但功能、配置是和 OpenClaw 完全一样的。你可以和 AI 聊天、让它读写文档、配置 Skills 、设置定时任务、使用 MCP server 发送消息等...
它也是一个优秀的个人 AI 助理,而且更轻量级、低成本。

语言和框架
这次我依然选择使用 Typescript 语言和 Nodejs 运行时,社区丰富,且对前端开发人员很友好。
继续使用 langChain 和 langGraph 框架,它们可以很快的搭建和配置一个 Agent 。
前端开发为何要学习 Agent ?
第一,学习 Agent 开发,才能让你更好的使用 Agent 工具,例如 Claude Code ,Cursor ,Openclaw 和本项目有很多地方的设计是相同的。
第二,学习 Agent 开发,让你有机会转型做 AI 工程师。这个项目几乎涵盖了所有 Agent 开发的必备技能,让你从 0 作出一个优秀的 Agent 产品。
AI Agent 架构设计
去年开发的第一版是基于一个开源项目二次开发的,是 AI chat 项目形式。
现在重构的项目,完全是我自己从 0 开始一步一步搭建出来的,包含了当前 AI Agent 所有核心技术。包括 tools skills memory context permission subagent session command hook MCP-server ...
其他优秀的 Agent (如 claude-code cursor openclaw )也都是这些功能,现在 Agent 已经发展的比较稳定了。

LLM
LLM 大模型,是一切的基础,所有的决策、每一个步骤都要经过 LLM 的推理和判断。
一个通用的 Agent 应该支持所有常见的 LLM API ,至少得支持国内的、本地的 LLM 接口。
Query Engine
有了 LLM 接口,每一步的调用也需要单独封装,要考虑很多种情况,包括
- stream 流式输出,模拟打字效果
- abort 取消接口调用,出现失误可及时取消
- error 错误处理,例如网络错误、接口错误
- retry 重试,有错误要自动重试 2-3 次
- limit 限制,例如 rate limit 调用频率限制,token limit 上下文内容的限制等
如下图,用户发送了一个 AI 请求,AI 流式输出回复内容,中途你可以按 ESC 取消这个请求。

ReAct Agent
ReAct = Reasoning 推理 + Action 执行,一边推理一边执行,这是当前 Agent 得基础流程。
- 用户提交一个信息,发送请求到 LLM
- 看 LLM 的回复是否需要调用 tool 工具?
- 如果不需要调用 tool ,则说明已经是最终答案,直接回复给用户
- 如果需要,则调用 tool 得到结果,再发送到 LLM
- 继续第二部判断
所以,只要有 LLM 和 tools ,外加这个流程设计,就已经是一个 Agent 基础了。

Tools 工具
上文提到 ReAct Agent 基础版本就是:LLM + tools ,LLM 是大脑,tools 是手脚。
设计一个通用的 Agent 至少要内置如下 tools
- read_file 读取一个文件的内容
- write_file 新建一个文件或重写一个文件
- exec 执行一个 shell 脚本
- web_search 搜索引擎
- web_fetch 获取或下载一个网络资源
- run_python 运行一段 python 脚本

这只是最基础的,没有这些, Agent 就跑不起来。但 tools 是贯穿 agent 全局的。
例如,下文的其他功能也会用到 tools 。
再例如,通过 MCP server 来扩展第三方能力,也是用的 tools
Skills 技能
一个 skill 就是一个技能手册,skills 就是 Agent 的技能包和图书馆,AI 会选择和主题相关的技能,根据这些技能的指导,回复质量会更高、更符合用户要求。
甚至,一个 skill 的文本都可以定义工作流,LLM 能很好的理解。2025 年之前可都是通过画流程图来定义的,那个很麻烦。
这次重构的【智语】项目天生支持 skills ,你安装和配置第三方 skill ,你还可以创建自己的 skill

Session 会话
之前的项目是 AI Chat 形式,左侧是对话列表,右侧是聊天区域。
重构以后就不是这个形式了,但还得有对话的管理。使用 slash command 形式,和 Claude Code 一样。
使用 /new 可新开启一个会话,使用 /sessions 命令获取最近 20 条历史对话,使用 /rewind xxx 可回复到之前的某一个会话中。

Context 上下文
默认情况下,每次 AI 接口请求,Agent 会把当前所有聊天记录都发过去,这样很容易造成 Context 内容臃肿,因此会产生 AI 幻觉、token 用量大、花费大等问题。
所以一个优秀的 Agent 一定得有 Context 压缩机制,而且不能简单粗暴的裁剪、或让 AI 总结,要结合情况分析。
重构以后的【智语】项目有 4 层压缩机制
- 压缩 tool 输入内容,如果内容过多,则存在硬盘,只给一个文件地址,让 Agent 按需读取。
- 压缩聊天记录中的 tool message ,这都是一些冗余信息,简化它们
- 压缩整个会话,让 AI 总结核心内容 ------ 但有要求和模板,不是 AI 随意发挥
- 裁剪聊天记录,保底行为
如下图,当 Context 内容超过 80% 会自动开启压缩,并建议使用 /new 命令开启新会话。

PS. 上图为了测试,刻意把 token limit 设置为 4000 ,测试完会还原为默认的 256,000
Memory 记忆
一个 Agent 个人助手,必须有记忆功能。
例如,我告诉它"我叫双越,我是一名程序员",它要能记住我的姓名、职业。它还要能记住我最近做的事情,以及我的一些个人习惯。

重构后的【智语】项目有 3 层记忆,这也是其他开源 Agent 常用的设计方式
- 短期记忆,当前 session 的记忆,就是 context 的内容
- 长期记忆,跨 session 的记忆,会记录一段时间,但随着时间因素而衰减
- Profile 记录用户画像
Permission 权限
记得 Openclaw 刚开始火爆网络时,很多人担心它的安全问题,不建议安装在个人电脑上。
Agent 确实会有安全问题,而且也确实无法真正 100% 保证绝对安全。任何软件都可能有漏洞。
但我们能做的是,尽量保证绝大部分应用场景下的安全考量,拦截危险操作和危险目录。
首先,把当前所有 tools 设置权限级别:read write exec network db
安全级别低的 read network 可以直接执行 tool ,安全级别高的需要其他防护措施。
再判断当前操作的文件、目录等,是否是系统敏感文件或敏感目录。如果是直接拒绝。
如果不是敏感的,要看是否是当前目录内的,如果不是则争取用户同意。
还要判断执行的 shell 脚本是否是危险命令,如 rm -rf / ,如果是则直接拒绝。
agent 安全防护流程就是下面 4 个阶段:
阶段 1(Bash 预检)→ 阶段 2(Deny 规则)→ 阶段 3(Allow 规则)→ 阶段 4(Ask)
如下图,我想让 agent 读取我系统的一个敏感文件,它提示无法读取。

Hook 钩子
Permission 权限的规则都是固定的,且是 agent 项目内置的。你不能修改,也不好扩展。
Hook 就是一个让用户自定义权限规则的方式,你可以在多种时机去定义自己的规则。
例如,在调用 tool 之前,你可以定义什么文件不能被操作,如 .env
例如,在会话开始之前,你可以定义聊天内容中添加什么内容
Openclaw 社区中当前最火爆的 skill 叫做 self-improving-agent ,它就可以使用 hook 来集成内容。说明 Hook 已经是 agent 的一个必备模块了。

SubAgent 子智能体
当一个聊天的内容越来越多、越来越乱,就很容易导致 Context 超过 token limit ,以及 AI 幻觉。
解决这个问题的方式之一,就是使用 subagent 来做一些独立的事情。
subagent 上下文和 main-agent 上下文是完全分开的,它不会影响到 main-agent context 大小。
所以,subagent 也是一个 agent 项目必备的能力。
如下图,我可以启动一个 subagent 帮我做一件事。无论你怎么做,最后告诉我结果即可。

其他
以上是一个 AI Agent 得核心模块,还有一些其他内容。
一个 AI Agent 要能支配置 MCP server ,一边扩展第三方能力。但 MCP server 也有很多局限性,它会导致 agent 请求 AI 接口时携带大量 tools ,影响效率和成本。现在很多人也在对比 MCP server 和 skills + cli ,后者也在社区中被推广。
slash command 也是 agent 常见功能,例如上文讲到的 /new /rewind /sessions /compact
RAG 检索增强生成,以及 vector 向量数据库,在当前 agent 设计中的重要性被降低了很多。主要是因为它的成本较高,在个人使用的场景下,用其他方式可以代替。
还有,由于是本地运行的 agent ,它天生易于读取本地文件(文档、表格、图片等),只要 LLM 支持就没问题。
另外,后面我会考虑支持语音输入等高级功能,让用户体验更好一些。
总结
浅层学习看输入,深入学习看输出。
无论你刷多少朋友圈,看多少文章和视频,看的都是皮毛,看完就忘。
只有你从 0 开始把这些东西一步一步做出来,你才是真正的理解了 AI Agent ,才能有机会步入这个行列。
我自己就是这样的,一开始大量的摄入,后来总结整理出一个知识体系,最后实践出一个真实的项目。
期待你和我一起来搞 Agent ~