# How to add an AI chatbot to Next.js and React
URL: https://instantknowledgebot.com/guides/add-chatbot-to-react-nextjs
Last updated: 2026-10-14
> To add an AI chatbot to a Next.js app, load the bot's widget script with the next/script component in app/layout.tsx (App Router) or pages/_app.tsx (Pages Router), using strategy lazyOnload. In a plain React app, append the script once from a useEffect in your root component; the bot answers from your own documents.
To **add an AI chatbot to Next.js** or any React app, you load one script, the same widget used on every InstantKnowledgeBot site, from your root layout. It takes about three minutes. The chatbot answers your users from your own documentation, which makes it a quick way to add in-app help to a SaaS product, dashboard or docs site.
## What do you need before you start?
- A **Next.js** app (App Router or Pages Router) or a **React** app (Vite, Create React App or similar).
- A **bot** created from your documents. [Sign up free](/signup), click **New bot**, choose a template (the **SaaS help desk** template formats answers as numbered steps with code blocks) and upload your docs.
- Your **bot ID**, shown in the bot's **Embed & share** tab.
## How do you add the chatbot to the Next.js App Router?
Add the `Script` component to `app/layout.tsx`, inside ``:
```tsx
// app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`strategy="lazyOnload"` loads the widget after the page has finished loading, so it never competes with your app's own resources. Because the root layout persists across navigations, the script loads once and the bubble stays put as users move around.
## How do you add it with the Pages Router?
Add the same `Script` to `pages/_app.tsx`:
```tsx
// pages/_app.tsx
import type { AppProps } from 'next/app';
import Script from 'next/script';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}
```
## How do you add it to a plain React app?
Load the script once from a `useEffect` in your root component:
```tsx
// App.tsx
import { useEffect } from 'react';
export default function App() {
useEffect(() => {
if (document.querySelector('script[data-bot]')) return; // already loaded
const s = document.createElement('script');
s.src = 'https://instantknowledgebot.com/widget.js';
s.dataset.bot = 'YOUR_BOT_ID';
s.defer = true;
document.body.appendChild(s);
}, []);
return ;
}
```
The guard line stops a second copy loading in development, where React's Strict Mode runs effects twice. Alternatively, paste the plain `