> ## Documentation Index
> Fetch the complete documentation index at: https://osmium.intface.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Learn how to install and set up Osmium components in your project using the shadcn/ui CLI.

Osmium follows the [shadcn/ui specification](https://ui.shadcn.com/docs/registry), making it easy to integrate with existing projects. Before installing Osmium components, ensure your project is properly configured with [shadcn/ui](https://ui.shadcn.com/docs).

## 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](https://ui.shadcn.com/docs/installation) to get started.

## Install Components

Once your project is configured with shadcn/ui, you can install Osmium components using the shadcn CLI:

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm dlx shadcn@latest add https://registry.intface.io/chat.json
  ```

  ```bash npm theme={null}
  npx shadcn@latest add https://registry.intface.io/chat.json
  ```

  ```bash yarn theme={null}
  yarn shadcn@latest add https://registry.intface.io/chat.json
  ```

  ```bash bun theme={null}
  bunx --bun shadcn@latest add https://registry.intface.io/chat.json
  ```
</CodeGroup>

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:

<Tabs>
  <Tab title="Code">
    ```tsx page.tsx theme={null}
    "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>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe src="https://osmium-demo.vercel.app" className="w-full h-[500px]" sandbox />
    </Frame>
  </Tab>
</Tabs>

## 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.