LangGraph.js 前端 Agent 面试题锦集

// StateGraph = 流程定义
import { StateGraph, Annotation, END } from "@langchain/langgraph";

const StateAnnotation = Annotation.Root({
  messages: Annotation<string[]>({ default: () => [] })
});

const workflow = new StateGraph(StateAnnotation)
  .addNode("nodeA", (state) => ({ messages: [...state.messages, "A"] }))
  .addEdge("nodeA", END);

// State = 运行时数据
const result = await workflow.compile().invoke({ messages: [] });
console.log(result.messages); // ["A"]

import { MessagesAnnotation } from "@langchain/langgraph";

// MessagesAnnotation 内置 messagesStateReducer
const workflow = new StateGraph(MessagesAnnotation);

// 追加行为
const state1 = { messages: [{ role: "user", content: "Hi" }] };
const update1 = { messages: [{ role: "assistant", content: "Hello" }] };
// 结果: [user msg, assistant msg] ✅ 追加

// 更新行为（相同 ID）
const state2 = { messages: [{ id: "msg1", role: "user", content: "Hi" }] };
const update2 = { messages: [{ id: "msg1", role: "user", content: "Hello" }] };
// 结果: [{ id: "msg1", content: "Hello" }] ✅ 替换

// 标准 thread_id 传递格式
await app.invoke(
  { messages: [{ role: "user", content: "Hello" }] },
  { 
    configurable: { 
      thread_id: "user-123-session-456" 
    } 
  }
);

// 流式调用同样需要 thread_id
for await (const event of app.stream(input, { 
  configurable: { thread_id: "user-123-session-456" } 
})) {
  console.log(event);
}

import { StateGraph, Annotation, END } from "@langchain/langgraph";

const StateAnnotation = Annotation.Root({
  confidence: Annotation<number>(),
  needsReview: Annotation<boolean>()
});

// 路由函数
function routeByConfidence(state: typeof StateAnnotation.State) {
  if (state.confidence > 0.8) return "publish";
  if (state.confidence > 0.5) return "review";
  return "reject";
}

const workflow = new StateGraph(StateAnnotation)
  .addNode("analyze", (state) => ({ confidence: 0.6, needsReview: true }))
  .addNode("review", (state) => ({ confidence: 0.9 }))
  .addNode("publish", (state) => state)
  .addNode("reject", (state) => state)
  .addConditionalEdges("analyze", routeByConfidence, {
    publish: "publish",
    review: "review",
    reject: "reject"
  })
  .addEdge("review", "publish")
  .addEdge("publish", END)
  .addEdge("reject", END);

// 设置最大迭代次数（防止无限循环）
const app = workflow.compile({ 
  recursionLimit: 10  // 默认 25
});

// 或在调用时覆盖
await app.invoke(input, { 
  recursionLimit: 5 
});

// 超过限制会抛出 GraphRecursionError

// ❌ 错误：浏览器中无法直接使用 interrupt
// const result = await interrupt("审批"); 

// ✅ 正确：服务端节点
const approvalNode = async (state) => {
  const userDecision = await interrupt({ 
    type: "approval", 
    data: state.draftOrder 
  });
  return { approved: userDecision };
};

// 前端恢复（发送到 API 路由）
await fetch("/api/agent/resume", {
  method: "POST",
  body: JSON.stringify({ 
    thread_id: "user-123", 
    resume_value: "approved" 
  })
});

// 1. MemorySaver - 本地开发/演示
import { MemorySaver } from "@langchain/langgraph";
const app = workflow.compile({ checkpointer: new MemorySaver() });

// 2. SqliteSaver - 单机持久化
import { SqliteSaver } from "@langchain/langgraph-checkpoint-sqlite";
const checkpointer = SqliteSaver.fromConnString("./checkpoints.db");
const app = workflow.compile({ checkpointer });

// 3. PostgresSaver - 生产环境
import { PostgresSaver } from "@langchain/langgraph-checkpoint-postgres";
const checkpointer = await PostgresSaver.fromConnString(process.env.DATABASE_URL);
const app = workflow.compile({ checkpointer });

