用 TypeScript 写 Agent:Mastra、Vercel AI SDK 与前后端一体

今天要解决的问题

这是专题篇的一课,建议在 Day 49 · 界面与流式体验 之后读。Day 49 你做了 SupportPilot 的 Next.js 前端,后端是 Python,事件协议是我们自己定义的,前端用 fetch 加 eventsource-parser 自己读流。当时我说过:如果起一个全新项目、后端也是 Node,Vercel 的 AI SDK 会省很多代码。今天就把这条路走一遍。

为什么值得专门讲?看我们 10 月抓的 JD(docs/jd-research):TypeScript/JS 在海外合计 34% 的岗位里出现,美国本土 45%,海外远程 41%,国内是 27%。海外很多 AI 创业公司的整个产品就是一个 Next.js 应用,Agent 跑在 Route Handler 里,他们招人时更看重「能不能一个人把 Agent 和界面一起做完」。你如果是前端出身,这一课是你在面试里最好讲的故事。

学完你要能做到:

1. 说清 AI SDK 7、Mastra、OpenAI Agents SDK(JS 版)各自定位、当前版本、谁适合用。
2. 用 AI SDK 7 的 ToolLoopAgent 写一个带三个工具的 Agent,其中退款工具要用户在界面上点确认才执行。
3. 用 useChat 把工具调用和审批渲染成卡片,讲清楚 UI Message 的 parts 和工具 part 的几种 state。
4. 用 Mastra 写同一个 Agent,说出它比 AI SDK 多了什么。
5. 在「Python 后端 + TS 前端」和「全 TS」之间做选择,并说出理由。

预计用时 4–5 小时。前置:Day 23 的 cloudledger.db、Day 25 的人工审批概念、Day 49 的 Next.js 项目经验。需要 Node.js 22 以上(AI SDK 7 的 package.json 写着 engines: node >=22,Mastra core 要求 22.13 以上),node -v 先看一眼。

版本说明:下面的版本号是 2026 年 10 月 22 日从 npm 查的,API 用法我对照了 ai@7.0.148 和 @ai-sdk/react@4.0.152 发布包里的类型声明(dist/index.d.ts)以及官方文档。整个应用我没有在本机跑过,文中的运行结果都标了「大致长这样」,你跑出来如果不同,以你的为准,也欢迎在评论区告诉我。

TypeScript 这边有哪些选择

拿 Day 27 那张五层图对照:AI SDK 在第 ① 层偏上一点,它给你模型调用、工具循环和前端协议,流程怎么编排你自己写;Mastra 和 LangGraph.js 在第 ③ 层,给你编排积木;OpenAI Agents SDK 在第 ④ 层。今天主讲 AI SDK,因为它是 TS 生态的公共底座,Mastra 等很多框架都建在它上面;Mastra 作为对照写一遍。

AI SDK 从 6 到 7 有一批破坏性变更,网上大量教程还停在 5 或 6,照抄会报错。我从官方的 7.0 迁移指南里挑了和今天有关的几条:

• 停止条件 stepCountIs 改名为 isStepCount(我在 7.0.148 的导出里看到旧名还作为别名保留着,但新代码用新名字)。
• 工具上的 needsApproval 废弃,改成在调用或 Agent 上配置 toolApproval: { 工具名: 'user-approval' }。
• ToolLoopAgent 的 system 改叫 instructions,onFinish/onStepFinish 改叫 onEnd/onStepEnd。
• 必须 Node 22 以上,所有包只提供 ESM,不能再 require()。
• prompt 或 messages 里默认不允许出现 system 消息,system prompt 只能走 instructions。

整体结构

<rect x="236" y="30" width="170" height="200" rx="4" fill="var(--mem-wash)" stroke="var(--mem)"/>
<text x="248" y="52" fill="var(--ink)">/api/chat route.ts</text>
<text x="248" y="74" font-size="11" fill="var(--ink-soft)">ToolLoopAgent</text>
<text x="248" y="92" font-size="11" fill="var(--ink-soft)">isStepCount(8)</text>
<text x="248" y="110" font-size="11" fill="var(--ink-soft)">toolApproval</text>

