floating-chat-widget

A floating AI chat widget for React and Next.js.

Installation

npm install floating-chat-widget
# or
pnpm add floating-chat-widget
# or
yarn add floating-chat-widget

Quick Start

React

import { FloatingChatWidget } from "floating-chat-widget";
import "floating-chat-widget/styles.css";

function App() {
  return (
    <FloatingChatWidget
      baseUrl="https://your-api.com"
      authToken="optional-token"
    />
  );
}

Next.js

Import styles once from app/layout.tsx:

import "floating-chat-widget/styles.css";

Render the widget from a client component:

"use client";

import { FloatingChatWidget } from "floating-chat-widget";

export function ChatWidgetClient() {
  return <FloatingChatWidget baseUrl="/api" authToken={null} />;
}

The package keeps styles separate from the JavaScript entry so Next.js apps can import CSS from the correct boundary.

Props

type FloatingChatWidgetProps = {
  baseUrl: string;
  authToken?: string | null;
  title?: string;
  width?: number;
  height?: number;
  defaultOpen?: boolean;
  storageKey?: string;
  position?: "bottom-right" | "bottom-left";
  className?: string;
};

Default Values

• width: 600
• height: 800
• title: Bedrock AI
• position: bottom-right
• storageKey: bedrock-chat-widget-session-id

API Contract

The widget expects the host backend to expose:

• POST {baseUrl}/chat
• GET {baseUrl}/session/:sessionId/messages

The chat endpoint should return NDJSON stream events compatible with:

• session_id
• text_delta
• thinking_delta
• tool_call
• tool_result
• final_result

Local Demo

cd packages/chat-widget
pnpm install
pnpm dev

Open the printed localhost URL and click the bottom-right floating button. The demo proxies /api to http://localhost:8000, matching the current frontend project's local backend convention.

License

MIT