AI Agent技术栈选择：Vue3 + NestJS + TypeScript 为什么是绝佳组合

糖墨夕2026-07-15 8:38

市面上的 AI Agent 教程，十本有九本用 Python。这本身没问题，Python 生态确实在 AI 领域最成熟------LangChain、LlamaIndex、AutoGen 这些框架最早都是 Python 版的。但问题是------你是前端，你最熟的是 JavaScript/TypeScript，不是 Python。

让你一边学 Agent，一边学 Python，还要一边学 Python 的 Web 框架（FastAPI、Flask），还要学 Python 的异步编程（asyncio），还要学 Python 的类型系统（Pydantic），还要学 Python 的部署方式（Gunicorn、Uvicorn）......这学习曲线陡得跟悬崖一样。而且学完之后，Python 代码跟你现有的前端项目是割裂的------你没法在一个项目里同时用 TypeScript 写前端和 Python 写后端，或者说能做，但维护成本太高，类型定义要写两套。

所以在这本小册里，我们选择了一条对前端最友好的技术路线：

前端：Vue3（Composition API + TypeScript + Pinia） └── 你已经在用了，不用多学，直接用你熟悉的工具 后端：NestJS（Node.js 企业级框架） └── 用 TypeScript，跟前端同一门语言，装饰器风格像 Vue3 的

这个组合有几个硬核优势，一条条说：

优势一：全栈 TypeScript，类型安全贯穿始终

你有没有遇到过这样的场景：后端改了接口返回格式，前端没跟着改，结果上线之后前端报了一堆 undefined is not a function，排查半天发现是字段名变了？这就是前后端类型不统一的代价。

用 TypeScript 全栈，你可以把类型定义抽成一个共享包：

typescript 复制代码 
// shared/types.ts ------ 前后端共享的类型定义
// 放一个单独的包里，前后端都 import 这个包

/** 聊天消息 */
export interface ChatMessage {
  id: string
  role: 'user' | 'assistant' | 'system' | 'tool'
  content: string
  toolCalls?: ToolCall[]
  createdAt: string
}

/** 工具调用记录 */
export interface ToolCall {
  id: string
  name: string
  arguments: Record<string, any>
  result?: string
  status: 'pending' | 'running' | 'done' | 'error'
}

/** Agent 配置 */
export interface AgentConfig {
  model: string                      // 使用的模型
  temperature: number                // 0-2，控制随机性
  maxTokens: number                  // 最大输出 Token 数
  systemPrompt: string               // 系统提示词
  tools: ToolDefinition[]            // 可用工具列表
}

/** 工具定义 */
export interface ToolDefinition {
  name: string
  description: string
  parameters: Record<string, any>
}

/** Agent 响应（流式） */
export interface AgentStreamChunk {
  type: 'text' | 'tool_call' | 'tool_result' | 'error' | 'done'
  content?: string
  toolCall?: ToolCall
  error?: string
}

前端用 ChatMessage 渲染消息列表，后端用 ChatMessage 构建 LLM 请求。如果后端改了 ChatMessage 的字段，前端编译就会报错，根本不会等到上线才发现。类型安全从开发阶段就保证了前后端的一致性。

优势二：NestJS 的模块化，天生适合 Agent 架构

NestJS 是一个用 TypeScript 写的 Node.js 框架，设计上借鉴了 Angular 的依赖注入和模块化思想。它的核心概念是 Module、Controller、Provider，正好对应 Agent 的各个组件：

NestJS 概念 Agent 组件 职责说明
AgentModule Agent 主控 协调 LLM、工具、记忆，处理用户请求的主入口
LlmModule 大脑（LLM） 封装 OpenAI / Claude / DeepSeek 等模型调用，统一接口
ToolModule 工具（Tools） 注册和管理 Agent 可以调用的工具，支持动态注册
MemoryModule 记忆（Memory） 对话历史存储、向量数据库集成、长期记忆管理
ChatModule 对话接口 提供 SSE 流式接口、WebSocket、REST API

