Skip to content

Add an AI assistant to your React or Next.js app.

SiteMind is a single script tag, so there is no package to install and nothing to bundle. It crawls your deployed site and answers visitors from it, with a link to the page each answer came from.

Next.js

App Router or Pages Router.

app/layout.tsx (App Router) or pages/_document.tsx (Pages Router)

  1. Copy your snippet

    In your SiteMind dashboard, open Widget Studio and copy the embed code. It is one script tag with your widget key in it.

  2. Open your root layout

    App Router (Next.js 13+): open app/layout.tsx. Pages Router: open pages/_document.tsx instead.

  3. Paste the snippet

    Paste it as JSX, just before the closing </body> tag inside the returned markup (Pages Router: inside <Body>, before </Body>).

  4. Save

    Save the file. Your dev server hot-reloads, or redeploy for production.

React

Vite or Create React App.

public/index.html

  1. Copy your snippet

    In your SiteMind dashboard, open Widget Studio and copy the embed code. It is one script tag with your widget key in it.

  2. Open public/index.html

    This is the single static HTML shell your React app mounts into.

  3. Paste the snippet

    Paste it immediately before the closing </body> tag.

  4. Rebuild

    Save, then rebuild and redeploy your app.

Good to know. Before you start.

  • Client-side routing works

    The widget is added once in the root layout, so it stays open as visitors move between pages of a single-page app.

  • Your own software can ask too

    With an API key you can send questions to your assistant from your own code with POST /api/v1/public/chat, on every plan.

React & Next.js questions. Answered plainly.

Something not covered here? We answer setup questions by email.

Contact us

No, and you do not need one. The widget is one script tag. In Next.js the dashboard also gives you a ready-made next/script component with your key filled in.

The script loads with the async attribute, so it does not hold up the rest of your page while it downloads.

From your own site. SiteMind crawls your pages, and you can add files and written answers too. It answers only from that content and links the page each answer came from.

Put SiteMind on your React & Next.js site. Free for 3 days, no card needed.

No credit card required2-minute automated setupEmbed with one line