Skip to main content

Ask AI chatbot widget for Astro

Add an AI chatbot or AI search widget to your Astro site using the astro-biel integration.

Building with Starlight?

Use the dedicated Starlight plugin instead.

Prerequisites​

Add the chatbot widget​

The astro-biel integration adds a floating chat button to every page. It works with any template or UI framework and survives client-side navigation with Astro's ClientRouter.

Chatbot widget for docs

  1. Install the integration:

    npm install astro-biel

  2. Add it to your astro.config.mjs:

    import { defineConfig } from 'astro/config'
    import biel from 'astro-biel'

    export default defineConfig({
      integrations: [
        biel({
          project: '<YOUR_PROJECT_ID>',
          headerTitle: 'Biel.ai chatbot',
        }),
      ],
    })

    Replace <YOUR_PROJECT_ID> with your project's ID from the Biel.ai dashboard.

  3. Run npm run dev and verify the chat button appears in the bottom-right corner.

Customization​

Pass layout options to the integration as camelCase properties:

biel({
  project: '<YOUR_PROJECT_ID>',
  bielButtonText: 'Ask AI',
  buttonPosition: 'bottom-right',
  modalPosition: 'bottom-right',
  buttonStyle: 'dark',
  headerTitle: 'Documentation AI',
})

Set enable: false to turn the widget off without removing the configuration.

Add the search widget​

The search widget renders an AI search input you can place anywhere in your layout. The astro-biel integration already loads the required assets.

Biel search

Add the element to your layout's header (or any component):

<biel-search-button project="<YOUR_PROJECT_ID>" button-style="rounded" header-title="Documentation AI">
  Search
</biel-search-button>

Replace <YOUR_PROJECT_ID> with your project's ID from the Biel.ai dashboard.

Alternative: layout tags​

If you prefer not to use the integration, add the tags to your layout manually.

  1. Locate the src/layouts/Layout.astro file (or any layout file that wraps your pages) and insert the following code within the head section:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.esm.js"></script>

  2. Just before the closing body tag of your layout file, add the following snippet:

    <biel-button project="<YOUR_PROJECT_ID>"
        header-title="Biel.ai chatbot"
        button-position="bottom-right"
        modal-position="bottom-right"
        button-style="dark">
            Ask AI
    </biel-button>

    Replace <YOUR_PROJECT_ID> with your project's ID from the Biel.ai dashboard.

  3. Open the website in a web browser to verify the chatbot appears and works correctly.

Next steps​