对话式 Agent

使用 LangGraph 状态流与前端工具的对话示例

预览

代码

agent.ts

/**
 * A simple agentic chat flow using LangGraph instead of CrewAI.
 */

import { ChatOpenAI } from "@langchain/openai";
import { SystemMessage } from "@langchain/core/messages";
import { RunnableConfig } from "@langchain/core/runnables";
import { StateGraph, Command, START, END } from "@langchain/langgraph";

import { ClientStateAnnotation, ClientState } from "@ag-kit/adapter-langgraph";
import { MemorySaver } from "@langchain/langgraph";

async function chatNode(state: ClientState, config?: RunnableConfig) {
  const model = new ChatOpenAI({
    model: process.env.OPENAI_MODEL || "gpt-4o-mini",
    apiKey: process.env.OPENAI_API_KEY,
    configuration: {
      baseURL: process.env.OPENAI_BASE_URL,
    },
  });

  if (!config) {
    config = { recursionLimit: 25 };
  }

  const modelWithTools = model.bindTools([...(state.client?.tools || [])], {
    parallel_tool_calls: false,
  });

  const systemMessage = new SystemMessage({
    content: "You are a helpful assistant.",
  });

  const response = await modelWithTools.invoke(
    [systemMessage, ...state.messages],
    config
  );

  return new Command({
    goto: END,
    update: {
      messages: [response],
    },
  });
}

const workflow = new StateGraph(ClientStateAnnotation)
  .addNode("chat_node", chatNode)
  .addEdge(START, "chat_node")
  .addEdge("chat_node", END);

export const agenticChatGraph = workflow.compile({
  checkpointer: new MemorySaver(),
});

文档

​

对话式 Agent - LangGraph

​

本演示展示

本演示展示了 AG-Kit 使用 LangGraph 框架的对话式 Agent：

• LangGraph StateGraph：使用带有 AGKitStateAnnotation 的 StateGraph 进行状态管理
• OpenAI 集成：通过 ChatOpenAI 集成 OpenAI 模型
• 工具绑定：支持通过 model.bindTools() 进行工具绑定
• 记忆持久化：使用 MemorySaver 保存对话历史
• 前端工具：Agent 可以调用前端工具（alert、change background color、get location）

​

如何交互

尝试这些建议或提出您自己的问题：

• “提醒用户台风”（触发警报工具）
• “将背景颜色改为蓝色/红色/绿色/黄色/紫色/橙色/粉色/棕色/灰色/黑色/白色”（触发颜色更改）
• “获取我当前位置”（触发地理定位工具）
• “你好，你今天怎么样？”
• “你能帮我写一个关于机器人的短故事吗？“

​

技术实现

后端 (LangGraph)：

• 使用 AGKitStateAnnotation 的 StateGraph 工作流
• 通过环境变量配置的 ChatOpenAI 模型
• 使用 model.bindTools([...(state.agKit?.actions || [])]) 进行工具绑定
• 使用 MemorySaver 进行记忆持久化
• 使用 Command 进行状态更新的简单聊天节点

前端 (React)：

• useChat 钩子管理对话状态
• AgKitChat 组件提供聊天界面
• 三个内置工具：alert、change-background-color 和 get-current-location
• 支持 12 种颜色选项：blue、red、green、yellow、purple、orange、pink、brown、gray、black、white、transparent
• 具有浏览器 API 集成和权限处理的地理定位工具
• URL 参数在 Agent 实现之间切换

这展示了 LangGraph 强大的状态管理和工具集成能力！