- Preview
- Code
- Doc
Copy
/**
* Agentic chat using AG-Kit Agents
*/
import { Agent, OpenAIProvider } from '@ag-kit/agents';
/**
* Create agentic chat agent
*/
export function createAgenticChatAgent(): Agent {
const provider = new OpenAIProvider({
apiKey: process.env.OPENAI_API_KEY!,
defaultModel: process.env.OPENAI_MODEL || 'gpt-4o-mini',
baseURL: process.env.OPENAI_BASE_URL
});
return new Agent({
name: 'agentic-chat-agent',
description: 'A helpful AI assistant',
model: provider,
instructions: 'You are a helpful assistant.',
modelSettings: {
temperature: 0.7,
maxTokens: 4096
}
});
}
// No pre-created agent instance to avoid environment variable issues
Agentic Chat - AG-Kit Agents (TypeScript)
What This Demo Shows
This demo showcases AG-Kit’s native agent implementation:- AG-Kit Agent Class: Uses AG-Kit’s
Agentclass withOpenAIProvider - Simplified Configuration: Built-in state management and tool integration
- Provider Pattern:
OpenAIProviderhandles model configuration - Automatic Tool Handling: Built-in tool integration and response handling
- Frontend Tools: Same frontend tools as LangGraph implementation
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 (AG-Kit Agents):Agentclass with name, description, and instructionsOpenAIProviderwith API key and model configuration- Built-in model settings (temperature, maxTokens)
- Automatic tool binding and response handling
- No explicit state management needed
- Same
useChathook andAgKitChatcomponent - 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 implementations
- Consistent user experience across frameworks