Skip to content

Next.js AI 项目实践

Next.js AI Agent 如何设计工具调用、审批和幂等执行?

Agent 不是模型说调用就调用,Next.js 需要把提议、授权、审批、执行和结果回填拆成可恢复的服务端流程。

适合阶段:资深前端 / Agent 架构面核心能力:Tool Calling · Approval · Idempotency

面试官想考什么

  • 哪些工具可以自动执行? 考察风险分级。
  • 审批按钮放 Server Action 还是 Route Handler? 考察接口边界。
  • 如何防止重复创建订单或发送消息? 考察幂等。
  • 工具结果如何回填并防止注入? 考察数据和指令隔离。

一句话回答

text
模型只提出 tool call,服务端按 schema、用户权限和风险策略决定自动执行或进入审批;审批绑定规范化参数和版本,执行用 toolCallId/idempotencyKey 保证幂等,状态和结果持久化后通过流或查询回填 UI。

面试回答详解

1. 状态机

text
proposed -> awaiting_approval -> approved -> running
       |             |                         |-> succeeded
       |             |                         |-> failed/cancelled
       `-> rejected/expired

服务端状态是权威,页面刷新后按 toolCallId 恢复。按钮 disabled 只改善体验,不提供幂等保证。

2. 参数和权限

模型参数先做运行时 schema 和业务约束校验,再结合用户、租户、资源和风险策略判断。审批看到的是规范化参数、目标、影响范围和过期时间。执行前再次鉴权,审批后参数 hash 变化必须重新审批。

3. Next.js 边界

  • Server Component:展示历史工具状态和结果。
  • Client Component:确认弹窗、审批按钮、进度和取消。
  • Route Handler:流式 Agent、webhook、长任务和外部 API。
  • Server Action:适合页面附近的短审批 mutation,但内部仍需完整鉴权。

4. 幂等和重试

toolCallId 标识模型提出的调用,attemptId 标识执行尝试,idempotencyKey 保护同一副作用。重复请求返回原任务状态;付款、发送、创建等工具必须查询业务状态后再重试。

5. 安全与观测

工具结果是不可信数据,前端按 schema/受控组件展示,进入模型上下文时带来源边界。记录审批人、策略版本、参数摘要、执行 trace、耗时和拒绝原因;支持紧急禁用工具。

可直接背诵的 30 秒回答

text
Agent 只允许模型提出工具调用,服务端负责 schema、权限、风险分级和审批。高风险操作进入 awaiting approval,确认绑定规范化参数 hash;执行接口用 toolCallId 和幂等键避免重复副作用,状态持久化并通过流或查询更新 UI。Next.js 的 Server Action/Route Handler 都只是入口,真正的授权和幂等在服务端领域层。

扩展知识

自动执行的判断维度

text
只读/低风险 + 权限明确 + 可重试

删除、发布、付款、对外发送和批量变更通常需要人工确认或更高等级审批。

面试官追问链

追问一:模型说“用户已经确认”可以信吗?

  • 考察点:信任边界。
  • 回答方向:不可以。确认必须来自已鉴权用户的独立动作和服务端审批记录。

追问二:审批成功但执行超时怎么办?

  • 考察点:异步恢复。
  • 回答方向:进入 unknown/reconciling,查询外部业务状态后再决定成功、失败或人工处理,不能直接重试副作用。

追问三:为什么工具结果也要防 Prompt Injection?

  • 考察点:上下文污染。
  • 回答方向:第三方系统返回的字段可能包含指令性文本,进入模型前要标记为数据、限制权限并按策略过滤。

推荐阅读

基于 MIT 协议开源