Eloquent.ai Chat

Test the React Component in Storybook

# install deps
npm i

# run Storybook (visual test)
npm run storybook

Script-tag (IIFE) Demo — examples/vanilla-embed

This is an example of how you can use the widget via a script tag.

# build the bundle (creates `dist/eloquent-chat.global.js`):
npm run build
# open HTML file in browser
open examples/vanilla-embed/index.html

The page demonstrates custom theming and programmable open/close/destroy functionality.

Test in a Fresh App

# in another folder
npm create vite@latest widget-consumer -- --template react-ts
cd widget-consumer
npm i eloquent-ai-chat

Then update your app component:

// src/App.tsx
import { EloquentChat } from "eloquent-ai-chat";

export default function App() {
  return <EloquentChat title="Hello" />;
}

OpenAI Agent Testing

1. Start the Agent Server

cd examples/server
cp .env.example .env # put your real OPENAI_API_KEY in .env
npm i
npm run dev # starts on http://localhost:8787 (configurable via PORT)

2. Try it via Script Tag (IIFE Demo)

Build the widget once:

npm run build

Open the example HTML (no server required):

open examples/openai-embed/index.html

3. Try it from Storybook (React)

Start Storybook:

npm run storybook

See the Open AI story in the Storybook interface.

Known Issues / Potential Improvements

• A11y is out of scope; can be added later if desired.