import { PostgresSaver } from "@langchain/langgraph-checkpoint-postgres";
import { Pool } from "pg";

// 1. 数据库迁移（首次）
const pool = new Pool({ connectionString: process.env.DATABASE_URL });
await PostgresSaver.createTables(pool);

// 2. 创建 Checkpointer
const checkpointer = new PostgresSaver({ pool });

// 3. 编译图
const app = workflow.compile({ checkpointer });

// 4. 清理过期 checkpoint（可选）
await checkpointer.deleteCheckpoints({ before: Date.now() - 7 * 24 * 60 * 60 * 1000 });

import { StateGraph, MessagesAnnotation, START, END } from "@langchain/langgraph";
import { ChatOpenAI } from "@langchain/openai";

// 1. 定义 State + Reducer (MessagesAnnotation 已内置)
const model = new ChatOpenAI({ model: "gpt-4" });

// 2. 构建节点
const chatNode = async (state: typeof MessagesAnnotation.State) => {
  const response = await model.invoke(state.messages);
  return { messages: [response] };
};

// 3. 编译图
const workflow = new StateGraph(MessagesAnnotation)
  .addNode("chat", chatNode)
  .addEdge(START, "chat")
  .addEdge("chat", END);

const app = workflow.compile();

// 4. 验证多轮累积
const result1 = await app.invoke({ 
  messages: [{ role: "user", content: "Hi" }] 
});
const result2 = await app.invoke({ 
  messages: result1.messages.concat({ role: "user", content: "Bye" }) 
});
console.log(result2.messages); // [user:Hi, ai:Hello, user:Bye, ai:Goodbye]

import { StateGraph, MessagesAnnotation, MemorySaver, END } from "@langchain/langgraph";
import { ChatOpenAI } from "@langchain/openai";
import { DynamicStructuredTool } from "@langchain/core/tools";
import { interrupt, Command } from "@langchain/langgraph";
import { z } from "zod";

// 高风险工具
const deleteUserTool = new DynamicStructuredTool({
  name: "delete_user",
  description: "删除用户账户",
  schema: z.object({ userId: z.string() }),
  func: async ({ userId }) => `已删除用户 ${userId}`
});

const model = new ChatOpenAI().bindTools([deleteUserTool]);

// 工具执行节点（带审批）
const toolNode = async (state: typeof MessagesAnnotation.State) => {
  const lastMessage = state.messages.at(-1);
  const toolCall = lastMessage?.tool_calls?.[0];
  
  if (toolCall?.name === "delete_user") {
    const approval = await interrupt({ type: "approval", tool: toolCall });
    if (approval !== "approved") {
      return { 
        messages: [{ 
          role: "tool", 
          content: "操作被拒绝", 
          tool_call_id: toolCall.id 
        }] 
      };
    }
  }
  
  const result = await deleteUserTool.func(toolCall.args);
  return { 
    messages: [{ 
      role: "tool", 
      content: result, 
      tool_call_id: toolCall.id 
    }] 
  };
};

const workflow = new StateGraph(MessagesAnnotation)
  .addNode("model", async (state) => ({ 
    messages: [await model.invoke(state.messages)] 
  }))
  .addNode("tools", toolNode)
  .addConditionalEdges("model", (state) => {
    return state.messages.at(-1)?.tool_calls?.length ? "tools" : END;
  })
  .addEdge("tools", "model");

const app = workflow.compile({ checkpointer: new MemorySaver() });

// 恢复执行
await app.invoke(
  new Command({ resume: "approved" }), 
  { configurable: { thread_id: "thread-123" } }
);

import { StateGraph, Annotation, START, END, Send } from "@langchain/langgraph";

const StateAnnotation = Annotation.Root({
  tasks: Annotation<string[]>(),
  results: Annotation<string[]>({
    reducer: (prev, curr) => prev.concat(curr),
    default: () => []
  })
});

// 扇出节点
function fanOut(state: typeof StateAnnotation.State) {
  return state.tasks.map(task => new Send("worker", { task }));
}

