人机协作

通过基于中断的人工审核添加审批工作流

并非每个智能体操作都应该无人监督地运行。当智能体即将发送邮件、删除记录、执行金融交易或执行任何不可逆操作时，你需要人工先审核并批准该操作。人机协作（HITL）模式让你的智能体暂停执行，将待处理的操作呈现给用户，并仅在获得明确批准后才恢复执行。

中断的工作原理

LangGraph 智能体支持中断，即智能体将控制权交还给客户端的显式暂停点。当智能体触发中断时：

1. 智能体停止执行并发出中断载荷
2. useStream hook 通过 stream.interrupt 暴露中断信息
3. 你的 UI 渲染一个带有批准/拒绝/编辑选项的审核卡片
4. 用户做出决定
5. 你的代码使用恢复命令调用 stream.submit()
6. 智能体从中断处继续执行

为人机协作设置 useStream

定义一个与你的智能体状态 schema 匹配的 TypeScript 接口，并将其作为类型参数传递给 useStream，以获得类型安全的状态值访问。在以下示例中，将 typeof myAgent 替换为你的接口名称：

import type { BaseMessage } from "@langchain/core/messages";

interface AgentState {
  messages: BaseMessage[];
}

React

import { useStream } from "@langchain/react";

const AGENT_URL = "http://localhost:2024";

export function Chat() {
  const stream = useStream<typeof myAgent>({
    apiUrl: AGENT_URL,
    assistantId: "human_in_the_loop",
  });

  const interrupt = stream.interrupt;

  return (
    <div>
      {stream.messages.map((msg) => (
        <Message key={msg.id} message={msg} />
      ))}
      {interrupt && (
        <ApprovalCard
          interrupt={interrupt}
          onRespond={(response) =>
            stream.submit(null, { command: { resume: response } })
          }
        />
      )}
    </div>
  );
}

中断载荷

当智能体暂停时，stream.interrupt 包含一个具有以下结构的 HITLRequest：

interface HITLRequest {
  actionRequests: ActionRequest[];
  reviewConfigs: ReviewConfig[];
}

interface ActionRequest {
  action: string;
  args: Record<string, unknown>;
  description?: string;
}

interface ReviewConfig {
  allowedDecisions: ("approve" | "reject" | "edit" | "respond")[];
}

属性	描述
actionRequests	智能体想要执行的待处理操作数组
actionRequests[].action	操作名称（如 "send_email"、"delete_record"）
actionRequests[].args	操作的结构化参数
actionRequests[].description	可选的人类可读描述，说明操作的作用
reviewConfigs	每个操作的配置，控制允许哪些决策
reviewConfigs[].allowedDecisions	显示哪些按钮："approve"、"reject"、"edit"、"respond"

决策类型

人机协作模式支持四种决策类型：

批准

用户确认操作应按原样执行：

const response: HITLResponse = {
  decision: "approve",
};

stream.submit(null, { command: { resume: response } });

拒绝

用户拒绝操作并可提供可选的原因：

const response: HITLResponse = {
  decision: "reject",
  reason: "邮件语气太过激烈。请修改。",
};

stream.submit(null, { command: { resume: response } });

当操作被拒绝时，智能体会收到拒绝原因，并可以决定如何处理。它可能会重新措辞、提出澄清问题，或完全放弃该操作。

编辑

用户在批准前修改操作的参数：

const response: HITLResponse = {
  decision: "edit",
  args: {
    ...originalArgs,
    subject: "更新后的主题行",
    body: "语气更温和的修改版邮件正文。",
  },
};

stream.submit(null, { command: { resume: response } });

回复

用户为”询问用户”类型的工具提供直接回复。message 成为工具结果，工具本身不会被执行：

const response: HITLResponse = {
  decision: "respond",
  message: "蓝色。",
};

stream.submit(null, { command: { resume: response } });

当工具有意作为人工输入的占位符时使用 respond——例如，一个 ask_user 工具用于提示智能体从用户那里收集信息。

构建审批卡片

以下是一个处理所有四种决策类型的完整审批卡片组件：

