Skip to main content

Ask AI assistant widget for Next.js

Add an AI assistant or AI search widget to your Next.js site.

Prerequisites​

  • A Biel.ai account. If you don't have one, sign up for free.
  • A project created in your Biel.ai dashboard. Follow the Quickstart guide to create one.
  • A Next.js application ready to install Biel.ai.
  • Node.js installed.

Add the assistant widget​

Assistant widget for docs

  1. Install the Biel.ai package:

    npm install biel-react
    info

    If you're using yarn as your package manager, run yarn add biel-react instead of the npm command above.

  2. Create a wrapper for the assistant by creating a file at components/biel-search.tsx:

    'use client';

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

    const DynamicBielButtonComponent = (props: ComponentProps<typeof BielButton>) => {
    useEffect(() => {
        defineCustomElements(window);
    }, []);

    return <BielButton {...props} />;
    };

    export default DynamicBielButtonComponent;

  3. Create components/DocumentationChat.tsx for the browser-only widget entry point:

    'use client'
    import dynamic from 'next/dynamic';

    const DynamicBielButton = dynamic(() => import('@/components/biel-search'), {
        ssr: false,
    });

    export default function DocumentationChat() {
    return (
    <div className="App">
    {/* Other components and content */}
        <DynamicBielButton
            project="<YOUR_PROJECT_ID>"
            header-title="Biel.ai assistant"
            button-position="bottom-right"
            modal-position="bottom-right"
            button-style="dark">
            Ask AI
        </DynamicBielButton>
    </div>
    );
    }

    Replace <YOUR_PROJECT_ID> with your project's ID from the Biel.ai dashboard.

  4. Import DocumentationChat in your existing app/layout.tsx or pages/_app.tsx and render <DocumentationChat /> alongside the existing page content. Keep your root layout's <html>, <body>, and metadata. The client boundary belongs in DocumentationChat, not the root layout.

  5. Run npm run dev and verify that the assistant appears and works on your site.

Next steps​