Add an AI support assistant to a React application
It is a script tag. There is no package to install, no provider to wrap your tree in, and nothing added to your bundle.
- Two lines
- About two minutes
- One file
<!-- Matter Chat — paste right before </body> --><script> window.MatterChat = window.MatterChat || { q: [] }; window.MatterChat.q.push(["init", { id: "bot_your_key" }]);</script><script async src="https://app.matterchat.co/widget.js"></script></body>html · paste above the dimmed line
Where the snippet goes
Paste the two lines into index.html before the closing body tag — the same file for Vite, Create React App, or any bundler. It sits outside the React tree entirely, so it needs no provider, no hook, and no mount point.
- index.html, before /body
- One paste, outside your component tree.
- 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.
- Zero bundle impact
- Nothing is imported, so nothing is bundled.
It sits outside the React tree entirely — no provider, no hook, no mount point, and nothing to clean up on unmount.
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?
No, and it does not need one. The widget renders in its own layer rather than inside your tree, so a component wrapper would add coupling without adding capability.
Does it work with Vite and Create React App?
Yes — both serve an index.html, which is where the snippet goes. The bundler is irrelevant.
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.
From the blog
All posts- BuildingDomain locks and why “works on localhost” isn’t enoughDomain allowlists exist so your bot answers only where you installed it. Testing on localhost proves the script loads; it does not prove production embeds are locked down.Read
- EvaluatingThe best AI chatbot for a Webflow site, compared honestly (2026)Matter Chat, Social Intents, Ultimo Bots, Chatling, WeblyChat and Chatbase on a Webflow site: Apps marketplace or custom code, the paid-site-plan gate, CMS coverage, citations, handoff and pricing. Checked on the vendors' own pages.Read
- BuildingWhat to index first when your site is a messStart with the pages that already resolve real support questions. Noise, archives, and unfinished docs can wait — indexing them first makes answers worse.Read
Answer honestly. Capture the rest.
Point Matter Chat at your site and see what it can — and can't — answer. It's honest about both.
No credit card. 2 minute setup.
Every answer cites the source it came from. When there isn't one, it says so — and hands the visitor to you.
Installs on the tools you already run.