Biel.ai
Book a demo
For docs sites built with Next.js

Add Ask AI to your Next.js docs site

Add an Ask AI assistant to a documentation site built with Next.js. Works with App Router and Pages Router. Readers get source-cited answers from your indexed content, in their language.

Add Biel to Next.jsSee 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 Next.js

Wrap the assistant in a client component, add a page-search field that hands queries to Ask AI, or expose your content via MCP for AI agents. Load website widgets on the client; configure MCP separately in the AI tool.
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 }
//    )

Before you install

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.

How do we use it with server-side rendering?

Use a client-side wrapper loaded with ssr: false. The widget needs browser APIs, so it should not render on the server. Follow the Next.js guide.

Does it work with React Server Components?

Yes. Import a Client Component wrapper into your Server Component. The rest of the page can render on the server while the widget runs in the browser.

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

Yes. The widget runs in the browser on your published site. Follow the install guide and allow its scripts in your site security policy.

Can we customize colors and styling?

Yes. Use component props or CSS custom properties to change colors, position, and styling. This works alongside Tailwind, CSS Modules, or styled-components.

How long does the install take?

Install the package, add a wrapper component, and load it with a dynamic import. Indexing time depends on the size of the site.

Make your Next.js 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, Gatsby, Vue, Docusaurus, and MkDocs.
Try me ↓