Add an AI agent to your React app

Rather not do it by hand? Your coding agent can: see Verb for Claude Code or Cursor.

1. Add the script tag

Put it in index.html in the project root (public/index.html for Create React App), just before </body>, once. Your site key is in the dashboard.

<script src="https://api.askverb.com/v1/verb.js"
        data-verb-site="YOUR_SITE_KEY" defer></script>

If your host sends a Content-Security-Policy, add https://api.askverb.com to script-src and connect-src there.

2. Mint a token on your server

Verb treats every visitor as anonymous until your server says who they are. Sign the logged-in user's id and a short expiry with the key from your dashboard. Both halves are base64url without padding: standard base64 is the one mistake that fails every token while looking right in a log.

// Express
import { createHmac } from "node:crypto";

app.get("/api/verb-token", (req, res) => {
  if (!req.user) return res.sendStatus(401);   // however your auth sets this

  const claims = {
    sub: String(req.user.id),           // your own user id
    exp: Math.floor(Date.now() / 1000) + 900,
  };
  const body = Buffer.from(JSON.stringify(claims)).toString("base64url");
  const sig = createHmac("sha256", process.env.VERB_SIGNING_KEY)
    .update(body).digest("base64url");

  res.json({ token: `${body}.${sig}` });
});

3. Hand it to the widget

Run this from a component that mounts once, inside a useEffect. If your API is on a different origin from the page, use its full URL and credentials: "include".

const getSessionToken = () =>
  fetch("/api/verb-token", { credentials: "same-origin", cache: "no-store" })
    .then(r => r.json())
    .then(({ token }) => token);

// Sign in now, and let the widget ask again when the token gets old.
window.Verb.configure({ getSessionToken });
getSessionToken().then(token => token && window.Verb.identify(token));

// And wherever your app signs somebody out:
// window.Verb.reset();

The widget asks for a fresh token before the old one expires, and clears the conversation when a different person signs in. The identity docs cover the details.

4. Describe what it may do, then test it

List the actions in a verb.md: each one says whether it reads or writes, and anything that writes asks the user for a yes with the real values first. Every site comes with a test site that only answers on localhost, so you try it against your development data before your users see it. Actions that need your app's own client go through an adapter.