Add an AI agent to your Next.js 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 app/layout.tsx, inside <body> below {children}, 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 you send a Content-Security-Policy, it is usually in next.config headers() or middleware: add https://api.askverb.com to script-src and connect-src.

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.

// app/api/verb-token/route.ts
import { createHmac } from "node:crypto";
import { auth } from "@/lib/auth"; // however you know who is signed in

export async function GET() {
  const session = await auth();
  if (!session?.user) return new Response("Unauthorized", { status: 401 });

  const claims = {
    sub: String(session.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");

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

3. Hand it to the widget

In App Router, run this from a client component that mounts once, such as one in your root layout, inside a useEffect.

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.