You spent hours writing and maintaing the docs, only for users to ask the same question: "Where are the docs for XYZ?" It’s frustrating when all your hard work gets buried under piles of information, making it harder for users to find what they need.

This is where AI can really step in. By integrating Biel.ai into your Docusaurus documentation, you can offer a smart, interactive chatbot that lets users ask questions in plain language and get instant, relevant answers.

In this guide, we'll walk you through the process of setting up an AI chatbot on your Docusaurus site using Biel.ai, though it can be integrated into any documentation system.

Prerequisites

To integrate Biel.ai into your Docusaurus site, you’ll need:

• An existing or new Docusaurus site.
• Node.js v18 or higher.

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 should appear on your site as a floating widget, and you can start interacting with it:

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.

Putting it all together

Congratulations! Your Docusaurus site is now equipped with a custom AI chatbot powered by Biel.ai. With this integration, users can ask questions in natural language and receive instant, context-rich answers directly within your documentation.

Beyond that, AI chatbots offer a unique advantage: they help you understand exactly what users need from your docs. As users interact with the chatbot, they’re essentially telling you what information is missing or unclear — and you can analyze these conversations to find and fill content gaps.

Remember, the AI’s effectiveness depends on the quality of your content. Well-structured and comprehensive documentation leads to better AI responses! :)