For Next.js applications

Add Ask AI to your Next.js app

Q: Will it break SSR?

No, but you have to import it dynamically with ssr: false. The widget is a web component that the browser registers at runtime; rendering it on the server would throw. The wrapper pattern handles this cleanly.

Add an Ask AI chatbot to your Next.js app. Works with App Router and Pages Router. 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 Next.js

Wrap the chatbot in a client component, swap in an AI search field, or expose your content via MCP for AI agents. Same SSR-safe pattern across all three.

Full installation guide

SSR-safe wrapper component

The Biel widget is a web component, which the browser registers at runtime, so it has to render client-side only. Wrap it with next/dynamic and ssr: false. Works on App Router and Pages Router alike.

→Floating Ask AI button on every page
→App Router and Pages Router both supported
→SSR-safe via next/dynamic with ssr: false
→Add 'use client' for App Router boundary

components/biel-button.tsx

'use client'

// 1. npm install biel-react

import { useEffect } from 'react'
import { BielButton } from 'biel-react'
import { defineCustomElements } from 'biel-search/loader'
import 'biel-search/dist/biel-search/biel-search.css'

export default function ChatButton() {
  useEffect(() => { defineCustomElements() }, [])

  return (
    <BielButton
      project="<YOUR_PROJECT_ID>"
      headerTitle="Documentation AI"
      buttonPosition="bottom-right"
      buttonStyle="dark"
    >
      Ask AI
    </BielButton>
  )
}

// 2. In app/layout.tsx, render it dynamically:
//    import dynamic from 'next/dynamic'
//    const ChatButton = dynamic(
//      () => import('@/components/biel-button'),
//      { ssr: false }
//    )

Drop a search button into the navbar

Same SSR pattern, different element. Wrap <BielSearchButton> in a client component, render it inside your layout’s navbar. Returns a synthesized answer instead of a list.

→Drop-in AI search field in the navbar
→Same dynamic-import pattern as the chatbot
→Returns synthesized answer, not a list
→Works with any Next.js styling system

components/biel-search.tsx

'use client'

// 1. npm install biel-react

import { useEffect } from 'react'
import { BielSearchButton } from 'biel-react'
import { defineCustomElements } from 'biel-search/loader'
import 'biel-search/dist/biel-search/biel-search.css'

export default function SearchButton() {
  useEffect(() => { defineCustomElements() }, [])

  return (
    <BielSearchButton
      project="<YOUR_PROJECT_ID>"
      headerTitle="Documentation AI"
      buttonStyle="rounded"
    >
      Search
    </BielSearchButton>
  )
}

// 2. In your navbar component, render it dynamically:
//    import dynamic from 'next/dynamic'
//    const SearchButton = dynamic(
//      () => import('@/components/biel-search'),
//      { ssr: false }
//    )

Make your 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

App Router or Pages Router?

Both work. The widget needs to be a client component, which on App Router means a 'use client' directive at the top of the wrapper. On Pages Router, plain client-side components work as usual.

Will it break SSR?

No, but you have to import it dynamically with ssr: false. The widget is a web component that the browser registers at runtime; rendering it on the server would throw. The wrapper pattern handles this cleanly.

Does it work with React Server Components?

Yes. The wrapper is a Client Component, and you import that into your Server Components like any other client boundary. RSC streams the rest of the page; the widget hydrates on the client.

Will it work on Vercel and other Next.js hosts?

Yes. The widget loads from a CDN at runtime; nothing about the deploy target affects it. Vercel, Netlify, AWS Amplify, and custom Node servers are all supported.

Can we customize colors and styling?

Yes. Pass props for color, position, and style, or use CSS custom properties (--biel-primary-color and friends) to override at the theme level. Tailwind, CSS Modules, and styled-components all work.

How long does the install take?

npm install, one wrapper component, one dynamic import. 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 Next.js 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, Gatsby, Vue, Docusaurus, and MkDocs.