每个模块各司其职，互不干扰。要加新功能？新建一个 Module 就行。而且 NestJS 的依赖注入让你能轻松替换实现------比如从 OpenAI 换成 DeepSeek，只需要改 LlmModule 里的 Provider，其他地方完全不用动。这个设计哲学，跟 Vue3 的"组合式 API，职责分离"是一样的。

来看一个实际的 NestJS Agent 模块长什么样：

typescript 复制代码 
// ─── agent.module.ts ───
// Agent 模块的入口，声明依赖关系
import { Module } from '@nestjs/common'
import { AgentController } from './agent.controller'
import { AgentService } from './agent.service'
import { LlmModule } from '../llm/llm.module'
import { ToolModule } from '../tool/tool.module'
import { MemoryModule } from '../memory/memory.module'

@Module({
  imports: [LlmModule, ToolModule, MemoryModule],
  controllers: [AgentController],
  providers: [AgentService],
  exports: [AgentService]
})
export class AgentModule {}

// ─── agent.controller.ts ───
// 对外暴露的 API 接口
import { Controller, Post, Body, Sse } from '@nestjs/common'
import { AgentService } from './agent.service'
import { Observable } from 'rxjs'

@Controller('api/agent')
export class AgentController {
  constructor(private readonly agent: AgentService) {}

  // SSE 流式接口 ------ 前端用 EventSource 或 fetch 消费
  @Sse('chat')
  chat(@Body() body: { message: string; sessionId: string }): Observable<any> {
    return this.agent.chatStream(body.message, body.sessionId)
  }

  // 普通 REST 接口（非流式）
  @Post('chat/sync')
  async chatSync(@Body() body: { message: string; sessionId: string }) {
    return { reply: await this.agent.chat(body.message, body.sessionId) }
  }
}

// ─── agent.service.ts ───
// Agent 核心逻辑
import { Injectable } from '@nestjs/common'
import { LlmService } from '../llm/llm.service'
import { ToolService } from '../tool/tool.service'
import { MemoryService } from '../memory/memory.service'
import { Observable } from 'rxjs'

@Injectable()
export class AgentService {
  constructor(
    private readonly llm: LlmService,
    private readonly tool: ToolService,
    private readonly memory: MemoryService
  ) {}

  // 非流式对话
  async chat(userMessage: string, sessionId: string): Promise<string> {
    // 1. 加载历史记忆
    const history = await this.memory.getHistory(sessionId)

    // 2. 让 LLM 决策：要不要调工具？
    const decision = await this.llm.decide(userMessage, history, this.tool.getDefinitions())

    // 3. 如果需要调工具，执行工具调用
    if (decision.needsTool) {
      const toolResult = await this.tool.execute(decision.toolCall)

      // 保存工具调用记录到记忆
      await this.memory.saveToolCall(sessionId, decision.toolCall, toolResult)

      // 把工具结果发给 LLM 生成最终回复
      return this.llm.generateFinalResponse(userMessage, toolResult, history)
    }

    // 4. 不需要工具，直接返回 LLM 的回复
    await this.memory.saveMessage(sessionId, { role: 'user', content: userMessage })
    await this.memory.saveMessage(sessionId, { role: 'assistant', content: decision.content })
    return decision.content
  }

  // 流式对话（SSE）
  chatStream(userMessage: string, sessionId: string): Observable<any> {
    // 返回 Observable，NestJS 自动处理 SSE 格式
    return new Observable((subscriber) => {
      this.llm.streamDecide(userMessage, this.tool.getDefinitions())
        .subscribe({
          next: (chunk) => subscriber.next({ data: chunk }),
          error: (err) => subscriber.error(err),
          complete: () => subscriber.complete()
        })
    })
  }
}

结构清晰，职责分明，Vue3 的前端同学一看就懂------这不就是后端的"组件化"吗？ Module 就是组件，Provider 就是 Composable，Controller 就是路由。每个组件管好自己的事，通过依赖注入（类似 Vue 的 inject）互相协作。

优势三：学习成本低，一条技术栈走天下

