Basic installation

Add a Biel.ai AI assistant or AI search widget to any HTML site. This method uses CDN-hosted components: no build tools or package managers required. You can also connect AI agents through MCP, with or without installing the widget.

Prerequisites

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

Add the assistant widget

The <biel-button> component adds a floating chat button to your site.

1. Add the following inside the head section of your 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 following just before the closing body tag:

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

3. Open the page in a browser to verify the assistant appears in the bottom-right corner.

Add the search widget

The <biel-search-button> component adds an AI-powered search bar instead of (or alongside) the assistant.

1. Add the following inside the head section of your 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 following where you want the search button to appear:

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

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

3. Open the page in a browser to verify the search widget works.

Select a widget version

The links above omit a version, which is equivalent to biel-search@latest. The browser loads the latest published npm release from jsDelivr. It can change without rebuilding your site, although CDN caching means a new release may not appear immediately.

To use a specific release, include the same version in both asset URLs:

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

Replace 0.1.93 with a published biel-search version on npm. Remove the version, or use @latest, to follow new releases again.

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.