Skip to main content
Osmium follows the shadcn/ui specification, making it easy to integrate with existing projects. Before installing Osmium components, ensure your project is properly configured with shadcn/ui.

​
Prerequisites

Make sure your project has been set up correctly with shadcn/ui configuration. If you haven’t done this yet, follow the shadcn/ui installation guide to get started.

​
Install Components

Once your project is configured with shadcn/ui, you can install Osmium components using the shadcn CLI: 
pnpm dlx shadcn@latest add https://registry.intface.io/chat.json
This will download and install the Chat component along with all its dependencies into your components directory.

​
Usage

After installation, you can import and use Osmium components in your application:
  • Code
  • Preview
page.tsx
"use client";
import { useChat } from "@ai-sdk/react";
import Chat from "@/components/chat";

export default function Home() {
  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>
  );
}

​
What Gets Installed

When you install the Chat component, Osmium will add:
  • Chat component: The main chat interface
  • Message List: Displays conversation history
  • Message Input: Handles user input and submission
  • Message Item: Renders individual message content with markdown support
  • Required dependencies: All necessary utilities and types
All components are installed as source code in your project, giving you full control to customize and extend them as needed.