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

• A Biel.ai account.
• A project with indexed content.
• An Astro site.
• Node.js installed.

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.

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.

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

• Customize the widget's appearance, behavior, and tone.
• Connect integrations like GitHub Actions, MCP, or Zapier.