For docs sites built with React

Add Ask AI to your React docs site

Q: Does it support TypeScript?

Yes. Types ship with biel-react. BielButton and BielSearchButton have typed props, including the full set of customization options.

Add an Ask AI assistant to a documentation site built with React by dropping <BielButton> or <BielSearchButton> into any layout. Readers get source-cited answers from your indexed content, in their language.

Add Biel to React See the install code

14-day free trialNo credit card required

Biel.ai assistant

Assistant

Hi! How can I help you?

What is Biel?

Assistant

How to try Biel?

Assistant

Start your 14-day trial Request a demo

Assistant is typing…Assistant is typing…

Used by documentation and developer-experience teams

Install

Three ways to ship Biel in React

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 biel-react; MCP is configured separately in the AI client.

Full installation guide

Drop in <BielButton>

Install biel-react, import the component, and place it once in your top-level layout. The web component loader (defineCustomElements) registers the underlying tag on mount, and the floating Ask AI button appears.

→Floating Ask AI button on every page
→Pure client-side React, no SSR-specific config
→Works on CRA, Vite, RSPack, any modern React build
→TypeScript types ship with the package

src/App.tsx

// 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 App() {
  useEffect(() => { defineCustomElements() }, [])

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

Drop in <BielSearchButton>

Same package, different element. Place <BielSearchButton> wherever you want a search field, usually the top navbar. It returns matching pages and offers an Ask AI handoff to the assistant.

→Drop-in search field in any layout
→Page results with an Ask AI handoff
→Same package as the assistant
→Pairs with an existing search if you want both

src/components/Navbar.tsx

// 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 Navbar() {
  useEffect(() => { defineCustomElements() }, [])

  return (
    <header>
      {/* ...your nav... */}
      <BielSearchButton
        project="<YOUR_PROJECT_ID>"
        headerTitle="Documentation AI"
        buttonStyle="rounded"
      >
        Search
      </BielSearchButton>
    </header>
  )
}

Make your app docs queryable by AI agents

Hosted MCP is available from $150/month. Enable it for your Biel project to give compatible AI tools access to the same indexed documentation. Codex, Claude Code, Cursor, 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 assistant
→Works with Codex, Claude Code, and Cursor
→Private projects require a project-scoped API key

mcp.json

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

Before you install

Will it work with our React setup?

Yes. CRA, Vite, RSPack, Parcel, and custom Webpack setups all work. The package is plain React with TypeScript types, with no peer dependencies on a router or framework.

Does it support TypeScript?

Yes. Types ship with biel-react. BielButton and BielSearchButton have typed props, including the full set of customization options.

Can we customize colors and styling?

Yes. Use component props or CSS custom properties to change colors, position, and styling.

How does the widget affect loading?

The React package wraps the web component. Measure loading and bundle size in your application before rollout. See the React setup.

What content does the widget use?

Biel uses sources you connect in the dashboard, such as published docs, repositories, Confluence, or uploaded files. The React component displays the widget and does not index your application.

How long does the install take?

Install the package, add one component, and register it in an effect. Indexing time depends on the size of the site.

Make your React app answer questions

Try Biel with your docs Book a demo

14-day free trial · No credit card required

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