Skip to main content

Ask AI assistant widget for Webflow

Add an AI assistant or AI search widget to your Webflow 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 Webflow site with a paid site plan (required for custom code features).

Add the assistant widget​

Assistant widget for docs

  1. Log in to your Webflow dashboard and open the site you want to edit.

  2. Navigate to your site settings:

    • Click the Settings icon (gear icon) in the left sidebar.
    • Select Custom Code from the menu.

  3. Add the Biel.ai styles and scripts in the Head Code section:

    • In the Head Code field, paste the following:

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

  4. Add the assistant widget in the Footer Code section:

    • Scroll down to the Footer Code field.

    • Paste the following snippet:

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

  5. Click Save Changes at the top right.

  6. Publish your site:

    • Click the Publish button in the top right corner of the Webflow Designer.
    • Select the domain(s) you want to publish to.
    • Click Publish to selected domains.

  7. Open your published site and send a test question.

Add the search widget​

  1. Open your site’s Settings > Custom Code and add these assets in Head Code:

    <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. In the Designer, add an Embed element where the search button should appear, such as in your navbar. Paste:

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

    Replace <YOUR_PROJECT_ID> with your project ID.

  3. Save and publish the site. 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​