一、从灵感到行动为什么给 AI 搭法庭作为一个前端开发者我每天都在和代码打交道但最近我开始思考一个问题当多个 AI 模型对同一个问题给出不同答案时我们该如何判断谁更靠谱这个想法催生了一个有趣的项目——给 AI 搭一个「法庭」让不同的模型像律师一样陈述观点再由一个「法官」模型做出最终裁决。而实现这个想法的最佳工具就是 LangGraph。二、LangGraph 是什么LangGraph 是 LangChain 团队推出的一个用于构建有状态、多角色 AI 工作流的框架。它允许开发者定义多个节点Node每个节点可以是一个 LLM 调用、一个函数或一个决策逻辑节点之间通过边Edge连接形成有向图结构。对于我这个前端仔来说LangGraph 的「图」思维非常亲切——它就像前端的状态管理工具如 Redux、Zustand加上路由系统只不过节点里跑的是 AI 模型而不是 UI 组件。三、项目架构AI 法庭的三大角色我设计的 AI 法庭包含三个核心角色原告律师由一个 LLM 扮演负责从正面论证某个观点被告律师由另一个 LLM 扮演负责从反面提出质疑法官由第三个 LLM 扮演综合双方论点做出最终判断整个流程通过 LangGraph 的状态图来编排每个角色都是一个独立的节点节点之间通过共享状态传递信息。四、实战从零搭建 AI 法庭4.1 环境准备首先安装必要的依赖npm install langchain/core langchain/langgraph langchain/openai或者如果你使用 Pythonpip install langchain langgraph langchain-openai4.2 定义状态和节点在 LangGraph 中状态是一个 TypedDict用于在节点之间传递数据from typing import TypedDict, List from langgraph.graph import StateGraph, END class CourtState(TypedDict): question: str plaintiff_argument: str defendant_argument: str final_verdict: str messages: List[str]4.3 构建图结构接下来定义三个核心节点def plaintiff_node(state: CourtState) - CourtState: 原告律师节点生成正面论证 # 调用 LLM 生成论点 response llm.invoke(f请从正面论证{state[question]}) state[plaintiff_argument] response.content state[messages].append(f原告{response.content}) return state def defendant_node(state: CourtState) - CourtState: 被告律师节点生成反面质疑 response llm.invoke(f请从反面质疑{state[question]}) state[defendant_argument] response.content state[messages].append(f被告{response.content}) return state def judge_node(state: CourtState) - CourtState: 法官节点综合判断 prompt f 问题{state[question]} 原告观点{state[plaintiff_argument]} 被告观点{state[defendant_argument]} 请作为法官做出最终裁决。 response llm.invoke(prompt) state[final_verdict] response.content state[messages].append(f法官{response.content}) return state4.4 组装并运行# 创建图 builder StateGraph(CourtState) 添加节点 builder.add_node(plaintiff, plaintiff_node) builder.add_node(defendant, defendant_node) builder.add_node(judge, judge_node) 添加边 builder.add_edge(plaintiff, defendant) builder.add_edge(defendant, judge) builder.add_edge(judge, END) 设置入口 builder.set_entry_point(plaintiff) 编译图 graph builder.compile() 运行 result graph.invoke({ question: 前端开发者是否应该学习 AI, messages: [] }) print(result[final_verdict])五、踩坑与优化5.1 状态管理问题刚开始运行时我发现状态在节点之间传递时会出现数据丢失。后来才意识到LangGraph 的状态更新是「增量式」的——每个节点只返回自己修改过的字段其他字段会自动保留。但如果节点返回了不完整的 state未返回的字段会被重置。解决方案在每个节点中显式保留所有需要传递的字段或者使用add_node的reducer参数来合并状态。5.2 并发执行为了让原告和被告同时发言而不是串行我尝试了 LangGraph 的并行节点功能from langgraph.graph import add_parallel_edge 让原告和被告并行执行 add_parallel_edge(builder, [plaintiff, defendant], judge)这样两个律师节点可以同时调用 LLM大幅缩短了总执行时间。六、前端集成让 AI 法庭可视化作为一个前端仔我自然要给这个 AI 法庭加上一个漂亮的 UI。我用 React TypeScript 搭建了一个实时对话界面通过 Server-Sent EventsSSE流式展示每个节点的输出// React 组件示例 const CourtRoom: React.FC () { const [messages, setMessages] useStateMessage[]([]); const startTrial async (question: string) { const response await fetch(/api/trial, { method: POST, body: JSON.stringify({ question }), }); const reader response.body?.getReader(); // 流式读取每个节点的输出并更新 UI }; return ( div classNamecourt-room div classNamewitness-box {messages.map(msg ( div className{message ${msg.role}} strong{msg.role}/strong{msg.content} /div ))} /div /div ); };七、总结与展望通过这个项目我不仅深入理解了 LangGraph 的核心概念——状态图、节点、边和并行执行还亲身体验了多 Agent 协作的魅力。AI 法庭只是一个开始同样的架构可以扩展到更多场景代码审查助手多个模型分别检查代码的不同方面安全性、性能、可读性内容审核系统不同模型从不同角度评估内容质量决策支持系统多个 AI 专家给出建议由仲裁模型综合判断作为一个前端开发者我最大的感悟是AI 开发的门槛正在降低。LangGraph 这样的工具让复杂的多 Agent 工作流变得像搭积木一样简单。如果你也是前端开发者不妨试试用 LangGraph 搭建你的第一个 AI 应用——你会发现它比想象中要简单得多。
