Ask AI assistant widget for Hugo

Add an AI assistant or AI search widget to your Hugo site using Biel.ai's web components. You can also connect AI agents through MCP, with or without installing the widget.

Prerequisites

• A Biel.ai account.
• A project with indexed content.
• A Hugo application.

Add the assistant widget

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.

Add the search widget

1. Append these assets to your theme’s head partial, usually layouts/partials/head.html:

   <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. Add the search button to your header partial where it should appear:

   <biel-search-button project="<YOUR_PROJECT_ID>" button-style="rounded">
       Search
   </biel-search-button>

   Replace <YOUR_PROJECT_ID> with your project ID.

3. Run hugo server. Open Search, enter a term from your documentation, and open a result.

Connect AI agents with MCP

Let AI tools search and read your indexed documentation. MCP is available on every plan and during your trial.

1. In the Biel.ai dashboard, open your project’s Settings > MCP.
2. Select Enable MCP server and click Save.
3. In the widget, open Connect via MCP using the <> button. Select your AI client or choose MCP URL to copy the endpoint into its settings.

Without the widget: after enabling MCP, copy MCP endpoint from Settings > MCP and add it to your AI client. No widget installation or website changes are required.

The widget also exposes WebMCP tools to compatible browser agents visiting your site. Use the latest widget release and keep Enable WebMCP selected in Settings > MCP.

Next steps

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