精通 langgraph js：通过 5 个基本步骤创建您的第一个 AI 工作流

Rifx.Online
Machine Learning , AI Applications , Software Development
08 Mar, 2025

Langgraph.js

它是一个使用 LLM 构建有状态、多角色应用程序的库，用于创建代理和多代理工作流程，使用节点和边的概念，因此称为图。它提供循环、可控性和持久性，并且还包括内置的持久性，从而实现先进的“人-在-环”和内存功能！

请注意，所有代码都可以在此存储库中找到！

在我们开始之前，让我们探索构成 langgraph.js 基础的关键概念，例如工作流程、图、状态、节点和边。

什么是工作流程？

在我看来，它只是一个包含 N 个作业（节点）的管道，每个节点都有一个要处理的特定任务，然后移动到下一个，依此类推，此外，它在所有节点之间有一个共享上下文（图状态），任何节点都可以编辑！

此外，维基百科对工作流程有更详细的定义，请参考它以了解更多相关信息！

图

LangGraph 的核心是将代理工作流程建模为图。该图由三个主要键构成，它们是：

状态

一个共享的数据结构，表示应用程序的当前快照。

节点

简单的函数，接收当前状态作为输入，对其执行一些操作，然后返回一个更新的状态。

边

节点之间的连接，根据当前State确定接下来要执行哪个Node，它们可以是条件性的，例如仅在特定情况下执行此节点，否则忽略它！

构建图

要实现图，首先，我建议在一些干净的板子上绘制它，例如 tldraw，并在开始编码之前了解您想要的内容，这应该可以帮助您想象您的图，并将其与输出进行比较，就像我们将在下面看到的那样！

实现您的图的步骤

要实现一个图，无论它是一个简单的图还是一个大型图，我总是遵循以下步骤：

定义状态对象
实现节点（首先使其为空）
构建图并将边连接起来
编译图并打印它

定义状态

import { Annotation, messagesStateReducer } from '@langchain/langgraph'

const StateAnnotation = Annotation.Root({
  messages: Annotation({
    reducer: messagesStateReducer, // how you update your state
    default: () => [],
  }),
  /** add any keys regards to your business requirements below */
})

Reducer: 表示如何更新您的状态（在我们的例子中是消息）

它需要两个参数，第一个是当前状态，下一个是更新的状态

示例

const StateAnnotation = Annotation.Root({
  sum: Annotation<number>({
    reducer: (current: number, next: number) => current + next,
    default: 0,
  }),
})

定义空节点

export const nodeOne = async (state: typeof StateAnnotation.State) => {
  // return the current state for now
  return state
}

export const nodeTwo = async (state: typeof StateAnnotation.State) => {
  // return the current state for now
  return state
}

export const nodeThree = async (state: typeof StateAnnotation.State) => {
  // return the current state for now
  return state
}

构建工作流程并连接边

import { StateGraph, START, END } from '@langchain/langgraph'

const workflow = new StateGraph(StateAnnotation)
  .addNode('one', nodeOne)
  .addNode('two', nodeTwo)
  .addNode('three', nodeThree)
  // Conecting Edges Here
  .addEdge(START, 'one')
  .addEdge('one', 'two')
  .addEdge('two', 'three')
  .addEdge("three", END)

编译工作流程，并打印您的第一个图

请注意，我在这里使用 Bun！

// ********************** Compile the graph
const graph = workflow.compile()

// ********************** Drawing & Output a png
async function main() {
  // print the graph
  const drawableGraph = await graph.getGraphAsync()
  const png = await drawableGraph.drawMermaidPng()
  Bun.write(process.cwd() + '/src/simple/conditional-graph.png', png)
}

main()

// ********************** Invoking (With Stream)
// Invoke the graph
graph.invoke({})
// Invoke with stream
graph.stream({})

输出 Png

输出图图像

Langgraph 中最有趣的事情之一是您在上面看到的输出，从一张图片中，您可以弄清楚所有流程，而无需调试您的代码！

条件边

一种特殊的边类型允许您根据某些条件控制流程！

有两种处理条件边的方法

使用addConditionalEdges

export const shouldContinue = async (state: typeof StateAnnotation.State) => {
  const random = Math.random() * 100
  if (random > 50) {
    return END
  } else {
    return 'two'
  }
}

const workflow = new StateGraph(StateAnnotation)
  .addNode('one', nodeOne)
  .addNode('two', nodeTwo)
  .addNode('three', nodeThree)
  // Conecting Edges
  .addEdge(START, 'one')
  .addEdge('one', 'two')
  .addEdge('two', 'three')
  .addEdge('three', END)
  .addConditionalEdges('one', shouldContinue, {
    true: 'two',
    false: END,
  })

使用Command

(Command 在“人-在-环”流程中使用很多)

使用Command的主要区别在于，您可以在路由之前更新状态！

export const nodeOne = async (state: typeof StateAnnotation.State) => {
  const someChecks = '...'
  if (someChecks) {
    return new Command({
      goto: END,
      // Update your state here!
      update: {
        // what to update
      },
    })
  }

return new Command({
    goto: 'two',
  })

}

Langgraph Studio

一个用于在本地原型设计和调试 LangGraph 应用程序的桌面应用程序，它允许您调试、测试和运行您的工作流程。

从这里下载 Langgraph Studio 并按照以下步骤开始！

确保您已安装 docker 并在您的机器上运行
克隆 repo
拖动您的项目，然后从底部栏打开项目设置
选择 NodeJS 作为项目版本，并将图的路径设置为 ./src/simple/graph.ts:graph 不要忘记 :graph，它是来自 graph.ts 文件的命名导出
启动项目，然后从提交按钮运行您的流程