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. You can also connect AI agents through MCP, with or without installing the widget.

Prerequisites​

Add the assistant widget​

Assistant widget for docs

  1. Install Biel.ai:

    npm install biel-search

  2. Import the styles and scripts in the Vue component that will contain the assistant:

    <script>
    import 'biel-search/dist/biel-search/biel-search.css';
    import bielPackage from 'biel-search/package.json';

    if (!document.querySelector('script[data-biel]')) {
      const script = document.createElement('script');
      script.type = 'module';
      script.src = `https://cdn.jsdelivr.net/npm/biel-search@${bielPackage.version}/dist/biel-search/biel-search.esm.js`;
      script.dataset.biel = '';
      document.head.appendChild(script);
    }
    </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.

Add the search widget​

  1. Install biel-search:

    npm install biel-search

  2. In Vue 3, create src/components/BielSearch.vue:

    <script>
    import { h, onMounted } from 'vue';
    import bielPackage from 'biel-search/package.json';
    import 'biel-search/dist/biel-search/biel-search.css';

    export default {
      setup() {
        onMounted(() => {

          if (!document.querySelector('script[data-biel]')) {
            const script = document.createElement('script');
            script.type = 'module';
            script.src = `https://cdn.jsdelivr.net/npm/biel-search@${bielPackage.version}/dist/biel-search/biel-search.esm.js`;
            script.dataset.biel = '';
            document.head.appendChild(script);
          }
        });
        return () => h('biel-search-button', {
          project: '<YOUR_PROJECT_ID>',
          'button-style': 'rounded',
        }, 'Search');
      },
    };
    </script>

    For Vue 2, load the assets below in public/index.html and use this component instead:

    <script>
    export default {
      render(h) {
        return h('biel-search-button', {
          attrs: { project: '<YOUR_PROJECT_ID>', 'button-style': 'rounded' },
        }, ['Search']);
      },
    };
    </script>
    <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>

  3. Replace <YOUR_PROJECT_ID> with your project ID. Import BielSearch into your header component and render <BielSearch /> where the search button should appear.

  4. Start your app using its existing development command. Open Search, enter a documentation term, and open a result.

Connect AI agents with MCP​

Let AI tools search and read your indexed documentation. MCP is available on every plan and during your trial.

  1. In the Biel.ai dashboard, open your project’s Settings > MCP.
  2. Select Enable MCP server and click Save.
  3. In the widget, open Connect via MCP using the <> button. Select your AI client or choose MCP URL to copy the endpoint into its settings.

Without the widget: after enabling MCP, copy MCP endpoint from Settings > MCP and add it to your AI client. No widget installation or website changes are required.

The widget also exposes WebMCP tools to compatible browser agents visiting your site. Use the latest widget release and keep Enable WebMCP selected in Settings > MCP.

Next steps​