@caylex/chat-widget

An embeddable React chat widget powered by a Caylex agent.

Drop a fully-featured chat UI into any React app with two lines of code. The widget handles streaming responses, tool calls, saved sessions, theming, and auth-token refresh.

Installation

npm install @caylex/chat-widget
# or
yarn add @caylex/chat-widget

The widget has the following peer dependencies — install them in your app if you don't already have them:

npm install react react-dom antd @ant-design/cssinjs @emotion/cache @emotion/react @emotion/styled @ant-design/icons lodash.merge react-markdown remark-gfm @caylex/shared

Usage

import { CaylexChatWidget } from '@caylex/chat-widget';

export function MyPage() {
  return (
    <CaylexChatWidget
      apiBaseUrl="https://api.caylex.ai/api/v1/assistants/"
      widgetToken="YOUR_WIDGET_TOKEN"
      userName="John"
      sampleQueries={['What can you do?', 'Help me with...']}
      theme="light"
      primaryColor="#3F58CF"
      backgroundColor="#FFFFFF"
    />
  );
}

Widget tokens

Widget tokens are short-lived JWTs minted by your backend via POST /widget/mint-token. Pass an async refreshToken callback to auto-refresh on 401:

<CaylexChatWidget
  apiBaseUrl="..."
  widgetToken={token}
  refreshToken={async () => {
    const res = await fetch('/api/mint-widget-token', { method: 'POST' });
    const { token } = await res.json();
    return token;
  }}
/>

Configuration

See the CaylexChatWidgetConfig type for all available props (theme colors, session behavior, callbacks, etc.).

CDN usage

A standalone UMD bundle is also available for plain HTML pages:

<div id="caylex-chat"></div>
<script src="https://cdn.caylex.ai/chat-widget.js"></script>
<script>
  CaylexChat.render('#caylex-chat', {
    apiBaseUrl: 'https://api.caylex.ai/api/v1/assistants/',
    widgetToken: 'YOUR_WIDGET_TOKEN',
  });
</script>

License

Proprietary © Caylex