function ApprovalCard({
  interrupt,
  onRespond,
}: {
  interrupt: { value: HITLRequest };
  onRespond: (response: HITLResponse) => void;
}) {
  const request = interrupt.value;
  const [editedArgs, setEditedArgs] = useState(
    request.actionRequests[0]?.args ?? {}
  );
  const [rejectReason, setRejectReason] = useState("");
  const [respondMessage, setRespondMessage] = useState("");
  const [mode, setMode] = useState<"review" | "edit" | "reject" | "respond">("review");

  const action = request.actionRequests[0];
  const config = request.reviewConfigs[0];

  if (!action || !config) return null;

  return (
    <div className="rounded-lg border-2 border-amber-300 bg-amber-50 p-4">
      <h3 className="font-semibold text-amber-800">需要操作审核</h3>
      <p className="mt-1 text-sm text-amber-700">
        {action.description ?? `智能体想要执行：${action.action}`}
      </p>

      <div className="mt-3 rounded bg-white p-3 font-mono text-sm">
        <pre>{JSON.stringify(action.args, null, 2)}</pre>
      </div>

      {mode === "review" && (
        <div className="mt-4 flex gap-2">
          {config.allowedDecisions.includes("approve") && (
            <button
              className="rounded bg-green-600 px-4 py-2 text-white"
              onClick={() => onRespond({ decision: "approve" })}
            >
              批准
            </button>
          )}
          {config.allowedDecisions.includes("reject") && (
            <button
              className="rounded bg-red-600 px-4 py-2 text-white"
              onClick={() => setMode("reject")}
            >
              拒绝
            </button>
          )}
          {config.allowedDecisions.includes("edit") && (
            <button
              className="rounded bg-blue-600 px-4 py-2 text-white"
              onClick={() => setMode("edit")}
            >
              编辑
            </button>
          )}
          {config.allowedDecisions.includes("respond") && (
            <button
              className="rounded bg-purple-600 px-4 py-2 text-white"
              onClick={() => setMode("respond")}
            >
              回复
            </button>
          )}
        </div>
      )}

      {mode === "reject" && (
        <div className="mt-4 space-y-2">
          <textarea
            className="w-full rounded border p-2"
            placeholder="拒绝原因..."
            value={rejectReason}
            onChange={(e) => setRejectReason(e.target.value)}
          />
          <button
            className="rounded bg-red-600 px-4 py-2 text-white"
            onClick={() =>
              onRespond({ decision: "reject", reason: rejectReason })
            }
          >
            确认拒绝
          </button>
        </div>
      )}

      {mode === "edit" && (
        <div className="mt-4 space-y-2">
          <textarea
            className="w-full rounded border p-2 font-mono text-sm"
            value={JSON.stringify(editedArgs, null, 2)}
            onChange={(e) => {
              try {
                setEditedArgs(JSON.parse(e.target.value));
              } catch {
                // 编辑过程中允许无效的 JSON
              }
            }}
          />
          <button
            className="rounded bg-blue-600 px-4 py-2 text-white"
            onClick={() =>
              onRespond({ decision: "edit", args: editedArgs })
            }
          >
            提交修改
          </button>
        </div>
      )}

      {mode === "respond" && (
        <div className="mt-4 space-y-2">
          <textarea
            className="w-full rounded border p-2"
            placeholder="你的回复..."
            value={respondMessage}
            onChange={(e) => setRespondMessage(e.target.value)}
          />
          <button
            className="rounded bg-purple-600 px-4 py-2 text-white"
            onClick={() =>
              onRespond({ decision: "respond", message: respondMessage })
            }
          >
            发送回复
          </button>
        </div>
      )}
    </div>
  );
}

恢复流程

用户做出决定后，完整的流程如下：

1. 调用 stream.submit(null, { command: { resume: hitlResponse } })
2. useStream hook 将恢复命令发送到 LangGraph 后端
3. 智能体接收 HITLResponse 并继续执行。HITL 响应可以是以下之一：
   • "approve"：智能体继续执行下一个操作
   • "reject"：智能体收到拒绝原因并决定下一步
   • "edit"：智能体使用编辑后的参数运行工具
   • "respond"：人工的消息直接作为工具结果返回，而不执行工具
4. 当智能体恢复流式输出时，interrupt 属性重置为 null

你可以在单次智能体运行中链接多个人机协作检查点。例如，智能体可能先请求批准搜索，然后在发送包含结果的邮件之前再次请求批准。每个中断都是独立处理的。

常见用例

用例	操作	审核配置
邮件发送	send_email	["approve", "reject", "edit"]
数据库写入	update_record	["approve", "reject"]
金融交易	transfer_funds	["approve", "reject"]
文件删除	delete_files	["approve", "reject"]
外部服务 API 调用	call_api	["approve", "reject", "edit"]
收集用户输入	ask_user	["respond"]

处理多个待处理操作

一个中断可以包含多个 actionRequests，当智能体想要同时执行多个操作时。为每个操作渲染一张卡片，并在恢复前收集所有决策：

function MultiActionReview({
  interrupt,
  onRespond,
}: {
  interrupt: { value: HITLRequest };
  onRespond: (responses: HITLResponse[]) => void;
}) {
  const [decisions, setDecisions] = useState<Record<number, HITLResponse>>({});
  const request = interrupt.value;

  const allDecided =
    Object.keys(decisions).length === request.actionRequests.length;

  return (
    <div className="space-y-4">
      {request.actionRequests.map((action, i) => (
        <SingleActionCard
          key={i}
          action={action}
          config={request.reviewConfigs[i]}
          onDecide={(response) =>
            setDecisions((prev) => ({ ...prev, [i]: response }))
          }
        />
      ))}
      {allDecided && (
        <button
          className="rounded bg-green-600 px-4 py-2 text-white"
          onClick={() =>
            onRespond(
              request.actionRequests.map((_, i) => decisions[i])
            )
          }
        >
          提交所有决策
        </button>
      )}
    </div>
  );
}

最佳实践

在实现人机协作工作流时，请牢记以下准则：

• 显示清晰的上下文。始终展示智能体想做什么以及为什么。包含操作描述和完整参数。
• 让批准成为最简单的路径。如果操作看起来正确，批准应该只需单击。将多步流程保留给拒绝/编辑。
• 验证编辑后的参数。当用户编辑操作参数时，在发送前验证 JSON 结构。对格式错误的输入显示内联错误。
• 持久化中断状态。如果用户刷新页面，中断应仍然可见。useStream 通过线程的检查点处理此问题。
• 记录所有决策。为审计追踪，记录每个批准/拒绝/编辑决策的时间戳和做出决策的用户。
• 合理设置超时。长时间运行的智能体不应无限期地等待人工审核。考虑显示智能体已等待多长时间。

---

将这些文档连接到 Claude、VSCode 等工具，通过 MCP 获取实时答案。

在 GitHub 上编辑此页面或提交 issue。