// Worker 节点
const workerNode = async (state: { task: string }) => {
  const result = await processTask(state.task);
  return { results: [result] };
};

const workflow = new StateGraph(StateAnnotation)
  .addNode("fanOut", fanOut)
  .addNode("worker", workerNode)
  .addNode("aggregate", (state) => ({ 
    finalResult: state.results.join(", ") 
  }))
  .addConditionalEdges(START, fanOut)
  .addEdge("worker", "aggregate")
  .addEdge("aggregate", END);

// 1. 检查 checkpoint 历史
const history = await app.getStateHistory({ 
  configurable: { thread_id: "order-123" } 
});

for await (const state of history) {
  console.log({
    checkpoint_id: state.config.configurable.checkpoint_id,
    next_nodes: state.next,
    values: state.values
  });
}

// 发现：createOrder 节点前有 interrupt，恢复后重新执行

// 2. 定位问题：interrupt 前的工具节点缺少幂等保护
const createOrderNode = async (state) => {
  // ❌ 问题代码：每次执行都会创建新订单
  const orderId = await database.createOrder(state.orderData);
  return { orderId };
};

// 3. 修复：添加幂等键
const createOrderNode = async (state) => {
  const idempotencyKey = `order:${state.threadId}:${state.checkpointId}`;
  
  // ✅ 先检查是否已执行
  const existing = await database.findOrderByIdempotencyKey(idempotencyKey);
  if (existing) {
    return { orderId: existing.id };
  }
  
  // 首次执行
  const orderId = await database.createOrder({
    ...state.orderData,
    idempotency_key: idempotencyKey
  });
  
  return { orderId };
};

import { LangChainTracer } from "langchain/callbacks";

const tracer = new LangChainTracer({
  projectName: "production-agent",
  metadata: {
    environment: "prod",
    version: "1.0.0"
  }
});

const app = workflow.compile({ callbacks: [tracer] });

import { createAgent } from "@langchain/langgraph/prebuilt";
import { ChatOpenAI } from "@langchain/openai";
import { MemorySaver } from "@langchain/langgraph";

const model = new ChatOpenAI({ model: "gpt-4" });
const tools = [weatherTool, calculatorTool];

// createAgent 会自动创建包含工具调用循环的 StateGraph
const agent = createAgent({
  llm: model,
  tools,
  checkpointer: new MemorySaver()
});

// 等价于手动构建以下 StateGraph:
// const workflow = new StateGraph(MessagesAnnotation)
//   .addNode("model", modelNode)
//   .addNode("tools", toolsNode)
//   .addConditionalEdges("model", shouldContinue, { 
//     continue: "tools", 
//     end: END 
//   })
//   .addEdge("tools", "model");

// 前端实现
const abortController = new AbortController();

const stream = await fetch("/api/agent/stream", {
  method: "POST",
  body: JSON.stringify({ message: "Hello", thread_id: "123" }),
  signal: abortController.signal
});

// 用户点击取消
cancelButton.onclick = () => abortController.abort();

// 后端处理（Next.js API Route）
export async function POST(req: Request) {
  const signal = req.signal;
  
  for await (const event of app.stream(input, { configurable: { thread_id } })) {
    if (signal.aborted) {
      console.log("Client cancelled request");
      break;
    }
    // 发送事件
  }
}

// 1. 前端检测断线
const eventSource = new EventSource(`/api/agent/stream?thread_id=${threadId}`);

eventSource.onerror = async () => {
  console.log("Connection lost, reconnecting...");
  eventSource.close();
  
  // 2. 重新连接（自动从 checkpoint 恢复）
  await reconnect(threadId);
};

// 3. 服务端自动恢复
async function reconnect(threadId: string) {
  const latestState = await app.getState({ configurable: { thread_id: threadId } });
  
  if (latestState.next.length > 0) {
    // 还有未完成节点，继续执行
    for await (const event of app.stream(null, { configurable: { thread_id: threadId } })) {
      renderEvent(event);
    }
  }
}

