Examples
shadcn Chat
AgentsKit's useChat hook styled with shadcn/ui patterns. This demo recreates the shadcn look — in a real app, you'd use actual shadcn components.
AgentsKit's useChat hook styled with shadcn/ui patterns. This demo recreates the shadcn look — in a real app, you'd use actual shadcn components.
With real shadcn/ui
import { useChat } from '@agentskit/react'
import { Card, CardContent, CardFooter } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { anthropic } from '@agentskit/adapters'
function Chat() {
const chat = useChat({ adapter: anthropic({ apiKey: 'key', model: 'claude-sonnet-4-6' }) })
return (
<Card className="h-[500px] flex flex-col">
<ScrollArea className="flex-1 p-4">
{chat.messages.map(msg => (
<div key={msg.id} className={`flex gap-2 mb-3 ${msg.role === 'user' ? 'justify-end' : ''}`}>
<Avatar><AvatarFallback>{msg.role === 'user' ? 'U' : 'A'}</AvatarFallback></Avatar>
<div className={`rounded-lg px-3 py-2 max-w-[70%] ${msg.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}>
{msg.content}
</div>
</div>
))}
</ScrollArea>
<CardFooter className="gap-2">
<Input value={chat.input} onChange={e => chat.setInput(e.target.value)} placeholder="Message..." onKeyDown={e => e.key === 'Enter' && chat.send(chat.input)} />
<Button onClick={() => chat.send(chat.input)}>Send</Button>
</CardFooter>
</Card>
)
}