For Gatsby sites

Add Ask AI to your Gatsby site

Q: Does it break SSR / static rendering?

No. The defineCustomElements() call runs inside useEffect, which only fires in the browser. Gatsby's static HTML output ships without trying to render the web component server-side.

Q: Where should we drop it in?

A top-level Layout component is the typical home, so the button appears on every page. If your site has a multi-page layout structure, put it in the outermost shared component.

Add an Ask AI chatbot to your Gatsby site by dropping <BielButton> into your 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 on Gatsby

Drop in the chatbot button, swap in an AI search field, or expose your content via MCP for AI agents. Same browser-safe pattern across all three.

Full installation guide

Drop in <BielButton> with a browser-only effect

Gatsby builds to static HTML, so the web component has to register on the client. Call defineCustomElements() from a useEffect in your top-level component or in gatsby-browser.js.

→Floating Ask AI button on every page
→Drops into a Gatsby Layout component
→Static-site safe: registers in browser only
→Compatible with Gatsby v4 and v5

src/components/Layout.tsx

// 1. npm install biel-react

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

const Layout = ({ children }) => {
  useEffect(() => { defineCustomElements() }, [])

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

export default Layout

Add an AI search button to the navbar

Same package, swap the component for <BielSearchButton>. Render inside your header component for a navbar-style AI search field.

→Drop-in AI search field in the navbar
→Returns synthesized answer, not a list
→Pairs with gatsby-plugin-local-search if you keep both
→Same browser-only registration pattern

src/components/Header.tsx

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

const Header = () => {
  useEffect(() => { defineCustomElements() }, [])

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

export default Header

Make your Gatsby 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 Gatsby version?

Yes. Gatsby v4 and v5 both supported. The widget is a web component loaded at runtime; nothing about the build pipeline matters except that the registration call has to run in the browser.

Does it break SSR / static rendering?

No. The defineCustomElements() call runs inside useEffect, which only fires in the browser. Gatsby's static HTML output ships without trying to render the web component server-side.

Where should we drop it in?

A top-level Layout component is the typical home, so the button appears on every page. If your site has a multi-page layout structure, put it in the outermost shared component.

Does it work with Gatsby Cloud and other hosts?

Yes. The widget loads from a CDN at runtime; the deploy target does not matter. Gatsby Cloud, Netlify, Vercel, and S3 are all supported.

Can we keep `gatsby-plugin-local-search` or another search plugin?

Yes. Biel sits alongside as a separate widget for natural-language questions. Many Gatsby sites run gatsby-plugin-local-search for keyword lookup and Biel for question-shaped queries.

How long does the install take?

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