Installation - Osmium

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

npx shadcn@latest add https://registry.intface.io/chat.json

yarn shadcn@latest add https://registry.intface.io/chat.json

bunx --bun 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.

​Prerequisites

​Install Components

​Usage

​What Gets Installed

Prerequisites

Install Components

Usage

What Gets Installed