Skip to main content
The Chat component is the core of Osmium, providing a complete chat interface optimized for AI conversations. It combines a message list and message input with intelligent scroll management and UX features similar to ChatGPT and Grok.

​
Installation

  • CLI
  • Manual
Install the Chat component using the shadcn CLI:
pnpm dlx shadcn@latest add https://registry.intface.io/chat.json

​
Usage

import Chat from "@/components/chat";
import { useChat } from "ai/react";

export default function App() {
  const { messages: chatMessages, sendMessage, status, stop } = useChat();

  const handleSend = async (message: string) => {
    sendMessage({ text: message });
  };

  const handleStop = () => {
    stop();
  };

  return (
    <div className="h-screen flex flex-col items-center justify-center">
      <Chat
        status={status}
        messages={chatMessages}
        onSend={handleSend}
        onStop={handleStop}
      />
    </div>
  );
}

​
Props

​
status
ChatStatus
required
The current status of the chat. Controls the input state and loading indicators.
​
messages
UIMessage[]
required
Array of chat messages to display. Uses the standard UI message format from AI SDK.
​
onSend
(message: string) => void
required
Callback function called when the user sends a message. Receives the message content as a string.
​
onStop
() => void
required
Callback function called when the user wants to stop the AI response generation.