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

# Installation

> How to install it on your app

## Step 1: Install the SDK

<Steps>
  <Step title="Install the package">
    ```bash theme={null}
    npm i @openchatwidget/sdk
    ```
  </Step>

  <Step title="Embed the widget in your React app">
    Then embed the component anywhere in your project. A common pattern is to mount it in your main app layout so it appears across your site.

    ```tsx theme={null}
    import { OpenChatWidget } from "@openchatwidget/sdk";

    export default function MySite() {
      return (
        <>
          ...
          <OpenChatWidget url="<YOUR_AGENT_STREAMING_ENDPOINT>" />
        </>
      );
    }
    ```
  </Step>

  <Step title="Connect widget to agent">
    The `url` prop should point to the chat endpoint that powers your agent. We'll cover how to create a basic agent and expose a streaming endpoint in the next section.
  </Step>
</Steps>

<Card title="Create a basic agent" icon="arrow-right" href="/create-an-agent" horizontal>
  Build a minimal Vercel AI SDK agent and expose the endpoint that the widget calls.
</Card>