我们算一笔账，看看两种路线的学习成本：

需要学的内容 Python 路线 TypeScript 路线（本小册）
编程语言 Python 语法、装饰器、上下文管理器、生成器 已经会了
Web 框架 FastAPI 或 Flask，路由、中间件、依赖注入 NestJS（新学一个框架，但概念跟 Vue3 相通）
异步编程 asyncio、async/await（Python 的异步模型跟 JS 不同） 已经会了（JS 的 async/await）
类型系统 Pydantic、Type Hints 已经会了（TypeScript）
包管理 pip、poetry、虚拟环境 已经会了（npm/pnpm）
部署 Gunicorn + Uvicorn + Nginx PM2 / Docker + Nginx（跟 Node.js 部署一样）
AI 框架 LangChain（Python） LangChain.js（API 几乎一样，只是语言不同）

用 TypeScript 路线，你只需要学 NestJS 这一个新东西。Vue3 你已经会了，TypeScript 你已经会了，Node.js 生态你已经很熟了（npm、ESLint、Prettier、Vite、Vitest）。换句话说，你付出的学习成本，80% 都用在了 Agent 开发本身，而不是花在学一门新语言 + 新框架 + 新生态上。

换个角度想：如果你现在用 Python 学 Agent，你每天的时间分配大概是：

Python 路线的时间分配： 30% 学 Python 语法和生态（pip、venv、asyncio、Pydantic） 25% 学 FastAPI 框架（路由、中间件、依赖注入） 25% 学 Agent 本身（工具调用、记忆、RAG、工作流） 20% 踩坑（Python 和 TypeScript 的思维差异导致的 Bug） TypeScript 路线的时间分配： 15% 学 NestJS（一个框架，但概念跟 Vue3 相通） 65% 学 Agent 本身（工具调用、记忆、RAG、工作流） 20% 踩坑（Agent 开发本身的坑，跟语言无关）

一目了然------用 TypeScript 路线，你有 65% 的时间都在学 Agent 本身，而不是在学语言和框架。对于时间宝贵的前端来说，这太重要了。你白天还要上班，晚上和周末才能学，每一分钟都不能浪费。

而且还有一个隐藏优势：你学 NestJS 的过程，本身就是一次"后端思维"的训练。以前你可能只写前端，对后端的依赖注入、中间件、数据库 ORM 这些概念不太熟悉。但学完 NestJS 之后，你不仅会写 Agent，还会写后端了------这相当于买一送一，学一个技能，拿两个技能。

一个真实的学习对比

假设你要学"用 Agent 调用工具"这个功能。

用 Python 路线，你需要：先学 Python 的 async/await（跟 JS 的模型不同，容易踩坑），再学 FastAPI 怎么定义路由和依赖注入，再学 Pydantic 怎么定义参数校验模型，再学 asyncio 怎么处理并发调用。光这些前置知识，可能就要花一两周。

用 NestJS 路线，你只需要：在 NestJS 的 Controller 里写一个 @Post() 装饰器，在 Service 里写 async/await（跟 Vue3 里的 API 调用一模一样），在 Module 里声明依赖关系。你第一天就能写出能跑的 Agent API。

这不是 NestJS 有多好，而是你对 TypeScript 生态已经足够熟悉了，只需要把已有的知识迁移到新场景。

额外福利：AI SDK 生态对 TypeScript 越来越友好

2024 年到 2026 年，TypeScript/JavaScript 的 AI 生态发展得非常快。以前很多 AI 工具只有 Python 版，现在几乎都有 TypeScript 版了：

  • Vercel AI SDK ：Vercel 推出的 AI 开发工具包，支持 OpenAI、Anthropic、Google 等多个模型提供商，原生支持流式输出和 Vue3/React 组件。而且它的 useChat hook 直接封装了流式聊天逻辑，你只需要一行代码就能接入 AI 对话。
  • LangChain.js：LangChain 的 TypeScript 版本，API 跟 Python 版几乎一样，文档也越来越完善。第 8 章会专门讲它。
  • OpenAI Node.js SDK：官方维护的 TypeScript SDK，类型定义完整，用起来跟 Python 版一样流畅。
  • Anthropic TypeScript SDK：Claude 的官方 TypeScript SDK，支持流式输出和工具调用。

