Skip to main content

Ask AI chatbot widget for Mintlify

Add an AI chatbot or AI search widget to your Mintlify documentation using Biel.ai's web components.

Prerequisites​

  • A Biel.ai account. If you don't have one, sign up for free.
  • A project created in your Biel.ai dashboard. Follow the Quickstart guide to create one.
  • A Mintlify documentation site ready to install Biel.ai.

Add the chatbot widget​

Chatbot widget for docs

  1. Add the Biel.ai scripts and button injection to your mint.json configuration file:

    {
      "name": "Your Docs",
      "head": [
        {
          "tag": "link",
          "attributes": {
            "rel": "stylesheet",
            "href": "https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.css"
          }
        },
        {
          "tag": "script",
          "attributes": {
            "type": "module",
            "src": "https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.esm.js"
          }
        }
      ],
      "scripts": [
        {
          "content": "window.addEventListener('DOMContentLoaded', function() { var button = document.createElement('biel-button'); button.setAttribute('project', '<YOUR_PROJECT_ID>'); button.setAttribute('header-title', 'Biel.ai chatbot'); 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.

  2. Save the file and run your Mintlify development server:

    mintlify dev

  3. Open your documentation site in a web browser to verify the chatbot appears and works correctly.

Alternative: Using MDX components​

If you prefer more control over where the chatbot appears, you can create a custom MDX component:

  1. Create a new file components/BielChat.mdx in your Mintlify project:

    <biel-button project="<YOUR_PROJECT_ID>"
        header-title="Biel.ai chatbot"
        button-position="bottom-right"
        modal-position="bottom-right"
        button-style="dark">
            Ask AI
    </biel-button>

  2. Import and use this component in any MDX page where you want the chatbot to appear.

Next steps​