Yes, Breezy AI Search works on React and Next.js
Breezy AI Search adds to a React or Next.js app with one script in your root layout, loaded at the end of <body>. One extra line keeps it in step with client-side route changes.
Six steps, one script in your root layout
- 1 Sign up and add your site
Create a Breezy AI Search account and add your site URL. Breezy crawls and indexes your public pages automatically.
- 2 Copy the embed snippet
In your dashboard, go to Search → Installation, pick React / Next.js, and copy the embed snippet.
- 3 Add it to your root layout
Add the script to your root layout (for example app/layout.tsx with the App Router, or pages/_document.tsx with the Pages Router) using next/script with strategy="afterInteractive".
- 4 Keep it at the end of <body>
Place it at the end of <body>, not in <head>, the same footer placement as every other platform.
- 5 Reinitialise on route changes
For client-side route changes, call window.BreezyAISearch?.reinit() after navigation, for example in a useEffect that runs when the pathname changes.
- 6 Check it on your site
Open your live site, find the search box or search icon the widget adds, and run a quick search. You should see results appear.
Want the full walkthrough, screen by screen? See Set Up and Install the Widget in the How-to Guide, or check the FAQ for the general install flow.
Common questions
Does it work with a React app that isn’t built on Next.js?
Yes. Add the snippet just before the closing </body> tag in your app's HTML template (for example index.html), and call window.BreezyAISearch?.reinit() after client-side route changes.
My Next.js app uses a Content Security Policy. What do I need to allow?
The widget only needs our API domain in script-src and connect-src, with no 'unsafe-inline'. If your app mints a per-request nonce in middleware, put that nonce on the Script tag. The Installation page in your dashboard shows the exact values.