说白了，TypeScript 的 AI 生态已经足够成熟了，你完全不需要为了做 AI 开发去学 Python。用你最熟悉的语言，做最前沿的事情------这是这本小册的核心设计理念。

当然了，如果你以后有兴趣，学 Python 也不是坏事。Python 在数据处理、模型训练、科学计算方面确实比 TypeScript 强。但那是"进阶"之后的事，不是"入门"的时候该考虑的。先把 TypeScript 这条路线走通，等你对 Agent 开发有了完整的理解，再学 Python 就是锦上添花，而不是雪中送炭。

这本小册会带你做什么？------ 路线图总览

这本小册一共 15 章，分成四个阶段。每一章都围绕一个核心概念展开，有代码、有比喻、有踩坑记录、有"我当初在这里卡了多久"的真实经历。我不会堆砌一堆理论，而是带你从头到尾，手把手搭出一个能跑的 AI Agent 应用。

以下是完整的路线图：

第一阶段：打好地基（第 1-3 章）

这一阶段我们先不写复杂代码，而是把概念理清楚。很多人一上来就撸代码，结果连 LLM 是什么、Token 是什么都没搞明白，写到一半卡住了，进退两难。磨刀不误砍柴工，这三章就是"磨刀"。

章节 内容 你会搞懂
第 1 章（当前） 为什么你要学 AI Agent？ 前端在 AI 时代的优势、技术栈选择、学习路线全景图
第 2 章 AI Agent 到底是个啥？ 用送外卖、炒菜、订机票这些生活场景，把 Agent 的四个核心概念（大脑、工具、记忆、规划）讲清楚，保证看完就能跟朋友解释
第 3 章 大语言模型：Agent 的"大脑" Token、温度（Temperature）、上下文窗口、System Prompt 这些概念，用 TypeScript 代码跑一遍，彻底搞懂 LLM 的"脾气"

第二阶段：核心技能（第 4-7 章）

这一阶段是 Agent 开发的"内功"。学完这四章，你就掌握了 Agent 开发的全部核心套路，能自己搭一个功能完整的 Agent 了。

章节 内容 你会写出
第 4 章 提示词工程：怎么跟 AI 好好说话 一个可复用的 Prompt 模板系统，支持角色设定、防注入、动态参数、Few-shot 示例
第 5 章 工具调用：Agent 的"手" 一个工具注册中心，Agent 能自动发现并调用工具，支持查天气、搜网页、发邮件、操作数据库
第 6 章 记忆系统：Agent 的"脑子" 对话历史管理 + 向量数据库集成（Chroma/Pinecone），Agent 能记住你说过的话，跨会话保持记忆
第 7 章 RAG：给 Agent 接上你的知识库 一个文档问答系统，把 PDF/文档/网页喂给 Agent，让它能回答只有你公司内部才知道的专业问题

第二阶段学完后的"里程碑"

到第 7 章结束，你就能写出一个"能查资料、能调工具、有记忆的智能客服"了。虽然界面可能还比较简陋，但核心逻辑已经完备。这个 Demo 作为你的项目经验，写在简历上绝对加分。

第三阶段：实战进阶（第 8-11 章）

这一阶段开始上强度，用 LangChain.js 和 LangGraph 搭真正的生产级 Agent。学完这四章，你的 Agent 就不再是"玩具"，而是能处理复杂业务逻辑的"工具"。

章节 内容 你会搭出
第 8 章 LangChain.js 入门 用 LangChain.js 的 Chain 和 Agent 抽象，快速搭建 Agent 原型，理解为什么需要框架
第 9 章 NestJS 搭建 Agent 后端 一个完整的 NestJS Agent API 服务，支持流式 SSE 响应、JWT 鉴权、请求限流、日志记录
第 10 章 LangGraph 工作流编排 用"图"的方式编排复杂 Agent 任务，支持条件分支、循环、暂停/恢复、人机协作
第 11 章 多智能体协作 多个 Agent 分工合作：一个负责搜索、一个负责分析、一个负责写报告，像团队一样高效

