Skip to main content

Ask AI assistant widget for NPM projects

Add an AI assistant or AI search widget to your JavaScript project using Biel.ai's NPM package. You can also connect AI agents through MCP, with or without installing the widget.

Prerequisites​

Add the assistant widget​

Assistant widget for docs

  1. Install Biel.ai:

    npm install biel-search

  2. Import the styles and scripts in your JavaScript entry file:

    import 'biel-search/dist/biel-search/biel-search.css';
    import bielPackage from 'biel-search/package.json';

    if (!document.querySelector('script[data-biel]')) {
      const script = document.createElement('script');
      script.type = 'module';
      script.src = `https://cdn.jsdelivr.net/npm/biel-search@${bielPackage.version}/dist/biel-search/biel-search.esm.js`;
      script.dataset.biel = '';
      document.head.appendChild(script);
    }

  3. Just before the closing body tag of your website's HTML, add 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.

  4. Open your site and send a test question.

Select a widget version​

npm install biel-search selects the latest published release for a new installation. Your dependency range and lockfile control later installations. npm ci uses the locked version.

To select a specific release:

npm install --save-exact [email protected]

Replace 0.1.93 with a published biel-search version on npm, then rebuild your application. This setting controls the installed package. See CDN version selection if your page loads scripts from jsDelivr instead.

Add the search widget​

  1. Install the package:

    npm install biel-search

  2. Import the stylesheet and load the widget in your JavaScript entry file:

    import 'biel-search/dist/biel-search/biel-search.css';
    import bielPackage from 'biel-search/package.json';

    if (!document.querySelector('script[data-biel]')) {
      const script = document.createElement('script');
      script.type = 'module';
      script.src = `https://cdn.jsdelivr.net/npm/biel-search@${bielPackage.version}/dist/biel-search/biel-search.esm.js`;
      script.dataset.biel = '';
      document.head.appendChild(script);
    }

  3. Add this element where the search button should appear:

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

    Replace <YOUR_PROJECT_ID> with your project ID.

  4. Build and open your site. Open Search, enter a documentation term, and open a result.

Connect AI agents with MCP​

Let AI tools search and read your indexed documentation. MCP is available during your trial and on Professional or higher plans.

  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​