BVector Chat
Quickstart
Framework-specific examples for initializing the chat widget. Pick your stack and paste the snippet.
Initialize the widget
The widget is framework-agnostic. It mounts itself to the document body and returns a handle you can use to destroy it later.
import { useEffect, useRef } from 'react';
import { ChatWidget } from '@bangdb/web-sdk';
export function BangDBChat() {
const widgetRef = useRef<InstanceType<typeof ChatWidget> | null>(null);
useEffect(() => {
if (widgetRef.current) return;
widgetRef.current = new ChatWidget({
title: 'Chat with AI',
config: {
apikey: 'your-api-key',
backendURL: 'https://your-instance.com:18080',
resourceURL: 'https://your-instance.com:18082',
userid: 'user-123',
indexName: 'my-index',
},
});
return () => { widgetRef.current?.destroy(); };
}, []);
return null;
}Lifecycle notes
Initialize once
Guard with a ref check (widgetRef.current) so the widget is only created once per mount, even under React strict mode.
Shadow DOM
The widget renders inside a Shadow DOM. Its styles are fully isolated and will never affect your application.
Cleanup
Always call destroy() in your cleanup / ngOnDestroy to remove event listeners and DOM nodes.
Environment variables (Next.js)
Store your credentials in .env.local. Prefix with NEXT_PUBLIC_ so they are available in the browser bundle:
.env.local
NEXT_PUBLIC_BANGDB_API_KEY=your-api-key
NEXT_PUBLIC_BANGDB_BACKEND_URL=https://your-instance.com:18080
NEXT_PUBLIC_BANGDB_RESOURCE_URL=https://your-instance.com:18082