- 预览
- 代码
- 文档
复制
import { createAgent as createLangchainAgent } from "langchain";
import { MemorySaver } from "@langchain/langgraph";
import { ChatOpenAI } from "@langchain/openai";
import { LangchainAgent, clientTools } from "@ag-kit/adapter-langchain";
const checkpointer = new MemorySaver();
export function createAgent() {
// Configure model
const model = new ChatOpenAI({
model: process.env.OPENAI_MODEL!,
apiKey: process.env.OPENAI_API_KEY!,
configuration: {
baseURL: process.env.OPENAI_BASE_URL!,
},
});
// Create agent
const lcAgent = createLangchainAgent({
model,
checkpointer,
middleware: [clientTools()],
});
return new LangchainAgent({
agent: lcAgent,
description: "A helpful AI assistant",
});
}
对话式 Agent - LangChain
本演示展示
本演示展示了 AG-Kit 使用 LangChain 框架的对话式 Agent：- LangChain StateGraph：使用带有
AGKitStateAnnotation的StateGraph进行状态管理 - OpenAI 集成：通过
ChatOpenAI集成 OpenAI 模型 - 工具绑定：支持通过
model.bindTools()进行工具绑定 - 记忆持久化：使用
MemorySaver保存对话历史 - 前端工具：Agent 可以调用前端工具（alert、change background color、get location）
如何交互
尝试这些建议或提出您自己的问题：- “提醒用户台风”（触发警报工具）
- “将背景颜色改为蓝色/红色/绿色/黄色/紫色/橙色/粉色/棕色/灰色/黑色/白色”（触发颜色更改）
- “获取我当前位置”（触发地理定位工具）
- “你好，你今天怎么样？”
- “你能帮我写一个关于机器人的短故事吗？“
技术实现
后端 (LangChain)：- 使用
AGKitStateAnnotation的StateGraph工作流 - 通过环境变量配置的
ChatOpenAI模型 - 使用
model.bindTools([...(state.agKit?.actions || [])])进行工具绑定 - 使用
MemorySaver进行记忆持久化 - 使用
Command进行状态更新的简单聊天节点
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 实现之间切换