// 前端生成幂等键
import { v4 as uuidv4 } from "uuid";

const idempotencyKey = uuidv4();

await fetch("/api/agent/invoke", {
  method: "POST",
  headers: {
    "Idempotency-Key": idempotencyKey
  },
  body: JSON.stringify({ message: "Hello", thread_id: "123" })
});

// 服务端去重
const idempotencyCache = new Map(); // 生产用 Redis

export async function POST(req: Request) {
  const key = req.headers.get("Idempotency-Key");
  
  if (idempotencyCache.has(key)) {
    return idempotencyCache.get(key); // 返回缓存结果
  }
  
  const result = await app.invoke(input, config);
  idempotencyCache.set(key, result);
  
  return result;
}

// 1. thread_id 命名规范
function generateThreadId(tenantId: string, userId: string, sessionId: string) {
  return `tenant:${tenantId}:user:${userId}:session:${sessionId}`;
}

// 2. 服务端校验租户权限
export async function POST(req: Request) {
  const { thread_id } = await req.json();
  const session = await getSession(req);
  
  // 提取租户 ID
  const [_, tenantId] = thread_id.split(":");
  
  if (session.tenantId !== tenantId) {
    return new Response("Forbidden", { status: 403 });
  }
  
  // 安全执行
  const result = await app.invoke(input, { configurable: { thread_id } });
  return result;
}

// 3. 数据库层隔离（Postgres Row-Level Security）
// CREATE POLICY tenant_isolation ON checkpoints
//   USING (thread_id LIKE 'tenant:' || current_setting('app.tenant_id') || ':%');

import { LangChainTracer } from "langchain/callbacks";

// 1. 启用 LangSmith
const tracer = new LangChainTracer({
  projectName: "production-agent",
  apiKey: process.env.LANGSMITH_API_KEY
});

const app = workflow.compile({ 
  checkpointer,
  callbacks: [tracer]
});

// 2. 自定义 Metrics
const metrics = {
  nodeLatency: new Map<string, number[]>(),
  toolSuccessRate: new Map<string, { success: number, total: number }>()
};

// 3. 在节点中收集指标
const monitoredNode = async (state) => {
  const startTime = Date.now();
  
  try {
    const result = await originalNode(state);
    const latency = Date.now() - startTime;
    
    metrics.nodeLatency.get("nodeName")?.push(latency);
    
    return result;
  } catch (error) {
    metrics.toolSuccessRate.get("nodeName").total++;
    throw error;
  }
};

// 4. 定期上报 (Prometheus/DataDog)
setInterval(() => {
  const p95Latency = calculateP95(metrics.nodeLatency.get("nodeName"));
  reportMetric("agent.node.latency.p95", p95Latency, { node: "nodeName" });
}, 60000);

// 1. 前端提交任务
const taskId = await fetch("/api/agent/submit", {
  method: "POST",
  body: JSON.stringify({ message: "复杂任务", thread_id: "123" })
}).then(r => r.json());

// 2. 后台执行（服务端）
export async function POST(req: Request) {
  const { thread_id, message } = await req.json();
  const taskId = uuidv4();
  
  // 异步执行
  executeInBackground(taskId, async () => {
    await app.invoke({ messages: [message] }, { configurable: { thread_id } });
  });
  
  return Response.json({ taskId, status: "pending" });
}

// 3. 前端轮询状态
async function pollTaskStatus(taskId: string) {
  const interval = setInterval(async () => {
    const status = await fetch(`/api/agent/status/${taskId}`).then(r => r.json());
    
    if (status.state === "completed") {
      clearInterval(interval);
      displayResult(status.result);
    } else if (status.state === "failed") {
      clearInterval(interval);
      showError(status.error);
    }
  }, 2000);
}

// 4. 使用 WebSocket 实时推送（更优）
const ws = new WebSocket(`wss://api.example.com/agent/stream/${taskId}`);
ws.onmessage = (event) => {
  const update = JSON.parse(event.data);
  renderUpdate(update);
};