大家好，我是双越。wangEditor 作者，前百度 滴滴 资深前端工程师。慕课网精英讲师，PMP，前端面试派 作者。

我正致力于两个项目的开发和升级。感兴趣的可以私信我，加入项目小组。

• 智语 带你从 开发一个 AI Agent 智能体。真实发布上线，像 openclaw 小龙虾一样。
• 划水AI 前端转全栈。从 开发一个复杂、高难度、全流程的全栈项目，真实发布上线。

这篇文章说一下 从 开发 AI Agent 需要的 个技能。怎么说呢，如果你也想一起来可私信我～ 沉浸式的体验从 开发一个 AI 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 开发的必备技能，让你从 作出一个优秀的 Agent 产品。

AI Agent 架构设计

去年开发的第一版是基于一个开源项目二次开发的，是 AI chat 项目形式。现在重构的项目，完全是我自己从 开始一步一步搭建出来的。包含了当前 AI Agent 所有关键技术。包括 tools skills memory context permission subagent session command hook MCP-server ... 其他优秀的 Agent 也都是这些功能，现在 Agent 已经发展的比较稳定了。

LLM

LLM 大模型。是一切的基础，所有的决策、每一个步骤都要经过 LLM 的推理和判断。一个通用的 Agent 应该支持所有常见的 LLM API，至少得支持国内的、本地的 LLM 接口。

Query Engine

有了 LLM 接口，每一步的调用也需要单独封装，要考虑很多种情况，包括

• stream 流式输出，模拟打字效果
• abort 取消接口调用，出现失误可及时取消
• error 错误处理。例如网络错误、接口错误
• retry 重试，有错误要自动重试 - 次
• 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 是手脚。设计一个通用的 Agen t 至 少要内置如下 tools

• readfile 读取一 个文件的内容
• writefile 新建一 个文件或重写一 个文件
• exec 执行一 个 shell 脚本
• websearch 搜索引擎
• webfetch 获取或下载一 个网络资源
run_python 运行一段 python 脚本 < / li>

这只是最基础的。没有这些，Agent 就跑不起来。但 tools 是贯穿 agent 全局的。话说回来，例如下文的其他功能也会用到 tools。再例如通过 MCP server 来 第三方能力，也是用的 tools

Skills 技能

一个 skill 就是一 个技能手册。skills 就是 Agent 的技能包和图书馆，AI 会选择和主题相关的技能，根据这些技能的指导，回复质量会更高、 更符合使用者要求。甚至，一 个 skill 的文本都可以定义工作流，LLM 能很好的理解。年之前可都是通过画流程图来定义的，那个很麻烦。这次重构的项 目天生支持 skills，你安装和配置第三方 skill。你还可以创建自己的 skill

Session 会话

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

Context 上下文

默认情况下每次 AI 接口请求。Agent 会把当前所有聊天记录都发过去，这样很容易造成 Context 内容臃肿，所以会产生 AI幻觉、 token 用量大、 花费大等问题。一 个优秀的 Agent 一定得有 Context压缩机制，而且不能简单粗暴的裁剪、 或让 AI要结合情况分析。重构以后的项 目有  层压缩机制

• 压缩 tool 输入内容。如果内容过多，则存在硬盘，只给一 个文件地址，让 Agen t 按需读取。< / li> 压缩聊天记录中的 tool message，这都是一些冗余信息，简化它们 < / l i> 压 缩整个会话，让 A I主要内容 —— 但有要求和模板。不是 A I随意发挥 < / l i> 裁剪聊天记录，保底行为 < / l i> < / u l>

  如下图，当 Contex t 内容超过 %会自动开启压缩，并建议使用/new 命令开启新会话。< / p>

  PS .上图为了测试，刻意把 toke n limi t 设置为，测试完会还原为默认的。

  Memory记忆

  一 个 Agen t 个人助手，必须有记忆功能。例如我告诉它“我叫双越，我是一名程序员”，它要能记住我的姓名、 职业。它还要能记住我最近做的事情，还有我的一些个人习惯。老实说，

  重构后的项 目 有  层记忆。这也是其他开源 Agen t 常用的设计方式

  • 短期记忆，当前 sessio n 的记忆，就是 contex t 的内容 & lt;/l i> 长期记忆，跨 sessio n 的记忆。会记录一段时间，但因为时间因素而衰减 & lt;/l i> Profil e 记录使用者特点 & lt;话说回来，/l i>

    Agen t 确实会有安全问题。而且也确实无法真正 %保证绝对安全。任何软件都可能有漏洞，但我们能做的是 尽量保证绝大部分使用场景下的安全考量，拦截危险操作和危险目录。

    安 全级别低的 rea d networ k 可以直接执行 too l，安 全级别高的需要其他防护措施。

    如果不是敏感的。要看是否是当前目录内的，如果不是则争取使用者同意。

    rm -r f /，如果是则直接拒绝。 agen t 安全防护流程就是下面  个阶段：