Skip to main content

Ask AI assistant widget for ReadMe

Add an AI assistant or AI search widget to your ReadMe documentation 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 ReadMe project with a paid plan that allows custom JavaScript.
  • Admin access to your ReadMe project.

Add the assistant widget​

Assistant widget for docs

  1. Log in to your ReadMe dashboard and navigate to your project.

  2. Access appearance settings:

    • Open Appearance in the project dashboard.
    • Select CSS, JS, HTML, then the JavaScript editor. See ReadMe's customization guide for the controls available on your plan.
    Tip

    If you don't see the Custom JavaScript & CSS option, verify that your ReadMe plan includes this feature.

  3. Add the Biel.ai initialization code in the Custom JavaScript field:

    (function() {
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.css';
      document.head.appendChild(link);

      var script = document.createElement('script');
      script.type = 'module';
      script.src = 'https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.esm.js';
      document.head.appendChild(script);

      script.onload = function() {
        var button = document.createElement('biel-button');
        button.setAttribute('project', '<YOUR_PROJECT_ID>');
        button.setAttribute('header-title', 'Biel.ai assistant');
        button.setAttribute('button-position', 'bottom-right');
        button.setAttribute('modal-position', 'bottom-right');
        button.setAttribute('button-style', 'dark');
        button.textContent = 'Ask AI';
        document.body.appendChild(button);
      };
    })();

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

  4. Click Save to apply the changes.

  5. Open your published documentation and send a test question.

Add the search widget​

Add a Search button at the top right of your documentation:

  1. Open Appearance > CSS, JS, HTML in ReadMe, then the JavaScript editor. Add the following code. If you already load the widget assets, keep a single copy of those asset lines:

    (() => {
      if (document.getElementById('biel-site-search')) return;
      const stylesheet = document.createElement('link');
      stylesheet.rel = 'stylesheet';
      stylesheet.href = 'https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.css';
      document.head.appendChild(stylesheet);

      const script = document.createElement('script');
      script.type = 'module';
      script.src = 'https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.esm.js';
      document.head.appendChild(script);

      const button = document.createElement('biel-search-button');
      button.id = 'biel-site-search';
      button.setAttribute('project', '<YOUR_PROJECT_ID>');
      button.setAttribute('button-style', 'rounded');
      button.textContent = 'Search';
      button.style.cssText = 'position:fixed;top:1rem;right:1rem;z-index:1000';
      document.body.appendChild(button);
    })();

  2. Replace <YOUR_PROJECT_ID> with your project ID. Adjust top and right if the button overlaps your navigation.

  3. Save the changes and open your published documentation. Open Search, enter a documentation term, and open a result.

Troubleshooting​

Custom JavaScript not available​

Assistant not appearing​

  • Check your browser console for any error messages
  • Ensure the script has loaded properly (look in the Network tab)
  • Verify your project ID is correct

Conflicts with ReadMe's chat widget​

  • If you're using ReadMe's built-in Intercom or other chat widgets, you may want to adjust positioning
  • Use the button-position attribute to move the Biel.ai widget (e.g., bottom-left, center-right)

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​