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.

A

Assistant

Online

A

Hello! How can I help you today?

U

Can you help me build a chat UI?

A

Of course! I can help you build a chat UI. What framework or library are you using?

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>
  )
}