Next.js

Add an AI support assistant to a Next.js app

One package, one component, and no next/script strategy to choose.

One component
About two minutes
One file

pnpm add @matterchat/react

app/layout.tsxfile

import { MatterChat } from "@matterchat/react"; <MatterChat publicKey="bot_your_key" />

tsx · render it once

Where the component goes

Render <MatterChat /> in your root layout. In the App Router that is app/layout.tsx; in the Pages Router it is pages/_app.tsx. It renders null and adds the script itself, once, so there is no strategy to pick and nothing to re-initialise on client-side navigation.

One component, no strategy: No next/script and no afterInteractive to remember — the component handles loading order for you.
Root layout, one place: app/layout.tsx covers every route without per-page work.
Nothing meaningful in your bundle: The package is a thin wrapper; the widget itself stays an external script, loaded after your page.
Survives soft navigation: The script is added once and left alone across client-side route changes, and rendering the component twice is safe.

No next/script strategy to choose: the component adds the script itself, once, and leaves it alone across client-side navigation.

Index the docs you already deploy

If your documentation is part of the same app, or is a separate deployed site, the crawler reads it as published. There is no build step to add and no content to duplicate into another system.

Keep it out of the critical path

The component adds the script in an effect, after hydration, so it never blocks parsing or rendering. If you are measuring Core Web Vitals seriously, that is the behaviour you want by default rather than a strategy you have to remember to set.

Checking it actually worked

Four things, in order. The third is the one people skip, and it is the one that tells you whether the answers are grounded.

1Hard refresh the page — the launcher appears bottom-right.
2Ask it something your site answers, and check the reply cites a page.
3Ask it something your site does not cover, and check it declines.
4Open Conversations in the dashboard; both should be there.

On a different stack?

The snippet is the same everywhere. Only the place you paste it changes.

What developers ask

Short answers. If yours is not here, the assistant on this page will try it — and tell you honestly if it cannot.

Does it work with the App Router?

Yes — render <MatterChat /> from app/layout.tsx. It works the same way in the Pages Router from pages/_app.tsx.

Is there an npm package?

Yes — @matterchat/react. It is a thin wrapper that adds the script for you; the widget itself is still fetched at run time rather than bundled. Widget updates reach you without a version bump, so it is not a treadmill. If you would rather not add a dependency at all, the plain script tag still works.

Will it break on client-side navigation?

No. The component adds the script once and leaves it alone, so router navigation does not re-execute or re-mount it.