- Preview
- Code
- Doc
Copy
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",
});
}
Agentic Chat - LangChain (TypeScript)
What This Demo Shows
This demo showcases AG-Kit’s agentic chat using LangChain framework:- LangChain 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 (LangChain):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