Biel.ai
Book a demo
For Gatsby sites

Add Ask AI to your Gatsby site

Add an Ask AI assistant to your Gatsby site by dropping <BielButton> into your Layout. Readers get source-cited answers from your indexed content, in their language.

Add Biel to GatsbySee the install code
14-day free trialNo credit card required
Biel.ai assistant
Powered by biel.ai
Assistant
Hi! How can I help you?
What is Biel?
Assistant
Biel.ai turns your product docs into an AI assistant. Add an assistant to your website, give AI agents context from your docs, or build custom experiences with our API.
How to try Biel?
Assistant
Sign up and try Biel free for 14 days. Set it up yourself, connect your docs, and add the assistant to your site. Or request a demo and we’ll walk you through it.

Used by documentation and developer-experience teams

ScyllaDB
Katalon
Tezos
Talon.one
GrepTime
CrazyGames
SecuroSys
ScyllaDB
Katalon
Tezos
Talon.one
GrepTime
CrazyGames
SecuroSys
Install

Three ways to ship Biel on Gatsby

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 run in the browser; configure MCP separately in the AI tool.
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

Before you install

Will it work with our Gatsby version?

Gatsby v4 and v5 are supported. Register the web component in the browser, following the install guide.

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 add the widget?

Put it in a shared Layout component so it appears across the pages where readers need it.

Does it depend on where we host Gatsby?

The widget runs in the browser on your published site. Follow the Gatsby install guide and allow its scripts in your site security policy.

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

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

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

Try Biel with your docsBook 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.
Try me ↓