VitePress adds every head entry in its site config 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. Its Install tab shows these steps with your widget id and key already in the code.
  • Your site on the widget’s Sites it works on list (Install tab).

​
Add the widget

1

Open the site config

It is .vitepress/config.ts, or config.mts / config.js.
2

Add a script entry to head

Add this inside defineConfig({ ... }). If head already exists, add the entry to it.
.vitepress/config.ts
head: [
  [
    "script",
    {
      async: "",
      src: "https://widget.kelu.dev/kelu-widget.js",
      "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 snippet. async: "" writes the async attribute with no value.
3

Check locally, then deploy

Run npm run docs: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.
If your site search opens with Cmd+K, turn off Open with Cmd/Ctrl+K on the widget’s Search & opening tab so only one opens. To follow VitePress’s dark mode, set Dark-mode selector to html.dark on the Look tab (choose Follow my site).