Skip to main content

Ask AI assistant widget for Vue.js

Add an AI assistant or AI search widget to your Vue.js application using Biel.ai's Vue components. The integration works with both Vue 2 and Vue 3, and is compatible with Vue CLI, Vite, and other common Vue setups.

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 Vue.js application ready to install Biel.ai.
  • Node.js installed.

Add the assistant widget​

Assistant widget for docs

  1. Install Biel.ai:

    npm install biel-search

  2. Open your main Vue component or the desired Vue component where you want the assistant to appear. Then, incorporate the Biel.ai styles and scripts:

    <script>
    import 'biel-search/dist/biel-search/biel-search.css';
    import 'biel-search/dist/biel-search/biel-search.esm.js';
    </script>

  3. In the template section of your Vue component, add the following snippet:

    <template>
        <!-- Rest of your component's template -->

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

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

  4. Run npm run serve and verify the assistant appears on your site.

Next steps​