- Preview
- Code
- Doc
Copy
/**
* 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(),
});
Agentic Chat - LangGraph (TypeScript)
What This Demo Shows
This demo showcases AG-Kit’s agentic chat using LangGraph framework:- LangGraph StateGraph: Uses
StateGraphwithAGKitStateAnnotationfor state management - OpenAI Integration: Integrates with OpenAI models via
ChatOpenAI - Tool Binding: Supports tool binding with
model.bindTools() - Memory Persistence: Uses
MemorySaverfor conversation history - Frontend Tools: Agents can call frontend tools (alert, change background color, get location)
How to Interact
Try these suggestions or ask your own questions:- “Alert user about typhoon” (triggers alert tool)
- “Change background color to blue/red/green/yellow/purple/orange/pink/brown/gray/black/white” (triggers color change)
- “Get my current location” (triggers geolocation tool)
- “Hello, how are you today?”
- “Can you help me write a short story about a robot?”
Technical Implementation
Backend (LangGraph):StateGraphworkflow withAGKitStateAnnotationChatOpenAImodel with environment variable configuration- Tool binding with
model.bindTools([...(state.agKit?.actions || [])]) - Memory persistence with
MemorySaver - Simple chat node with
Commandfor state updates
useChathook manages conversation stateAgKitChatcomponent provides chat interface- Three built-in tools:
alert,change-background-color, andget-current-location - Supports 12 color options: blue, red, green, yellow, purple, orange, pink, brown, gray, black, white, transparent
- Geolocation tool with browser API integration and permission handling
- URL parameter switching between agent implementations