大家好，我是双越。前百度、滴滴资深前端工程师，慕课网金牌讲师，PMP。我的代表作包括：

• wangEditor 开源 web 富文本编辑器，GitHub 18k star。npm 周下载量 20k
• 划水AI Node 全栈 AIGC 知识库，包括 AI 写作、多人协同编辑。复杂业务，真实上线，
• 前端面试派 程序专业的面试导航，刷题、写简历、看面试技巧、内推工作。开源免费，

开始

痛点：很多前端同学只会写页面却不清楚 AI 从最初的 Chatbot 到现在可配置 Tools 与 MCP。再到自定义工作流的演进方法，导致在实际项目中找不到落地入口。

AI 刚出现时仅是一个聊天对话框。随后逐步增加功能：可以连网、可以配置 Tools 和 MCP，再到 Agent 自定义工作流。有了 Agent，就能把 AI 应用到真实业务场景。这是一条“逐步进化 → 落地”的路线。

例如程序员最熟悉的 AI 编程，就是一个典型的 AI Agent 落地案例；按理说，在过去几年里已被 Dify、Coze 等网站很多人在用。这些网站提供可视化工作流，让非算法背景的人也能快速搭建个性化 Agent。

月底国家颁布了“人工智能+”行动意见。无论是中国还是全球，AI 应用将在未来 5 年内持续爆发。

我个人将继续在 AI Agent 领域深耕。把面试、刷题、简历、教程等专业领域全部 AI 帮助，以更高效服务更多使用者。

LLM

痛点：L​LM API 多且收费；本地部署门槛高，不同模型参数差异大，让人不知该选哪个。

LLM 是预测下一个词的模型，它本质上是“补全”。按理说，参数越多，补全越精准。常见模型有 ChatGPT、Gemini、Claude、Deepseek、Qwen、Grok、Llama 等，可通过在线 API 调用或本地部署使用。

交互方式：

• Completion 模式—— 已基本淘汰
• Chat 模式—— 主流选择

MoE通过激活子模型减少成本；微调则只调整少量参数以改变预测倾向。

Prompt Engineering

痛点：提示词写得不好，AI 输出模糊甚至错误； 缺乏程序化的提示词管理与复用机制。

生成内容质量比较依赖 Prompt。模糊的 Prompt 会得到模糊答案。可以通过以下手段效果更好：

• COT 思维链：让模型按步骤思考，提高推理质量。
• 输出格式约束：使用 JSON schema 或 markdown 模板强制结构化返回。
• User‑Prompt 包装：在每次调用前。对使用者原始输入进行重写或补全，而不是直接转发给模型。怎么说呢，

LangChain.js

痛点：#1 前端团队熟悉 Node.js。却缺少统一的链式调用框架；#2 工作流可视化和调试工具不足。

LangChain.js 为 Node.js 环境提供完整的 LLM 调用链路。说到主要组件包括，

• LangGraph：自定义 Agent 工作流。可视化节点与分支逻辑，
• LangSmith：运行时追踪与分析，帮助定位 Prompt 与 Tool 调用问题。

I previously wrote several LangChain tutorials that can serve as learning references:

RAG

痛点：L​LM 本身知识截止时间有限；直接让模型回答专业文档时容易出现幻觉。

RAG 的主要流程是：

1. 将资料拆分成向量并存入向量数据库；按理说，
2. User 提问时检索相关向量；

The concept of “Vector” often confuses front‑end developers:

• A vector is a high‑dimensional coordinate representing a piece of text or image.
• The distance 娱乐ween two vectors reflects semantic similarity.
• You can start with Chroma for local development;later switch to Pinecone or Supabase for production.

向量检索 VS 文本检索

E​lasticSearch 基于关键词匹配，只能找到完全出现的词汇；而向量检索通过相似度匹配，即使关键词不同也能命中语义相近的内容。例如“教程”可以匹配到包含“课程”的段落。

Agent概念拆解

痛点：#1 “Agent”概念太宽泛，不清楚到底需要哪些组件才能完整跑通；按理说，#2 缺少统一的记忆/状态管理方案导致对话上下文丢失。

• L​LM 大模型：a single or multiple models per node.
• Workflow 工作流：A directed graph defining nodes,branching logic & ReAct loops.

  Oops we have stray characters;need correct HTML.

  Continue:

• Let's rewrite properly.

  • wangEditor 开源 web 富文本编辑器。GitHub 18k star，npm 周下载量 20k