For the complete documentation index, see llms.txt
Skip to main content

Ask AI chatbot widget for VuePress

Add an AI chatbot or AI search widget to your VuePress 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 VuePress site ready to install Biel.ai.
  • Node.js installed.

Add the chatbot widget​

Chatbot widget for docs

For VuePress 2.x​

  1. Open your VuePress config file (.vuepress/config.js or .vuepress/config.ts).

  2. Add the Biel.ai scripts to the head configuration:

    import { defineUserConfig } from 'vuepress'

    export default defineUserConfig({
      // ... your other config
      head: [
        [
          'link',
          { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.css' }
        ],
        [
          'script',
          { type: 'module', src: 'https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.esm.js' }
        ],
        [
          'script',
          {},
          `
          if (typeof window !== 'undefined') {
            window.addEventListener('DOMContentLoaded', () => {
              const 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.

  3. Start your VuePress development server:

    npm run docs:dev

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

For VuePress 1.x​

  1. Open your VuePress config file (.vuepress/config.js).

  2. Add the following to your config:

    module.exports = {
      // ... your other config
      head: [
        [
          'link',
          { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.css' }
        ],
        [
          'script',
          { type: 'module', src: 'https://cdn.jsdelivr.net/npm/biel-search/dist/biel-search/biel-search.esm.js' }
        ],
        [
          'script',
          {},
          `
          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.

  3. Start your VuePress development server:

    npm run docs:dev

Next steps​