For docs sites built with Next.js

Add Ask AI to your Next.js docs site

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

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, add a page-search field that hands queries to Ask AI, 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. It returns matching pages and offers an Ask AI handoff to the chatbot.

→Drop-in search field in the navbar
→Same dynamic-import pattern as the chatbot
→Page results with an Ask AI handoff
→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?

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

Start free trial Book 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.