<rect x="456" y="30" width="168" height="90" rx="4" fill="none" stroke="var(--mem)"/>
<text x="468" y="52" fill="var(--ink)">模型</text>
<text x="468" y="74" font-size="11" fill="var(--ink-soft)">OpenAI 兼容接口</text>
<text x="468" y="92" font-size="11" fill="var(--ink-soft)">DeepSeek 等</text>
<rect x="456" y="140" width="168" height="90" rx="4" fill="none" stroke="var(--compute)"/>
<text x="468" y="162" fill="var(--ink)">ledger.ts</text>
<text x="468" y="184" font-size="11" fill="var(--ink-soft)">better-sqlite3</text>
<text x="468" y="202" font-size="11" fill="var(--ink-soft)">cloudledger.db 副本</text>

这个设计里有一点和 SupportPilot 很不一样,先说清楚:useChat 的审批是「当前这个用户」点确认。SupportPilot 的退款需要另一个人(客服主管)在另一个页面审批。所以今天的 create_refund_request 工具,用户点确认之后,也只是在库里写一条 pending_approval 的申请,和 Day 23 一样,真正退款仍然要主管审。「这一步要不要人看一眼」和「这件事要不要有权限的人批」是两件事,别用前者替代后者。

建项目

cd agent-60-lab && mkdir -p topics/ts-agents && cd topics/ts-agents
npx create-next-app@16.4.2 ledger-next --ts --app --no-eslint --no-tailwind --src-dir --import-alias "@/*" --use-npm --yes
cd ledger-next
npm i ai@7.0.148 @ai-sdk/react@4.0.152 @ai-sdk/openai-compatible@3.0.75 zod@4.6.7 better-sqlite3@13.0.3
npm i -D @types/better-sqlite3@9.6.0
mkdir -p data && cp ../../../w4/cloudledger/cloudledger.db data/

.env.local(Next.js 自动读,不要提交):

# agent-60-lab/topics/ts-agents/ledger-next/.env.local
LLM_BASE_URL=https://api.deepseek.com
LLM_API_KEY=sk-...
LLM_MODEL=deepseek-flash
CLOUDLEDGER_DB=./data/cloudledger.db
TOOL_APPROVAL_SECRET=换成一串随机字符,比如 openssl rand -hex 32 的输出

业务层:ledger.ts

先把三个工具的业务逻辑写成普通函数,和 AI SDK 无关。这样 Mastra 版本也能直接复用。

// agent-60-lab/topics/ts-agents/ledger-next/src/lib/ledger.ts
import Database from 'better-sqlite3';

const db = new Database(process.env.CLOUDLEDGER_DB ?? './data/cloudledger.db', { fileMustExist: true });

export type Customer = { id: string; name: string; email: string; company: string };
export type InvoiceStatus = 'paid' | 'open' | 'void' | 'refunded';
export type Invoice = {
  id: string;
  amount_cents: number;
  amount_yuan: string;
  status: InvoiceStatus;
  issued_at: string;
  paid_at: string | null;
};

const yuan = (cents: number) => (cents / 100).toFixed(2);

export function findCustomer(query: string): Customer[] {
  const q = query.trim();
  const like = `%${q}%`;
  const rows = db
    .prepare('SELECT id, name, email, company FROM customers WHERE id = ? OR email LIKE ? OR name LIKE ? OR company LIKE ? LIMIT 5')
    .all(q.toUpperCase(), like, like, like) as Customer[];
  if (rows.length === 0) {
    throw new Error(`没有找到匹配「${query}」的客户。可以换成邮箱或客户编号再试。`);
  }
  return rows;
}

