Chat Widget

The drop-in widget gives your users a complete AI chat experience with zero custom UI code.

Basic Usage

<div id="chat" style="height: 500px;"></div>

<script>
  BundleLLM.init().renderChat('#chat')
</script>

The widget handles everything: sign-in, provider selection, streaming responses, and sign-out.

Options

ai.renderChat('#chat', {
  placeholder: 'Ask about this product...',
  context: 'This is a product page for Acme Widget. Price: $49.',
  welcomeMessage: 'Connect your AI to ask questions about this product.',
  theme: 'dark',
})
OptionTypeDefaultDescription
placeholderstring"Ask something..."Input field placeholder text
contextstring.System prompt sent with every message. Use this to provide page content, product data, or instructions.
welcomeMessagestring"Connect your AI to start chatting."Message shown before the user signs in
theme"light" | "dark""light"Widget color theme

Styling

The widget uses inline styles and is fully self-contained. It fills the container element you provide. control the size via the container’s CSS:

<!-- Fixed height -->
<div id="chat" style="height: 500px;"></div>

<!-- Full viewport -->
<div id="chat" style="height: 100vh;"></div>

<!-- Responsive -->
<div id="chat" style="height: min(600px, 80vh);"></div>

Context

The context option is the most important configuration. It tells the AI what your page is about:

ai.renderChat('#chat', {
  context: `
    You are a helpful assistant for Acme Inc.
    The user is viewing the pricing page.
    Plans: Free ($0), Pro ($49/mo), Enterprise (custom).
    Answer questions about our plans and features.
  `,
})

The context is sent as a system prompt with every message. Keep it concise. it counts toward the user’s token usage.

Events

The widget emits events on the instance:

const ai = BundleLLM.init()
ai.renderChat('#chat')

ai.on('connected', ({ provider, model }) => {
  console.log(`User connected: ${provider}`)
})

ai.on('disconnected', () => {
  console.log('User signed out')
})

Sign Out

The widget includes a hamburger menu with a “Sign out” option. Users can also be signed out programmatically:

ai.disconnect()