How do I switch between Docs AI embed modes?

Set the data-view-mode attribute on the script tag to modal (the default: a launcher that opens a centred panel), search (a command-palette panel near the top of the page), or sidebar (a panel docked to the right edge). Cmd/Ctrl+K opens Docs AI in every mode. You can only use one mode per page, but you can have multiple knowledge bases and assistants on different pages of the same site.

Does Docs AI automatically match my site's dark mode?

Yes. Set data-color-scheme-selector to whatever your own theme toggle sets — html.dark, or [data-theme="dark"] — and the assistant follows your site's switch as the reader flips it. Set data-color-scheme to auto instead to follow the visitor's OS preference. The default is light.

Can I trigger the command palette from a custom button instead of Cmd/Ctrl+K?

Yes. Call window.KeluWidget.open() from any click handler to open the command palette or chat launcher programmatically — or point data-modal-override-open-selector-ask-ai at your button and skip the JavaScript. You can also set data-hotkey to a different key if Cmd/Ctrl+K conflicts with another shortcut on your page.

Can I use this as an SDK in React or Next.js?

Not as a package yet. Add the script tag to your React or Next.js app's root layout, where every mode, theme option and event works, or call the REST API for your own UI.

Does the sidebar mode affect my page layout?

No. The sidebar sits over your page; it does not push your layout aside. Set its width with data-sidebar-width. To keep the page usable while it is open, add data-modal-overlay-hidden="true" and data-modal-lock-scroll="false".

How do I scope Docs AI to a specific knowledge source or version?

Pass data-source-group-ids on the script tag to restrict retrieval to specific source groups — for example, one group per docs version (source groups are on Enterprise). Useful when you have multiple product versions indexed in one knowledge base and want Docs AI on a v2 docs site to only surface v2 answers.

AI assistant for your docs & site,
in any mode you need

One script tag. Three view modes. Dark-mode sync included. Kelu’s Docs AI turns your documentation and guides into an always-available, citation-backed AI assistant — as an interactive chat, a Cmd+K search bar, or a reader sidebar.

Start Free Docs AI Guide

Embed modes

Four ways to deliver Docs AI to your users

Give your visitors instant answers right where they are reading. Switch modes with a single data attribute.

Default modedata-view-mode="modal"

Chat Launcher

A floating button in the corner of your page opens a full chat panel. The most familiar experience for users — minimal footprint on your page, maximum conversational depth.

Configurable position: bottom-right, bottom-left, or custom CSS anchor

Custom launcher icon or text label

Smooth open/close animation with scroll-lock on mobile

Keyboard first

CmdK

Command Palette

Open the widget with Cmd+K (Mac) or Ctrl+K (Windows/Linux) in every mode, on by default. Developers and power users get instant AI answers without reaching for the mouse.

Activates globally on any page with a single script tag
Search your indexed docs as you type
Arrow-key navigation through suggested questions
Esc to dismiss; answer expands inline in the palette

In-page inputdata-view-mode="search"

Search Bar

Attach the widget to a search input already on your page — inside a navigation bar, a hero section, or a docs header. Clicking the box opens a panel near the top of the page; pressing Enter asks the question.

Set data-view-mode="search" and data-search-input on the script tag

Enter opens the panel and asks the question

Full answer with citations in the panel

Replaces or augments existing static search inputs

Docked readingdata-view-mode="sidebar"

Sidebar

A panel docked to the right edge of the window, so the assistant stays in view. Ideal for documentation sites where users want to ask questions while reading without losing their place.

460px panel over the page; set the width with data-sidebar-width

Collapse to icon to reclaim screen space

Keyboard shortcut to toggle open/closed

One script tag

Deploy Docs AI in under 60 seconds

Paste the snippet into your page’s <head> or integrate it into your application. Set data-view-mode to switch between the chat panel, a Cmd+K search bar, or a docked sidebar.

data-view-mode: modal | search | sidebar
data-color-scheme: light | dark | auto (default: light)
data-brand-color: any valid CSS color
data-position: bottom-right | bottom-left
data-knowledge-base-id: your Kelu knowledge base UUID
data-client-key: public client key (kl_pk_...)

1. CHAT LAUNCHER (DEFAULT)

<script
  src="https://widget.kelu.dev/kelu-widget.js"
  data-knowledge-base-id="kb_abc123"
  data-client-key="kl_pk_..."
  data-color-scheme="auto"
  data-position="bottom-right"
  async
></script>

2. SEARCH PANEL (COMMAND PALETTE)

<script
  src="https://widget.kelu.dev/kelu-widget.js"
  data-knowledge-base-id="kb_abc123"
  data-client-key="kl_pk_..."
  data-view-mode="search"
  data-color-scheme="auto"
  async
></script>

3. SIDEBAR (PERSISTENT DOCKED PANEL)

<script
  src="https://widget.kelu.dev/kelu-widget.js"
  data-knowledge-base-id="kb_abc123"
  data-client-key="kl_pk_..."
  data-view-mode="sidebar"
  data-color-scheme="auto"
  async
></script>

Theming

Dark-mode sync and full style control

The widget can follow your site’s color scheme. Override any detail with data attributes.

Dark-mode sync

Set data-color-scheme="auto" and the widget follows the reader's prefers-color-scheme setting, or point data-color-scheme-selector at your own theme toggle. The default is light.

Theme attributes

Override design tokens via data-* attributes on the script tag, such as data-brand-color and data-border-radius. Change color, font, radius, and size without writing custom CSS.

Font control

By default the widget uses the system font. Set data-font-family to any CSS font stack so text renders consistently with your brand.

Component styles

Style any part of the widget with data-{component}-{property} attributes, such as data-launcher-button-background-color. Your site's own styles do not change the widget.

Cmd/Ctrl+K

The keyboard shortcut developers expect

The widget registers a global Cmd+K (Mac) / Ctrl+K (Windows, Linux) listener by default, in every mode. One keystroke opens the palette, another dismisses it. No mouse required.

Global listener registered once — works from any page element
Custom trigger key configurable via data-hotkey attribute
Dismisses on Esc; does not interfere with browser or OS shortcuts
Renders above all page content with a backdrop overlay
Instant search across your indexed docs
Arrow keys navigate; Enter opens the selected result

COMMAND PALETTE — KEYBOARD FLOW

Cmd+K / Ctrl+KOpen command palette

Type queryEnter your question

↑ ↓Navigate suggested questions

EnterRun query / open result

EscDismiss palette

Cmd+K againClose if already open

Built to sit on your site

Loads quietly and stays out of your page's way

01

Doesn't block your page

The script tag loads with async, so your page renders first. The widget's styles live in a shadow root, so your CSS and its CSS don't clash.

02

Scoped by client keys

A public key (kl_pk_…) works for one knowledge base only, and you can lock it to your own sites.

03

Sources under every answer

Answers drawn from your content list their numbered sources, and each one links straight to the page.

04

No cookies of its own

A random reader id is kept in localStorage, not a cookie, and you can switch it off.

Got questions?

Frequently Asked Questions

Common questions about Kelu Docs AI and embed options

AI assistant for your docs & site,in any mode you need