Installation

Step 1: Install the SDK

Install the package

npm i @openchatwidget/sdk

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>" />
    </>
  );
}

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.

Getting started

Building agents

Examples

Features

Step 1: Install the SDK

Create a basic agent

​Step 1: Install the SDK

Create a basic agent

Step 1: Install the SDK