React setup

There isn't a React-specific ingestion path, on purpose: your Merit AC ingest_token is a real credential, and a React app runs in the visitor's browser — anything shipped in the bundle is public. Usage tracking has to happen in whatever server your React app talks to, not in the client.

If your React app calls an LLM through your own backend

That's the common case — a Node or Python service that your React frontend calls, which in turn calls Anthropic/OpenAI/etc. Instrument that service using the Node or Python guide. Nothing in the React app itself changes.

If your React app calls an LLM API directly from the browser

This is the case worth pausing on: a client-held provider key is a security problem independent of Merit AC, and it also means there's no safe place to hold a Merit AC ingest token either. The fix for both is the same — put a thin proxy in front of the provider call (see the Node guide) so the browser holds a scoped, revocable key instead of the real one, and the proxy is what reports usage to Merit AC.

A minimal working shape

What the React app itself actually does — call your own API route, never the provider or Merit AC directly:

// inside your React component -- no provider key, no Merit AC token, ever
async function ask(prompt) {
  const res = await fetch("/api/assistant", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt }),
  });
  return res.json();
}

// /api/assistant on YOUR OWN server (Node or Python) -- this is the file
// that follows the setup/node or setup/python guide, holding the real
// provider key and the Merit AC ingest token, neither of which the browser
// ever sees.

What Merit AC can tell you about frontend spend

Once usage is flowing from the backend, per-person and per-tool breakdowns show up the same way regardless of what your frontend is built in — see Architecture for how ingestion reaches the dashboard.