export function listInvoices(customerId: string, status: InvoiceStatus | undefined, limit: number): Invoice[] {
  let sql = 'SELECT id, amount_cents, status, issued_at, paid_at FROM invoices WHERE customer_id = ?';
  const args: (string | number)[] = [customerId];
  if (status) {
    sql += ' AND status = ?';
    args.push(status);
  }
  sql += ' ORDER BY issued_at DESC, id DESC LIMIT ?';
  args.push(limit);
  const rows = db.prepare(sql).all(...args) as Omit<Invoice, 'amount_yuan'>[];
  return rows.map((r) => ({ ...r, amount_yuan: yuan(r.amount_cents) }));
}

export function createRefundRequest(invoiceId: string, amountYuan: number, reason: string) {
  const run = db.transaction(() => {
    const inv = db.prepare('SELECT amount_cents, status FROM invoices WHERE id = ?').get(invoiceId) as
      | { amount_cents: number; status: InvoiceStatus }
      | undefined;
    if (!inv) throw new Error(`发票 ${invoiceId} 不存在。先用 list_invoices 查到正确的发票号。`);
    if (inv.status !== 'paid') throw new Error(`发票 ${invoiceId} 状态是 ${inv.status},只有 paid 的发票能退款。`);
    const { already } = db
      .prepare("SELECT COALESCE(SUM(amount_cents), 0) AS already FROM refund_requests WHERE invoice_id = ? AND status != 'rejected'")
      .get(invoiceId) as { already: number };
    const cents = Math.round(amountYuan * 100);
    const left = inv.amount_cents - already;
    if (cents > left) {
      throw new Error(`最多还能申请 ${yuan(left)} 元(发票 ${yuan(inv.amount_cents)} 元,已申请 ${yuan(already)} 元)。`);
    }
    const info = db
      .prepare("INSERT INTO refund_requests (invoice_id, amount_cents, reason, status, created_at) VALUES (?, ?, ?, 'pending_approval', ?)")
      .run(invoiceId, cents, reason, new Date().toISOString().slice(0, 19));
    return { refund_request_id: Number(info.lastInsertRowid), status: 'pending_approval' as const, amount_yuan: yuan(cents) };
  });
  return run();
}

Agent:ToolLoopAgent 加工具审批

// agent-60-lab/topics/ts-agents/ledger-next/src/lib/agent.ts
import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
import { isStepCount, tool, ToolLoopAgent, type InferAgentUIMessage } from 'ai';
import { z } from 'zod';
import { createRefundRequest, findCustomer, listInvoices } from './ledger';

const llm = createOpenAICompatible({
  name: 'llm',
  baseURL: process.env.LLM_BASE_URL!,
  apiKey: process.env.LLM_API_KEY,
  includeUsage: true,
});

export const accountant = new ToolLoopAgent({
  model: llm(process.env.LLM_MODEL!),
  instructions:
    '你是云簿的账务专员。先用工具查事实,不要编造发票号和金额。确认是重复扣款时,可以调用 create_refund_request 提交退款申请,金额等于重复的那一笔。',
  temperature: 0,
  tools: {
    find_customer: tool({
      description: '按邮箱/姓名/公司/编号查找客户,返回最多 5 条。查订阅和发票前先用它拿到 customer_id。',
      inputSchema: z.object({
        query: z.string().describe('客户邮箱、姓名、公司名或客户编号(如 C007),支持部分匹配'),
      }),
      execute: async ({ query }) => findCustomer(query),
    }),
    list_invoices: tool({
      description: '列出客户最近的发票(按开票日期倒序),金额单位为元。可按状态过滤。',
      inputSchema: z.object({
        customer_id: z.string().regex(/^C\d{3}$/).describe('客户编号,如 C007'),
        status: z.enum(['paid', 'open', 'void', 'refunded']).optional(),
        limit: z.number().int().min(1).max(20).default(6),
      }),
      execute: async ({ customer_id, status, limit }) => listInvoices(customer_id, status, limit),
    }),
    create_refund_request: tool({
      description: '提交一条退款申请,状态为 pending_approval,不会立刻退钱,需要客服主管审批。只能对 paid 状态的发票申请。',
      inputSchema: z.object({
        invoice_id: z.string().describe('要退款的发票号,如 INV-2026-0123'),
        amount_yuan: z.number().positive().describe('退款金额,单位元'),
        reason: z.string().min(4).max(200).describe('退款原因,写清楚依据'),
      }),
      execute: async ({ invoice_id, amount_yuan, reason }) => createRefundRequest(invoice_id, amount_yuan, reason),
    }),
  },
  toolApproval: { create_refund_request: 'user-approval' },
  experimental_toolApprovalSecret: process.env.TOOL_APPROVAL_SECRET,
  stopWhen: isStepCount(8),
});

