For Vue.js applications

Add Ask AI to your Vue app

Q: 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.

Add an Ask AI chatbot to your Vue app by dropping <biel-button> into any template. Readers get source-cited answers from your indexed content, in their language.

Start free trial See the install code

14-day freeSelf-serveLive in 15 min

Biel.ai chatbot

Assistant

Hi! how can I help you?

Three ways to ship Biel in Vue

Drop in the chatbot button, swap in an AI search field, or expose your content via MCP for AI agents. Same web-component pattern across all three.

Full installation guide

Drop in `<biel-button>` as a web component

Vue treats unknown HTML tags as web components by default, so the Biel widget renders directly inside any <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>

Drop a search button into the navbar

Same package, swap the tag. Place <biel-search-button> inside your header component for an AI search field. Returns a synthesized answer instead of a list.

→Drop-in AI search field in the navbar
→Returns synthesized answer, not a list
→Same web-component install pattern
→Works alongside any existing Vue search component

src/components/Navbar.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: 'Navbar' }
</script>

<template>
  <header>
    <!-- ...your nav... -->
    <biel-search-button
      project="<YOUR_PROJECT_ID>"
      header-title="Documentation AI"
      button-style="rounded">
      Search
    </biel-search-button>
  </header>
</template>

Make your Vue app docs queryable by AI agents

Every Biel project ships with a hosted MCP endpoint. Claude, Cursor, Cline, and other MCP-compatible assistants can query your indexed content directly. Configure once in mcp.json.

→Hosted MCP server, no self-hosting
→Same index as the chatbot
→Works with Claude Desktop, Cursor, Cline, Zed
→Auth via project token, scoped per-workspace

mcp.json

{
  "mcpServers": {
    "biel-ai": {
      "name": "Biel.ai",
      "type": "http",
      "url": "https://mcp.biel.ai/v2/YOUR_PROJECT_SLUG/mcp"
    }
  }
}

Things teams ask during evaluation

Will it work with Vue 2 and Vue 3?

Yes. Both supported. The widget is a web component, so it renders inside any Vue template without a Vue-specific wrapper. Vue CLI, Vite, and Nuxt all work the same way.

Does Vue complain about unknown elements?

Vue 3 treats hyphenated tags as web components by default. Vue 2 may need a small compilerOptions.isCustomElement tweak. The install guide has the one-line config.

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. Pass attributes for color, position, and style, or use CSS custom properties (--biel-primary-color and friends) to override at the theme level.

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?

npm install, two import lines, one tag. Most teams are live in 15 minutes including indexing.

Where does our content go?

EU-hosted by default. GDPR compliant. Your content is never used to train models.

Make your Vue app answer questions

Start free trial Book a demo

14-day free trial · No credit card required · From $50/mo

Use a different platform? See our integration pages for React, Next.js, Gatsby, Docusaurus, and MkDocs.