React

Add an AI support assistant to a React application

One component with one prop. No provider, no hook, and the widget itself never enters your bundle.

One component
About two minutes
One file

pnpm add @matterchat/react

your root componentfile

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

tsx · render it once

Where the component goes

Install @matterchat/react and render <MatterChat publicKey=... /> once, anywhere inside your app — the same for Vite, Create React App, or any bundler. It renders null and lives outside the React tree, so it needs no provider, no hook, and no mount point. If you would rather add nothing to package.json, the plain script tag in index.html still works.

One component, one prop: Render it once, anywhere. It returns null and manages the script itself.
No provider, no hook: It renders in its own layer and shares nothing with your React state.
Routing-agnostic: Client-side navigation does not affect it, because it never depended on page loads.
The widget stays external: The package is a thin wrapper — the widget itself is fetched at run time, not bundled with your app.

It renders null and lives outside the React tree — no provider, no hook, no mount point. Rendering it twice is safe, and it survives StrictMode's double effect.

Answers from your deployed docs

Point the crawler at your published documentation or marketing site. There is no need to bring content into the app or to maintain a second copy of it for the assistant.

Deliberately decoupled

Because it shares no state with your application, it cannot break your app and your app cannot break it. Removing it is deleting two lines from one HTML file.

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.

Is there a React component or hook?

There is a component, @matterchat/react, and no hook. The component only saves you writing the effect — the widget still renders in its own layer rather than inside your tree, so there is no provider and nothing shared with your state.

Does it work with Vite and Create React App?

Yes, and with any other bundler. Render the component wherever you like, or paste the script tag into index.html if you prefer no dependency — both serve one.

What about single-page routing?

It works fine. The widget does not depend on page loads, so client-side route changes have no effect on it.