export type AccountantMessage = InferAgentUIMessage<typeof accountant>;

路由:

// agent-60-lab/topics/ts-agents/ledger-next/src/app/api/chat/route.ts
import { createAgentUIStreamResponse } from 'ai';
import { accountant } from '@/lib/agent';

export const runtime = 'nodejs';

export async function POST(req: Request) {
  const { messages } = await req.json();
  return createAgentUIStreamResponse({ agent: accountant, uiMessages: messages });
}

前端:useChat 和工具卡片

// agent-60-lab/topics/ts-agents/ledger-next/src/app/page.tsx
'use client';

import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport, lastAssistantMessageIsCompleteWithApprovalResponses } from 'ai';
import { useState } from 'react';
import type { AccountantMessage } from '@/lib/agent';

export default function Page() {
  const [input, setInput] = useState('user007@example.com 这个客户 10 月有没有被重复扣款?有的话帮我提交退款申请。');
  const { messages, sendMessage, status, addToolApprovalResponse } = useChat<AccountantMessage>({
    transport: new DefaultChatTransport({ api: '/api/chat' }),
    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
  });

  return (
    <main style={{ maxWidth: 720, margin: '0 auto', padding: 16 }}>
      {messages.map((m) => (
        <section key={m.id} aria-label={m.role === 'user' ? '你' : '账务专员'}>
          {m.parts.map((part, i) => {
            switch (part.type) {
              case 'text':
                return <p key={i}>{part.text}</p>;
              case 'tool-find_customer':
              case 'tool-list_invoices':
                return (
                  <details key={i}>
                    <summary>
                      {part.type.slice(5)} · {part.state}
                    </summary>
                    <pre>{JSON.stringify(part.state === 'output-available' ? part.output : part.input, null, 2)}</pre>
                    {part.state === 'output-error' && <p role="alert">{part.errorText}</p>}
                  </details>
                );
              case 'tool-create_refund_request':
                if (part.state === 'approval-requested') {
                  return (
                    <div key={i} role="group" aria-label="退款申请确认">
                      <p>
                        要提交退款申请吗?发票 {part.input.invoice_id},金额 ¥{part.input.amount_yuan},原因:{part.input.reason}
                      </p>
                      <button onClick={() => addToolApprovalResponse({ id: part.approval.id, approved: true })}>提交申请</button>
                      <button onClick={() => addToolApprovalResponse({ id: part.approval.id, approved: false, reason: '用户取消' })}>
                        取消
                      </button>
                    </div>
                  );
                }
                if (part.state === 'output-available') {
                  return <p key={i}>已提交退款申请 #{part.output.refund_request_id},等待主管审批。</p>;
                }
                if (part.state === 'output-denied') {
                  return <p key={i}>你取消了这次退款申请。</p>;
                }
                return <p key={i}>退款申请:{part.state}</p>;
              default:
                return null;
            }
          })}
        </section>
      ))}
      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (!input.trim()) return;
          sendMessage({ text: input });
          setInput('');
        }}
      >
        <input value={input} onChange={(e) => setInput(e.target.value)} style={{ width: '100%' }} />
        <button type="submit" disabled={status !== 'ready'}>
          发送
        </button>
      </form>
    </main>
  );
}

运行:

npm run dev

打开 http://localhost:3000,直接点发送。整个过程大致是这样的(具体措辞和工具调用次数每次会有出入):

