Starlight adds every entry in its head option to every page. You add the widget there.

​
Before you start

  • Your website widget. Kelu makes one for you when you create a knowledge base. Find it under Integrations → Website widget. You need the widget id and public key from the code on its Install tab.
  • Your site’s address on the widget’s Sites it works on list (Install tab).

​
Add the widget

The widget’s Install tab shows these same steps with your code already filled in.
1

Open astro.config.mjs

It is at the root of your project. The starlight() integration is set up there.
2

Add the widget to head

Add head inside starlight({ ... }). If head already exists, add the entry to it.
astro.config.mjs
starlight({
  title: "My docs",
  head: [
    {
      tag: "script",
      attrs: {
        src: "https://widget.kelu.dev/kelu-widget.js",
        async: true,
        "data-widget-id": "YOUR_WIDGET_ID",
        "data-client-key": "kl_pk_...",
      },
    },
  ],
}),
Replace YOUR_WIDGET_ID and kl_pk_... with the values from your widget’s Install tab.
3

Check locally, then deploy

Run npm run dev to see it locally, then build and deploy your site as usual.

​
Check it works

Open any page. A round icon button appears in the bottom-right corner, with the tooltip Ask AI. Ask a question and check that the answer lists its Sources. Nothing there? See Troubleshooting.
Starlight’s search also opens with Cmd+K. Turn off Open with Cmd/Ctrl+K on the widget’s Search & opening tab so only one opens. To follow Starlight’s dark mode, choose Follow my site on the Look tab and set Dark-mode selector to html[data-theme="dark"].