第四阶段：全栈闭环（第 12-15 章）

最后一步，把 Agent 包装成一个完整的全栈应用，从开发到部署，打通全链路。

章节 内容 你会搞定
第 12 章 MCP 协议：AI 世界的 USB-C 统一工具调用标准，手写一个 MCP Server，让 Agent 接入任意 MCP 兼容的工具生态
第 13 章 Vue3 全栈实战：前后端联动 一个完整的 AI 对话界面，SSE 流式响应，实时展示 Agent 思考过程、工具调用、Markdown 渲染
第 14 章 部署上线：把 Agent 跑在生产环境 Docker 容器化、Redis 缓存、Nginx 反向代理、API 成本控制、日志监控、灰度发布
第 15 章 下一步怎么走？ 2026 年 AI Agent 趋势、进阶学习路线、推荐资源、开源项目、社区

整个路线图，从概念到代码，从单机到生产，每一步都有对应的 TypeScript 代码。你不需要去学 Python，不需要去啃论文，不需要去读晦涩的学术文章。跟着敲一遍代码，就能从零到一掌握 AI Agent 开发。

怎么读这本小册最高效？

给你几个实在的建议，帮你少走弯路：

  • 不要跳章：前 7 章是基础中的基础，概念是一环扣一环的。跳了第 4 章（提示词），你写第 5 章（工具调用）的时候就会困惑"为什么 LLM 不好好调我的工具？"跳了第 6 章（记忆），你写第 7 章（RAG）的时候就会困惑"为什么 Agent 记不住前面说过的话？"
  • 一定要动手敲代码：看代码和写代码是两码事。这本书里的每个代码示例，你都应该亲手敲一遍。哪怕只是复制粘贴然后改几个参数，也比光看有效得多。肌肉记忆比视觉记忆可靠。
  • 遇到报错别慌：AI 开发特别容易遇到各种奇怪的报错------LLM 返回格式不对、API 超时、Token 超限、工具调用失败。这些都是正常的，不是你的问题。每次解决一个报错，你对 Agent 的理解就深一层。
  • 先跑通，再优化：不要一开始就追求完美。先写出一个能跑的 Demo，哪怕代码很丑、功能很简陋。跑通之后，再回来优化代码结构、加错误处理、提升性能。很多人在"追求完美"的过程中卡住了，最后什么都没写出来。
  • 做好笔记：每学完一章，用自己的话总结一下核心概念。如果你能跟一个不懂技术的朋友讲清楚"什么是 Agent"，那才是真的懂了。

另外，这本小册里会有很多"踩坑记录"------这些都是我在实际开发中真的踩过的坑。比如"为什么 LLM 不调我的工具？""为什么 RAG 搜出来的结果不相关？""为什么 Token 消耗这么快？"看到这些踩坑记录的时候，不要跳过------每一个坑，都能帮你省掉至少半天的时间。而且，踩坑记录里通常包含了"为什么会这样"和"怎么解决"两部分，理解了"为什么"，你以后遇到类似问题就能自己排查。

还有一个小建议：找一个学习搭子。 如果你身边有同事或朋友也在学 AI Agent，拉上他一起。两个人互相督促、互相答疑，学习效率能翻倍。如果实在没有搭子，也可以在 GitHub 仓库的 Issues 区提问，或者在相关的技术社区里找同路人。一个人走得快，一群人走得远，这句话在学新技术的时候尤其适用。

学完这本小册，你能做什么？

学完 15 章之后，你不再是一个"只会写页面的前端"，而是一个能独立开发 AI 应用的全栈工程师。具体来说，你能搞定下面这些真实场景：

场景一：智能客服系统