1. 出现 find_customer · output-available 卡片,展开能看到 C007 刘静的那条记录;
2. 出现 list_invoices · output-available,展开是 5 张或更多发票,头两张是 10 月 8 日的 INV-2026-0123 和 INV-2026-0026;
3. 一段文字说明 10 月 8 日重复扣款;
4. 出现退款申请确认框:「发票 INV-2026-0123,金额 ¥2392,原因:……」,两个按钮;
5. 点「提交申请」,界面自动发起第二次请求,出现「已提交退款申请 #N,等待主管审批」,最后模型补一句总结。

验证一下数据库确实写进去了:

sqlite3 data/cloudledger.db "SELECT id, invoice_id, amount_cents, status FROM refund_requests ORDER BY id DESC LIMIT 1;"

再试一次,这回点「取消」,数据库不应该有新记录。再试第三次,把问题改成「给 INV-2026-0029 退 3000 元」:即使你点了确认,createRefundRequest 也会因为超过发票金额抛错,模型会看到「最多还能申请 2392.00 元」并告诉你。这三次跑下来,你就验证了三层防线各管一段:界面确认管「用户知不知道」,业务校验管「规则允不允许」,主管审批管「有没有权限」。

同一个 Agent 用 Mastra 写

AI SDK 是工具包,Mastra 是框架。拿同一个 Agent 对比最能看出区别。Mastra 的文档说,createTool 的 execute 签名是 (inputData, context),模型可以直接写 'provider/model' 字符串,也可以用对象形式指向任意 OpenAI 兼容的地址。

npm i @mastra/core@1.79.0
npm i -D tsx@4.23.15

// agent-60-lab/topics/ts-agents/ledger-next/scripts/mastra-accountant.ts
import { Agent } from '@mastra/core/agent';
import { createTool } from '@mastra/core/tools';
import { z } from 'zod';
import { findCustomer, listInvoices } from '../src/lib/ledger';

const findCustomerTool = createTool({
  id: 'find_customer',
  description: '按邮箱/姓名/公司/编号查找客户,返回最多 5 条。查订阅和发票前先用它拿到 customer_id。',
  inputSchema: z.object({ query: z.string().describe('客户邮箱、姓名、公司名或客户编号(如 C007),支持部分匹配') }),
  execute: async ({ query }) => findCustomer(query),
});

const listInvoicesTool = createTool({
  id: 'list_invoices',
  description: '列出客户最近的发票(按开票日期倒序),金额单位为元。',
  inputSchema: z.object({
    customer_id: z.string().regex(/^C\d{3}$/),
    limit: z.number().int().min(1).max(20).default(6),
  }),
  execute: async ({ customer_id, limit }) => listInvoices(customer_id, undefined, limit),
});

const accountant = new Agent({
  id: 'accountant',
  name: '云簿账务专员',
  instructions: '你是云簿的账务专员。先用工具查事实,不要编造发票号和金额。',
  model: {
    id: `custom/${process.env.LLM_MODEL}`,
    url: process.env.LLM_BASE_URL!,
    apiKey: process.env.LLM_API_KEY,
  },
  tools: { find_customer: findCustomerTool, list_invoices: listInvoicesTool },
});

const res = await accountant.generate('user007@example.com 这个客户 10 月有没有被重复扣款?列出相关发票号和金额。');
console.log(res.text);

node --env-file=.env.local --import tsx scripts/mastra-accountant.ts

只看这个例子,Mastra 和 AI SDK 的代码量差不多。它多出来的东西在别处:

• Memory:@mastra/memory 加一个存储(LibSQL、Postgres),Agent 就有线程级的对话历史和跨会话的工作记忆,不用像我们在路由里那样每次让前端把全部历史发上来。
• Workflow:有 .then()、.branch()、.parallel() 的步骤编排,还能挂起等人工输入再恢复,概念上对应 LangGraph 的图和 interrupt。
• Durable Agents:Mastra 2026 年推的功能,客户端断线后流式输出能接着续上,Agent 的执行和 HTTP 连接解耦。这正好是 Day 49「停止和断线」那一节我们手工处理的问题。
• 本地开发面板:npx mastra dev 起一个 Playground,能直接和 Agent 对话、看每一步的 trace、跑评测。

