Add an AI Chatbot to your documentation with Biel.ai

Set up Biel.ai on Docusaurus to let users ask questions in natural language

Users can’t find what they need in your docs. They ask “Where are the docs for XYZ?” when it’s right there on page 12.

An AI chatbot lets them ask in plain language and get instant answers from your existing documentation.

Here’s how to add Biel.ai to your documentation. Here’s how to add Biel.ai to your documentation. This guide uses Docusaurus, but Biel.ai works with any static site generator.

Disclaimer: I built Biel.ai. It’s a paid service with a free trial.

Prerequisites

• Docusaurus site (existing or new)

• Node.js v18 or higher

• A sitemap for your docs site

  Step 1: Create a Biel.ai account

  First, you need to sign up for Biel.ai to access the chatbot integration.

  1. Go to app.biel.ai and click Sign up.

  2. Follow the on-screen instructions to create your account:

  

  Once your account is set up, you’re ready to create your first project.

  Step 2: Create your first chatbot project

  To create a new project in Biel.ai:

  1. In your Biel.ai dashboard, click on the Projects tab at the top.

  2. Click Create project.

  3. Follow the setup wizard and enter your project details, such as:

  • Project name: Choose a unique name.

  • Sources: Select Sitemap and enter the sitemap URL of your Docusaurus site (e.g., docs.domain.com/sitemap.xml).

  

  4. Click Save to create your project.

  
  Now that your project is set up, you’ll receive a unique Project ID — keep this handy, as you’ll need it later.

  Step 3: Install the AI chatbot in your Docusaurus site

  Now that you’ve created your project, it’s time to integrate the chatbot into your Docusaurus site.

  1. Run the following command in your terminal to install Biel.ai’s Docusaurus package:

  npm install docusaurus-biel

  2. Add Biel.ai to your docusaurus.config.js file:

  plugins: [
      [
          ‘docusaurus-biel’,{
              project: ‘<PROJECT_ID>’,
              version: ‘latest’
          }
      ]
  ],

  Replace <PROJECT_ID> with the Project ID you received earlier.

  3. Run your site locally to ensure everything is working properly:

  npm start

  The chatbot appears as a floating widget. Users can ask questions and get answers from your docs:

  

  Step 4 - Customize your chatbot (optional)

  You can tweak the chatbot’s appearance and behavior in the docusaurus.config.js file. For example, you can change the button text or adjust the chatbot’s position:

  plugins: [
      [
          ‘docusaurus-biel’,{
              enable: true,
              project: ‘<PROJECT_ID>’,
              bielButtonText: ‘ASK AI’,
              buttonPosition: ‘center-right’,
              modalPosition: ‘sidebar-right’,
              headerTitle: ‘Biel.ai chatbot’
              buttonStyle: ‘dark’,
          }
      ]
  ],

  For advanced customization options, such as adding an initial message, suggested questions, or further editing the style, refer to Customization.

  What the chatbot conversations tells you

  The chatbot tracks what users ask. This reveals content gaps in your documentation.

  If 50 people ask about webhook authentication but you don’t have a guide, that’s a signal to write one. The questions show what’s missing or unclear.

  AI only works as well as your documentation. Well-structured, comprehensive docs lead to better answers. Messy docs with gaps lead to poor responses.
  

  Need help optimizing your docs for better AI responses? We offer documentation optimization for AI bots - auditing content structure, improving prompts, and setting up RAG workflows.