这是最经典的 AI Agent 应用，也是最多公司正在做的。把你的产品文档、FAQ、历史工单、客服话术全部喂给 Agent，它就能自动回答用户问题。遇到解决不了的问题，自动转人工客服，并且把对话摘要一起发给人工客服，无缝衔接。

而且因为它有记忆，能记住用户之前问过什么，不会问一次回答一次，像个失忆的金鱼。比如用户说"我上次问的那个订单，物流到哪了？"，Agent 能回溯到之前的对话，找到订单号，然后查物流。

技术要点：RAG 知识库 + 工具调用（查订单状态、查物流）+ 多轮对话记忆 + 人机协作。

场景二：数据分析助手

"帮我分析一下上个月的销售数据，找出销量下降最严重的三个品类，然后给一些改进建议。"------用户说一句话，Agent 自动查询数据库、生成图表、写分析报告，一条龙服务。

这个场景特别适合内部工具。以前数据分析师要花半天写 SQL、做图表、写报告，现在说一句话就搞定了。而且 Agent 还能追问------"你觉得下降的原因可能是什么？要不要我进一步分析一下竞品数据？"

技术要点：工具调用（SQL 查询、图表生成）+ 多步骤工作流编排 + LangGraph。

场景三：代码审查助手

把 Git 仓库接给 Agent，每次提交 PR 的时候，Agent 自动 review 代码，指出潜在问题、给出优化建议、检查代码风格，甚至能帮你自动生成单元测试。前端同学最懂前端代码的痛点------你写的 Agent 肯定比通用工具更懂前端的实际需求。

比如，Agent 能识别出"这个 watch 没有加 immediate: true，可能导致首次渲染时状态不一致"，或者"这个 Pinia Store 的 action 里直接操作了 DOM，应该抽到组件里"。这些都是前端特有的坑，通用 AI 工具不一定能识别。

技术要点：工具调用（Git API、代码静态分析）+ 自定义 Prompt 模板 + 知识库（团队编码规范）。

场景四：个人知识管家

把你平时收藏的文章、写的笔记、读书摘录、会议记录全部喂给 Agent，它就是你专属的"第二大脑"。你问"我上次看到那个关于 Vue3 响应式原理的文章在哪？大概讲的是 Proxy 和 Reflect 的？"------Agent 秒回，比你自己翻收藏夹、搜笔记快多了。

更进一步，你可以让 Agent 帮你总结------"帮我总结一下我最近三个月看的所有关于 AI 的文章，提炼出 5 个关键趋势。"------Agent 自动检索你的知识库，做归纳总结。

技术要点：RAG + 向量数据库 + 长期记忆管理 + 文档解析。

场景五：自动化工作流

"每天早上 9 点，帮我汇总昨天的用户反馈，按紧急程度排序，然后发到团队群里。"------Agent 定时执行，自动调多个工具，读取反馈数据库，用 LLM 分析紧急程度，格式化成消息，发到飞书/钉钉/企业微信。

这个场景的关键是"可靠"------Agent 不能出错，万一某天没发，你得能收到告警。所以需要加上错误处理、重试机制、状态监控。

技术要点：定时任务（Cron）+ 工作流编排 + 多工具串联 + 错误处理 + 监控告警。

除了这五个场景，其实还有很多可能性。比如做一个"AI 面试官"帮 HR 筛简历，做一个"AI 家教"帮学生答疑，做一个"AI 运维"自动处理服务器告警。一旦你掌握了 Agent 开发的核心套路，任何一个需要"理解自然语言 + 执行操作"的场景，你都能用 Agent 来解决。这就是 Agent 开发的魅力------它不是某个具体的技术，而是一种全新的"解决问题的方式"。

更重要的是，这些场景不是"未来才会发生"的事情。现在，2026 年，已经有大量的公司在落地这些应用了。电商在用智能客服，金融在用数据分析助手，教育在用 AI 家教，医疗在用 AI 问诊。你学完这本小册，就能直接参与到这些项目中去。而如果你不学，五年后你可能还在写 CRUD 页面，而你的同龄人已经在带 AI 产品团队了。

