React
Use the ChatWidget React package in your app.
Install from npm:
pnpm add @nightzeros/chatai-reactPeer dependency: React 18 or 19. The package entry includes "use client" for Next.js App Router.
Inside this monorepo during development, use workspace:* instead of the public registry.
{
"dependencies": {
"@nightzeros/chatai-react": "workspace:*"
}
}Basic usage
"use client";
import { ChatWidget } from "@nightzeros/chatai-react";
export function SupportChat() {
return (
<ChatWidget
assistantId="asst_your_public_id"
apiUrl="https://app.nightzeros.com"
/>
);
}apiUrl must be the absolute ChatAI origin (same as BETTER_AUTH_URL / widget API host).
Props
| Prop | Type | Notes |
|---|---|---|
assistantId | string | Required — publicId |
apiUrl | string | Required — ChatAI origin |
className | string | Optional wrapper class |
theme | "light" | "dark" | "system" | Optional |
primaryColor | string | Optional |
position | "bottom-left" | "bottom-right" | Optional |
iconUrl | string | null | Optional |
suggestedQuestions | string[] | Optional |
showSources | boolean | Optional |
layout | "fixed" | "contained" | Optional |
voice | boolean | Optional — false hides the Voice button even when the assistant offers Voice. Voice requires 1.2.0 or later for the playback gate; 1.1.0 is refused with "Voice needs an updated chat widget" (Voice (preview)) |
onReady / onError | callbacks | Optional |
Low-level: mountChatWidget(element, options) from the same package.
Example app
# examples/react-widget/.env
VITE_CHATAI_ORIGIN=http://localhost:3000
VITE_CHATAI_ASSISTANT_ID=asst_your_public_id
pnpm --filter @chatai/example-react-widget devSee Examples.
Related
- Widget — script tag path
- Assistants