Read every line before it lands.

Tern's agent edits your components the way a teammate would: a diff you can read, keep or undo, change by change.

  • Tracking that lives in your code

    No snippet in the page head. Calls sit next to the button they measure, typed and tested with the rest.

  • Nothing lands without you

    Each change waits for Keep or Undo, so a stray event name never reaches production.

  • Undo is just undo

    Undo a change and it plays backwards, leaving the file exactly as it was.

Track signup_submitted with the chosen plan

app/signup/form.tsx
"use client";

import { useState } from "react";
import { createAccount } from "./actions";

export function SignupForm() {
  const [plan, setPlan] = useState<Plan>("starter");

  async function onSubmit(data: FormData) {
    const account = await createAccount(data, plan);
    window.location.assign(account.welcomeUrl);
  }

  return <Form plan={plan} onPlanChange={setPlan} onSubmit={onSubmit} />;
}