简单说,只需要「一个 Agent + 一个聊天界面」,AI SDK 够了,依赖少、离 HTTP 近;需要记忆、多步工作流、可观测这一套,又不想自己拼,用 Mastra。

Python 后端还是全 TypeScript

回到 Day 49 那个问题。现在两种做法你都写过了,可以对照着判断:

我的判断:产品形态是「一个对话界面里的 Agent」、团队以前端为主、评测不复杂,全 TS 最快。 Agent 是后台流程的一部分、要接 RAG 和评测流水线、团队有 Python 的数据和算法同事,保持 Python 后端。还有一种常见的折中:前端用 useChat,后端还是 Python,在 Python 里输出 AI SDK 的 UI Message Stream 协议。Day 49 的课后练习让你做的就是这个,只要实现那几种事件类型就行。

面试里如果被问「为什么用 TS 写 Agent」,别只说「我是前端」。说类型从数据库函数一路推到 React 组件、少一个服务、工具审批的签名防伪造,这些是具体的工程理由。

动手练习

1. 跑通 Next.js 版。 按上面的步骤跑通,完成「提交」「取消」「超额」三次测试。验收:refund_requests 表里只多了一条 pending_approval 记录,取消和超额那两次都没有写入。
2. 看一眼协议。 打开浏览器开发者工具的 Network 面板,找到 /api/chat 请求,看响应里的事件。验收:在 notes/ts-agents.md 里列出你看到的事件类型(至少包括文本增量、工具输入、工具输出、审批请求四类各一个原样例子),和 Day 49 我们自定义的 node/step/tool/token/interrupt/done 一一对照。
3. 按金额决定要不要审批。 把 toolApproval 里的 'user-approval' 改成一个函数:金额不超过 100 元直接执行,超过才要审批。函数签名看 ai 包类型声明里的 SingleToolApprovalFunction。验收:「给 INV-2026-0123 退 50 元」不弹确认框,「退 2392 元」弹。想一想:这个规则放在 toolApproval 里和放在 createRefundRequest 里,分别防的是什么。
4. 伪造审批。 先去掉 experimental_toolApprovalSecret,在界面上触发审批请求后,用 curl 自己构造一个请求,把审批结果写成 approved: true 发到 /api/chat。然后加回 secret 再试一次。验收:记录两次的结果。这道题做完你会真正理解为什么无状态服务端的审批需要签名。
5. Mastra 版加上记忆。 按 Mastra 文档给 Agent 配 @mastra/memory 和 LibSQL 存储,连续问两句:「C007 是谁」「她 10 月有几张发票」。验收:第二句不用再说客户编号,Agent 能接上。

名词解释

常见误区

照着 AI SDK 5 或 6 的教程写 7。 stepCountIs、needsApproval、system 这些在 7 里都改名或废弃了,ESM-only 也会让老的 require 写法直接报错。看教程先看它用的版本,和你 package.json 里的对不上就以官方迁移指南为准。

以为 useChat 的审批等于业务审批。 它只是让当前用户在执行前确认一下。需要另一个有权限的人批准的操作(退款、删数据、发邮件给客户),工具本身只能创建待审批记录,审批流程在业务系统里做。

服务端无状态却不签名审批。 每次请求都带着完整历史,历史是客户端给的,客户端就能改。有副作用的工具要么配 experimental_toolApprovalSecret,要么服务端自己存审批状态,不能信任请求体里的「已批准」。

在客户端组件里普通 import 服务端模块。 少写一个 type,Next.js 就会尝试把 better-sqlite3 打进浏览器包,报一堆找不到 fs、path 的错误,第一次见很难看出原因。

