Examples
Multi-Model Comparison
Compare responses from different AI models side-by-side. Same input, different adapters — AgentsKit makes it trivial.
Compare responses from different AI models side-by-side. Same input, different adapters — AgentsKit makes it trivial.
Both panels receive the same message — different adapters, different responses
With AgentsKit
Just use two useChat hooks with different adapters:
import { useChat, ChatContainer, Message, InputBar } from '@agentskit/react'
import { anthropic, openai } from '@agentskit/adapters'
function Compare() {
const claude = useChat({ adapter: anthropic({ apiKey, model: 'claude-sonnet-4-6' }) })
const gpt = useChat({ adapter: openai({ apiKey, model: 'gpt-4o' }) })
const sendBoth = (text: string) => {
claude.send(text)
gpt.send(text)
}
return (
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
<ChatContainer>{claude.messages.map(m => <Message key={m.id} message={m} />)}</ChatContainer>
<ChatContainer>{gpt.messages.map(m => <Message key={m.id} message={m} />)}</ChatContainer>
<InputBar chat={{ ...claude, send: sendBoth }} />
</div>
)
}Tool Use
AI assistants that call functions — weather lookups, web search, database queries. AgentsKit renders tool calls with expandable cards showing arguments and results.
Code Assistant
Streaming code with syntax highlighting. AgentsKit's CodeBlock component renders code beautifully as it streams in.