而且这些场景不是"学完 15 章才能做"

从第 5 章开始，每学完一章，你就能写出一个能跑的小 Demo。比如学完第 5 章（工具调用），你就能写一个"帮你查天气的 Agent"。学完第 7 章（RAG），你就能写一个"问你的文档"的 Agent。学完第 9 章（NestJS），你就能把这个 Agent 包装成 API 服务。不是 15 章学完才能动手，而是边学边做，每章都有产出，每个产出都能直接写到简历上。

在开始之前，你需要准备什么？

就三样东西，你应该已经有了：

  • Vue3 基础 ：会用 Composition API，理解 ref、reactive、computed、watch，用过 Pinia。不需要很精通，能写业务代码就行。如果只是用过 Options API 没写过 Composition API，花半天时间看一下官方文档就够了，不难。
  • TypeScript 基础 ：会定义 interface、type，会用泛型，能看懂类型标注。不用太深入，不需要懂什么"协变逆变""条件类型"这些高级特性。这本小册里的 TypeScript 代码，都是最基础的用法。
  • Node.js 基础 ：会用 npm/pnpm 装包，知道 async/await 怎么用，用过 fetch 或 axios 调接口。不需要会 Express 或 Koa------NestJS 会从零教起。

如果你对 NestJS 完全零基础，也别担心。第 9 章会专门讲 NestJS 的基础，从路由、中间件、Guard、Interceptor 到依赖注入，保证你能跟上。而且因为你已经会 Vue3，NestJS 的很多概念和 Vue3 是通的：

  • NestJS 的 Module 就像 Vue 的 组件------封装一块功能，有自己的 imports、exports
  • NestJS 的 Provider/Service 就像 Vue 的 Composable------封装可复用的逻辑
  • NestJS 的 依赖注入 就像 Vue 的 provide/inject------上层注入，下层使用
  • NestJS 的 Decorator （@Get()、@Post()）就是声明式的路由定义，跟 Vue Router 的配置异曲同工

另外，你需要一个能调用 LLM API 的账号。推荐用 OpenAI （GPT-4o 或 GPT-4o-mini）或者 DeepSeek （便宜很多，效果也非常不错，尤其是中文场景）。实在不想花钱，也可以用本地的 Ollama 跑开源模型（比如 Llama 3、Qwen 2.5），第 3 章会教你怎么配。API 调用费用不用担心------开发阶段用最便宜的模型就够了，一个月几块钱的事。

最后，还有一件事：这本小册的代码仓库。每一章的完整代码都可以在 GitHub 上找到，你不需要从头新建项目，直接 clone 下来就能跑。如果你在某个章节卡住了，或者某个代码示例跑不通，去仓库里找对应章节的代码，对比一下就能发现问题。仓库地址在本书的首页。

另外，本小册里的所有代码示例，我都尽量保持"独立可运行"。也就是说，你把一个代码块复制出来，稍微改一下 API Key 和配置，就能直接跑。不需要先理解前面 5 章的内容才能看懂第 6 章的代码------每章的代码示例都是自包含的。当然，概念上还是建议按顺序读，因为后面的概念建立在前面的基础上。

开发环境建议

虽然上面说了"只需要三样东西"，但我还是想分享一下我自己觉得好用的开发环境配置，供你参考：

  • 编辑器：VS Code 或 Cursor（后者有 AI 补全，写 Agent 代码的时候特别方便，因为 AI Agent 开发里有很多模板化的代码，AI 补全可以帮你省掉大量重复劳动）。
  • Node.js 版本：推荐 Node.js 20 LTS 或更高版本。NestJS 和 LangChain.js 都对 Node.js 18+ 有要求，20 LTS 是最稳妥的选择。
  • 包管理器：推荐 pnpm。这本小册的代码示例都用 pnpm，因为它快、省磁盘空间，而且对 monorepo 支持好（如果你想把前后端放在一个仓库里的话）。
  • API 调试工具：Postman 或 Bruno 或 VS Code 的 REST Client 插件。Agent 开发中你会频繁调试 API 接口，有个好用的 API 调试工具能事半功倍。特别推荐 Bruno，它是本地优先的开源工具，数据存在本地文件夹里，可以用 Git 管理。
  • 数据库：开发阶段用 SQLite 就够了（不需要额外安装），生产环境切到 PostgreSQL。NestJS 的 TypeORM 和 Prisma 都支持这两种数据库，切换只需要改一行配置。
  • 向量数据库：如果你只是想快速体验 RAG（第 7 章），推荐用 Chroma 或者 Pinecone 的免费版。Chroma 可以本地跑，不需要注册账号。Pinecone 有免费额度，足够开发阶段用。

