Quickstart

Add AI chat to your website in under 5 minutes. Users bring their own LLM. You pay nothing for AI.

1. Add the SDK

Include the SDK script on your page:

<script src="https://cdn.bundlellm.com/sdk.js"></script>

That’s it. No npm install, no build step, no dependencies.

2. Drop-in Widget (Fastest)

Add a complete chat UI in 3 lines:

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

<script>
  BundleLLM.init().renderChat('#chat', {
    context: 'This is a product page for...',
    placeholder: 'Ask about this product...',
  })
</script>

This renders a self-contained widget with provider picker, model selector, streaming chat, token usage, and sign-out.

3. Custom UI (Full Control)

For complete control over the UI:

<div id="sign-in"></div>
<div id="messages"></div>

<script>
  const ai = BundleLLM.init()

  // Render provider picker
  ai.renderSignIn('#sign-in')

  // Listen for connection
  ai.on('connected', ({ provider, model }) => {
    console.log(`Connected to ${provider} (${model})`)
  })

  // Send a message with streaming
  const stream = ai.chat({
    messages: [{ role: 'user', content: 'Hello!' }],
    context: 'Optional page context...',
  })

  stream
    .on('delta', (text) => {
      // Append text to your UI
    })
    .on('done', ({ usage }) => {
      // Stream complete. Usage.inputTokens, usage.outputTokens
    })
    .on('error', (err) => {
      // Handle error
    })
</script>

Next Steps