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, add a page-search field that hands queries to Ask AI, 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 search with Ask AI to the navbar

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

→Drop-in search field in the navbar
→Page results with an Ask AI handoff
→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 client-side integration works on Gatsby Cloud, Netlify, Vercel, S3, and custom hosts.

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

Yes. Keep your existing plugin for page lookup and add the Biel chatbot separately. Or add Biel Search, whose Ask AI action sends the current query to the chatbot.

How long does the install take?

Install the package, edit one component, and register the web component in an effect. Indexing time depends on the site size.

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