Ask AI assistant widget for Hugo

Add an AI assistant or AI search widget to your Hugo site using Biel.ai's web components.

Prerequisites

• A Biel.ai account. If you don't have one, sign up for free.
• A project created in your Biel.ai dashboard. Follow the Quickstart guide to create one.
• A Hugo application ready to install Biel.ai.

Add the assistant widget

To integrate the Biel.AI chat widget into your Hugo site:

1. Navigate to your theme directory (e.g., themes/your-theme/).

2. Find the head partial, which is often located under layouts/partials/. Add the following code to this file:

   <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>

3. Find the footer partial (or wherever you'd like the assistant to be placed) and add the following code just before the closing tags:

   <biel-button project="<YOUR_PROJECT_ID>"
       header-title="Biel.ai assistant"
       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.

4. Run hugo server and verify the assistant appears and functions correctly on your site.

Next steps

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