jqxChat

Getting started

jqxChat drops an AI assistant chat into any page. Connect it to Claude (Anthropic), OpenAI or your own backend - with token streaming, Markdown rendering, avatars, starter prompts, theming, and inline or popup modes.

1Add the references

Include jQuery, the jqxChat script and its dependencies, plus a jQWidgets theme stylesheet.

<!-- theme -->
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />

<!-- scripts -->
<script src="scripts/jquery-3.7.1.min.js"></script>
<script src="jqwidgets/jqxcore.js"></script>
<script src="jqwidgets/jqxbuttons.js"></script>
<script src="jqwidgets/jqxscrollbar.js"></script>
<script src="jqwidgets/jqxlistbox.js"></script>
<script src="jqwidgets/jqxdropdownlist.js"></script>
<script src="jqwidgets/jqxchat.js"></script>

2Add a container and create the chat

Add a host element, then initialize it in a $(document).ready handler.

<div id="chat"></div>

<script>
    $(function () {
        $('#chat').jqxChat({
            width: 440,
            height: 600,
            title: 'AI Assistant',
            subtitle: 'Powered by Claude',
            welcomeMessage: 'Hi! How can I help?',
            starterPrompts: ['What can you do?', 'Show me an example']
        });
    });
</script>

3Connect an AI provider

Pick a provider with provider ('anthropic', 'openai' or 'custom') and a model, then choose one of three ways to authenticate.

a) Quick trial - apiKey

Fastest to try. The key is used from the browser, so use this for local development only.

$('#chat').jqxChat({
    provider: 'anthropic',
    model: 'claude-opus-4-8',
    apiKey: 'YOUR_KEY'   // dev only - never ship a key to the browser
});

b) Production - proxyUrl

Point the chat at your own endpoint. Your server holds the key and forwards the request to the provider.

$('#chat').jqxChat({
    provider: 'anthropic',
    proxyUrl: '/api/chat'
});

c) Full control / offline - sendRequest

Provide your own transport. It receives the conversation payload and returns a Promise that resolves to the assistant's text (or you stream tokens with chat.appendDelta()).

$('#chat').jqxChat({
    sendRequest: function (payload, chat) {
        // payload = { messages: [{ role, content }], system, model, ... }
        return fetch('/api/chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        }).then(function (r) { return r.text(); });
    }
});

4Streaming responses

Set stream: true to render tokens as they arrive (Server-Sent Events with the built-in providers). With a custom sendRequest, call chat.appendDelta(token) for each chunk instead of resolving the whole string at once.

$('#chat').jqxChat({ provider: 'anthropic', proxyUrl: '/api/chat', stream: true });

5Common options

Option	Type	Description
title / subtitle	string	Header text.
welcomeMessage	string	First assistant bubble shown before any input (Markdown supported).
starterPrompts	string[]	Suggestion chips the user can tap to start.
colorScheme	string	'light', 'dark' or 'auto'.
accentColor	string	Any CSS color for the send button, user bubbles, avatars and launcher.
mode	string	'inline' (embedded) or 'popup' (floating launcher).
launcherPosition	string	Popup launcher corner, e.g. 'bottom-right'.
botName / botAvatar / userAvatar	string	Branding - names and avatar image URLs or data-URIs.
system	string	System prompt sent with every request.
maxTokens	number	Response length cap.
stream	boolean	Stream tokens as they arrive.

See the full list in the jqxChat API reference.

6Popup (floating) mode

Render a floating launcher button that opens the chat panel - great for a site-wide help assistant.

$('#chat').jqxChat({
    mode: 'popup',
    launcherPosition: 'bottom-right',
    title: 'Help Assistant'
});

7Methods

Call methods with the standard jQWidgets syntax: $('#chat').jqxChat('methodName', args).

Method	Description
sendMessage(text)	Send a user message programmatically.
addMessage(role, content)	Append a message ('user' or 'assistant') without calling the model.
appendDelta(delta)	Append a streaming token to the current assistant message.
getMessages()	Return the conversation array.
clearConversation()	Reset the conversation.
stop()	Stop an in-flight response.
openPopup() / closePopup() / toggle()	Control the popup panel (popup mode).
focus(), val(), refresh(), destroy()	Focus the input, get/set the input text, re-render, or tear down.

$('#chat').jqxChat('sendMessage', 'Summarize this page');

8Events

Bind with $('#chat').on('eventName', handler); the payload is on event.args.

Event	Fires when
messageSent	The user sends a message.
responseStart	The assistant response begins.
responseDelta	A streaming token arrives.
messageReceived	A complete assistant message is added.
responseEnd	The response finishes.
error	A request fails.
open / close	The popup panel opens or closes.
stop	A response is stopped.
create	The widget is initialized.

$('#chat').on('messageReceived', function (event) {
    var message = event.args;   // { role: 'assistant', content: '...' }
});

9Theming

The chat follows the active jQWidgets theme. Beyond that, set colorScheme and accentColor - at init or at runtime - to match your brand. No extra theme files required.

// at runtime
$('#chat').jqxChat({ colorScheme: 'dark', accentColor: '#ec4899' });

10Frameworks

The same component ships as native wrappers - the options, methods and events map 1:1.

// Angular
import { jqxChatModule } from 'jqwidgets-ng/jqxchat';

<!-- template -->
<jqxChat [title]="'AI Assistant'" [colorScheme]="'light'" [sendRequest]="sendRequest"></jqxChat>

React and Vue wrappers follow the same pattern (jqxChat component with matching props/events).