Agents Kit

Agents Kit

Copy-and-paste React components for LLM Apps

Works perfectly with shadcn/ui and Vercel AI SDK

Start building 
npx shadcn@latest add http://agents-kit.dev/r/chat-form.json

How Can I help you?

'use client';

import { useChat } from '@ai-sdk/react';
import { ChatForm } from '@/components/agents-kit/chat-form';
import { ChatMessages } from '@/components/agents-kit/chat-messages';
import { ScrollArea } from '@/components/ui/scroll-area';

export default function Home() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <main
      className={`
      min-h-screen p-12
      flex flex-col items-stretch justify-center 
      prose max-w-none prose-sm prose-p:my-0
    `}
    >
      {messages.length === 0 && (
        <div className="mb-2 flex flex-col items-center">
          <h2 className="text-3xl font-bold">How Can I help you?</h2>
        </div>
      )}
      {messages.length > 0 && (
        <ScrollArea style={{ flex: 1 }}>
          <ChatMessages messages={messages} />
        </ScrollArea>
      )}
      <ChatForm
        inputValue={input}
        onInputChange={handleInputChange}
        onSubmit={handleSubmit}
      />
    </main>
  );
}