这些工具都不需要你提前安装，用到的时候我会在对应章节提醒你。提前写在这里，是让你心里有个底：Agent 开发的工具链，跟你平时写 Vue3 项目的工具链高度重合，没有什么是你完全陌生的。

关于 AI 焦虑，说两句真心话

我知道很多前端同学最近很焦虑------"AI 会不会取代前端？""我是不是该转行？""前端是不是没前途了？"

我的看法是：AI 不会取代前端，但会用 AI 的前端会取代不会用 AI 的前端。 这不是贩卖焦虑，这是事实。就像十年前，会移动端开发的人取代了只会 PC 端开发的人；五年前，会用 Vue/React 的人取代了只会 jQuery 的人。每一次技术浪潮，淘汰的都不是某个职业，而是某种落后的技能组合。

你现在学 Agent，不是"转行"，而是升级你的技能树。你依然是前端，只是你的武器库里多了一把叫"AI Agent"的利器。这把利器能让你从"实现需求"进化到"创造产品"，从"切图仔"进化到"能独立交付 AI 应用的全栈工程师"。在招聘市场上，一个"会写 AI Agent 的前端"，和一个"只会写 CRUD 页面的前端"，竞争力是天壤之别。

而且，AI Agent 开发这个赛道，现在还处于早期。你越早进来，越容易建立优势。等一两年后大家都开始学了，你再学，就晚了。现在很多公司正在从"要不要用 AI"转向"怎么用好 AI"，这个过程中需要大量的 AI 应用开发者------而这些人，目前非常稀缺。

所以，放轻松，但别偷懒。这本小册的每一章都会陪你走，每一步都有代码可以抄、可以跑。你只需要跟着做，15 章之后，你就是那个"会用 AI 的前端"。

相关推荐
Java面试题总结1 小时前
区间树：反向映射的前置数据结构
java·前端·数据结构
KaMeidebaby1 小时前
卡梅德生物技术快报｜兔单克隆抗体：噬菌体 Fab 免疫文库搭建实操：兔单克隆抗体重组构建完整参数
前端·网络·数据库·人工智能·算法
胡萝卜术10 小时前
从API调用到手写LRU：力扣146「LRU缓存」的哈希表+双向链表终极进化之路
前端·javascript·面试
科技道人10 小时前
记录 默认置灰/禁用 app ‘Search Engine Selector‘ 的disable按钮
开发语言·前端·javascript
天疆说10 小时前
Zotero Connector 在 Edge 里找不到桌面 Zotero（Linux / Zotero 9.0.6 / Edge 150）
linux·前端·edge
李伟_Li慢慢11 小时前
02-从硬件说起WebGL
前端·three.js
kyriewen12 小时前
看了微软几万人用AI编程的数据——效率涨24%的代价没人提
前端·ai编程·claude
2601_9637713712 小时前
How to Scale Your WordPress Store Traffic in 2026
前端·php·plugin
亿元程序员12 小时前
老板说我的3D箭头游戏用来做试玩太普通了，没人想玩，让我变点花样...
前端
热门推荐
01GitHub 镜像站点022026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片03AI科技热点日报 | 2026年07月01日04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06GPT-5.5 对比 GPT-5.6 Sol、Terra、Luna：官方性能数据与选型分析07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026 年 AI 大模型 & AI 编程工具实战全总结092026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf102026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？