漏了 sendAutomaticallyWhen。 点完确认按钮什么都不发生,看起来像是按钮坏了。其实审批结果已经记在本地消息里了,只是没有人把它发回服务端。

把 Mastra 当成 AI SDK 的替代品。 它们是上下层关系:Mastra 的模型层用的就是 AI SDK 的接口,文档里说 AI SDK 的模型对象可以用在任何接受 'provider/model' 字符串的地方。选 Mastra 是为了它的 Memory、Workflow 和工具链,不是为了换掉 AI SDK。

学习资料

文档与文章

• AI SDK 文档 · Building Agents:ToolLoopAgent、createAgentUIStreamResponse、InferAgentUIMessage 的官方用法,今天的 agent.ts 和 route.ts 按它写。20 分钟。
• AI SDK 文档 · Chatbot Tool Usage:useChat 里怎么渲染工具 part、怎么做审批、experimental_toolApprovalSecret 是防什么的。练习 3、4 必读。
• AI SDK 7.0 迁移指南:从 6 升级的所有破坏性变更。看到网上老代码报错,先来这里查。
• AI SDK 文档 · OpenAI Compatible Providers:createOpenAICompatible 的选项,includeUsage、supportsStructuredOutputs 的含义。
• Mastra 文档 · Agents:Agent 和 createTool 的基本用法,注意新旧 execute 签名的说明。
• Mastra 文档 · Models:模型字符串、自定义 OpenAI 兼容地址的对象写法、怎么直接用 AI SDK 的模型对象。

B 站视频

• 敲呆龙《typescript ai agent 框架 mastra 教学》(B 站 BV1jKUWB7EF4,4 集共 22 分钟):手把手写 Mastra Agent 和工具,2025 年 11 月录的,是 1.0 之前的版本,execute 签名可能是旧写法,对照文档看。

其他经典视频

书籍

• Chip Huyen《AI Engineering》(O’Reilly, 2025)第 6 章:Agent 的工具、规划和失败模式,和语言无关,今天讲的审批、步数上限在这一章都能找到理论依据。
• Boris Cherny《Programming TypeScript》(O’Reilly, 2019):如果 Omit<>、as const、字面量联合类型这些还不熟,读第 6 章「Advanced Types」。书比较老,类型系统的核心没变。

开源项目与代码

• vercel/ai:AI SDK 源码。examples/ 目录下有 Next.js 的完整示例,examples/next-fastapi 是「Python 后端 + useChat」的折中方案,接 Day 49 的课后练习。
• mastra-ai/mastra:Mastra 源码,examples/ 里有 Memory 和 Workflow 的例子。
• openai/openai-agents-js:OpenAI Agents SDK 的 JS 版,想对照 Day 27 的 Python 版可以看它的 examples。

自测

1. AI SDK 7 里,为什么用户点了审批按钮之后需要 sendAutomaticallyWhen?不加会怎样?

2. experimental_toolApprovalSecret 防的是什么攻击?不用它还有什么办法?

3. 在 page.tsx 里把 import type { AccountantMessage } 写成 import { AccountantMessage } 会发生什么?为什么?

4. toolApproval 写成「金额超过 100 元才要审批」,和在 createRefundRequest 里写「金额不能超过发票剩余金额」,这两条规则分别防什么?能不能只留一条?

5. 面试题:我们是一家海外 SaaS 创业公司,前端团队 4 人、没有 Python 工程师,想在产品里加一个能查账、能提交退款申请的 AI 助手。你会怎么选技术栈?什么情况下你会建议引入 Python?

6. 一次对话里,stopWhen: isStepCount(8) 的 8 步是怎么算的?用户点了审批之后呢?

明天预告

专题篇可以跳着读。按编号,下一篇是 Day 143 · 自动优化提示词:DSPy、GEPA 与 ACE:Day 35 你给工单 Agent 建了评测集,手调 prompt 总有天花板。明天让优化器读失败轨迹、自己改 prompt,看分数能不能往上走,以及怎么防止它只是背下了测试集。