For React applications

Add Ask AI to your React app

Q: Does it support TypeScript?

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

Q: Does it bloat our bundle?

The widget is loaded as a web component. biel-react contributes a thin wrapper; the heavy lifting is in biel-search, which is lazy-loaded on first use.

Add an Ask AI chatbot to your React app by dropping <BielButton> or <BielSearchButton> into any layout. 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 React

Drop in the chatbot button, swap in an AI search field, or expose your content via MCP for AI agents. Same package, three components.

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. Returns a synthesized answer instead of a list.

→Drop-in AI search field in any layout
→Returns synthesized answer, not a list
→Same package as the chatbot
→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

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 our React setup?

Yes. CRA, Vite, RSPack, Parcel, and custom Webpack setups all work. The package is plain React with TypeScript types — 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. Pass props for color, position, and style, or use CSS custom properties (--biel-primary-color and friends) to override at the theme level.

Does it bloat our bundle?

The widget is loaded as a web component. biel-react contributes a thin wrapper; the heavy lifting is in biel-search, which is lazy-loaded on first use.

Where does Biel index from?

Configure your data sources in the Biel.ai dashboard. URL crawl, GitHub repo, Confluence, file upload — same indexing layer regardless of which framework hosts the widget.

How long does the install take?

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