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

Ask AI chatbot widget for VitePress

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

Add the chatbot widget​

Chatbot widget for docs

  1. Create a custom theme directory if you don't already have one:

    mkdir -p .vitepress/theme

  2. Create a file .vitepress/theme/index.js (or .ts if using TypeScript) with the following content:

    import { h, onMounted } from 'vue'
    import DefaultTheme from 'vitepress/theme'
    import './custom.css'

    export default {
      extends: DefaultTheme,
      Layout() {
        return h(DefaultTheme.Layout, null, {
          'layout-bottom': () => h(BielWidget)
        })
      }
    }

    const BielWidget = {
      setup() {
        onMounted(() => {
          // Load CSS
          const 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)

          // Load JS module
          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)

          // Add chatbot button
          script.onload = () => {
            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)
          }
        })
        return () => null
      }
    }

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

  3. Create an empty CSS file .vitepress/theme/custom.css (you can add custom styles here later if needed):

    /* Add your custom styles here */

  4. Start your VitePress development server:

    npm run docs:dev

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

Alternative: Using head configuration​

If you prefer not to create a custom theme, you can add the widget using VitePress's head configuration.

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

  2. Add the following to your config:

    import { defineConfig } from 'vitepress'

    export default defineConfig({
      // ... 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', () => {
            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. Restart your development server to see the changes.

Next steps​