Biel.ai
Book a demo
For docs sites built with Vue

Add Ask AI to your Vue docs site

Add an Ask AI assistant to a documentation site built with Vue by dropping <biel-button> into any template. Readers get source-cited answers from your indexed content, in their language.

Add Biel to VueSee the install code
14-day free trialNo credit card required
Biel.ai assistant
Powered by biel.ai
Assistant
Hi! How can I help you?
What is Biel?
Assistant
Biel.ai turns your product docs into an AI assistant. Add an assistant to your website, give AI agents context from your docs, or build custom experiences with our API.
How to try Biel?
Assistant
Sign up and try Biel free for 14 days. Set it up yourself, connect your docs, and add the assistant to your site. Or request a demo and we’ll walk you through it.

Used by documentation and developer-experience teams

ScyllaDB
Katalon
Tezos
Talon.one
GrepTime
CrazyGames
SecuroSys
ScyllaDB
Katalon
Tezos
Talon.one
GrepTime
CrazyGames
SecuroSys
Install

Three ways to ship Biel in Vue

Drop in the assistant button, add a page-search field that hands queries to Ask AI, or expose your content via MCP for AI agents. The website widgets use web components; MCP is configured in the AI client.
Full installation guide

Drop in <biel-button> as a web component

Register Biel as a custom element in your Vue configuration, then place the widget inside a <template> block. Install biel-search, import the assets, and write the tag.
  • →Floating Ask AI button on every page
  • →Vue 2 and Vue 3 both supported
  • →Vue CLI, Vite, Nuxt: all work
  • →No additional Vue plugin or wrapper required
src/App.vue
<script>
// 1. npm install biel-search
import 'biel-search/dist/biel-search/biel-search.css';
import 'biel-search/dist/biel-search/biel-search.esm.js';

export default { name: 'App' }
</script>

<template>
  <div id="app">
    <!-- ...your app... -->

    <biel-button
      project="<YOUR_PROJECT_ID>"
      header-title="Documentation AI"
      button-position="bottom-right"
      button-style="dark">
      Ask AI
    </biel-button>
  </div>
</template>

Before you install

Will it work with Vue 2 and Vue 3?

Yes. The widget is a web component that works with Vue 2 and Vue 3. Follow the version-specific install guide. Nuxt needs client-only setup.

Does Vue complain about unknown elements?

In Vue 3, configure compilerOptions.isCustomElement for Biel tags in your build setup. Vue 2 uses Vue.config.ignoredElements. Follow the install guide for your version and build tool.

Does it work with Nuxt?

Yes. Nuxt 3 needs a plugins/biel.client.ts file (client-only, since the web component does not render server-side). Nuxt 2 works with the same Vue 2 setup.

Can we customize colors and styling?

Yes. Use widget attributes or CSS custom properties to change colors, position, and styling.

Will it work with VuePress and VitePress?

Yes. Those have their own dedicated install guides. The Vue install on this page is for general-purpose Vue applications, not docs sites built on VuePress / VitePress.

How long does the install take?

Install the package, add the imports, and place the component in your template. Indexing time depends on the size of the site.

Make your Vue app answer questions

Try Biel with your docsBook a demo
14-day free trial · No credit card required
Use a different platform? See our integration pages for React, Next.js, Gatsby, Docusaurus, and MkDocs.
Try me ↓