Skip to main content

​
Step 1: Install the SDK

1

Install the package

npm i @openchatwidget/sdk
2

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.
import { OpenChatWidget } from "@openchatwidget/sdk";

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

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.

Create a basic agent

Build a minimal Vercel AI SDK agent and expose the endpoint that the widget calls.