Get started
Getting started

Local quickstart

Set up Revyse in your Next.js app with one command, then make changes on your machine: plan, diff, checks and undo.

Revyse opens in your running Next.js dev server. Select an element, say what you want, and Revyse plans it, writes the change into your files, shows you the diff and checks it. Nothing leaves your machine except your request and the source files it needs (see how Revyse handles your code and data).

You need

  • Node 22 or newer, and your project's package manager (pnpm, npm, yarn or bun).
  • A Next.js app (App Router or Pages Router; Next 14 to 16 are tested) that runs locally.
  • A Revyse account. revyse init creates the project on Revyse for you (or connects to one you already have). The organization needs credits for changes, which the Revyse team adds.
  • Optional, for the browser check: Chromium (npx playwright install chromium) or Chrome.

1. revyse init

In your app's directory:

npx revyse init

It sets everything up, asking before each step:

  1. It shows how Revyse handles your code and asks you to accept it.
  2. It shows the next.config change that adds withRevyse() as a diff you approve.
  3. It writes revyse.config.json and adds .revyse/ to .gitignore.
  4. It installs revyse and @revyse/next as dev dependencies, with your package manager.
  5. It connects the app to Revyse. It asks what to call the project (the name in your package.json unless you type another), then your browser opens: sign in, check the code matches your terminal, and click Create and connect. You can pick an existing project instead. An app that's already connected is shown its project, and keeps it unless you ask for a different one. The CLI gets a token for that one project, stored in your home directory.
  6. It connects your GitHub repository (from your git remote) and the Vercel project that deploys the app (from .vercel/project.json, or one you name), so changes from your live site and the dashboard ship, each with a preview. When Revyse can't see them yet, your browser opens to install its GitHub App or Vercel integration, and init waits. If the project is connected to another repository or Vercel project than your code's, it offers to switch.
  7. It sets up your live site: it registers the site's addresses (your Vercel project's domains, without typing), adds the live option to withRevyse(), and adds Revyse to your Content Security Policy if you have one, each as a diff you approve. See Make changes on your live site.
  8. On Vercel, it offers exact locations, so a selection on your live site leads Revyse to the exact line of code: a build token set on Vercel for you, and two small edits you approve.
  9. It commits and pushes what it changed (one question), and waits until your live site serves Revyse. Nothing is left to do by hand.

Decline the disclosure and nothing is written. --yes accepts the prompts, --force reviews the disclosure and next.config again, and --no-connect sets up without signing in (CI). Running init again finishes a setup that was left halfway: it skips what's done. If your revyse.config.json runs your tests after every change, it asks once whether to keep doing that: they slow each change down. No (the default) removes test from scripts.

The CLI talks to https://revyse.dev. To use a Revyse you run yourself, set REVYSE_API_URL (or --api-url) first, for example http://localhost:3000. revyse login connects to another project later, revyse whoami shows the connection and revyse logout revokes it (owners can revoke any token from the project's settings).

revyse.config.json is yours to edit:

Field Meaning
sourceDirs Directories Revyse may read and write (detected from tsconfig paths and the usual layouts).
exclude Globs that are never read, on top of .env, keys, credentials, node_modules and .git.
scripts Your package.json script names for typecheck, lint, test, build. Only these ever run.
appOrigins Where your dev server runs; the overlay and the browser check are allowed from here only.
agentPort The local agent's port (default 4545); must match withRevyse({ agentPort }) if you change it.
engine "agent" for the coding agent (new components, back-end code, several files); "classic" (default) for front-end edits. See supported-changes.md.
testsOnEachChange Whether your tests run after every change. init asks once, and records the answer here; scripts.test is what runs.

Commit revyse.config.json: cloud changes (next guide) read it from the repository.

2. Start your app

Run your dev server as usual (npm run dev). Revyse starts with it: the dev server prints [revyse] Ready. Open the app and click the Revyse button in the corner; the chat opens at the bottom of the page. It only exists in development builds; a production build has no Revyse code in it.

3. Make a change

  1. Select. Click the overlay's select button (or press its shortcut), then click an element on the page. The overlay shows what it captured: tag, visible text, classes, the source location when the loader found it. Form values are never captured.
  2. Describe. Say what should change, in words. Pick a model if you like, or leave it on Default. Each model shows its weight: what a change costs on it against Claude Sonnet 5.5 (×1). Owners can turn models off and choose the default.
  3. Plan. Revyse gathers the files it needs and shows a plan: a summary and the steps with their files, and what it cost so far. If the request is unclear it asks one question. The classic engine refuses back-end work and new files and says why; the agent engine does them, and says what it leaves out. With the agent engine, the overlay lists each step as it happens ("Reading src/app/page.tsx") with its time, and the plan says what it leaves out, which environment variables the change needs, and which sensitive areas it touches.
  4. Apply. Revyse writes the change into your files, and the page updates. That's it: the overlay says Done with the changed files and the diff.
  5. Review. Keep leaves the change in your working tree for you to commit; Revise keeps the conversation and re-plans; Revert restores the files exactly.

Your configured checks (typecheck, lint, tests if you turned them on, and the page in a browser) run afterwards in the background. They never hold the change up. Their results are on the change's page in the dashboard, and the dev server prints a one-line summary.

If you edit a file while Revyse is working, it stops rather than overwrite you, says what changed, and offers to re-plan from the latest version.

4. The dashboard

Every change is on the project page in the dashboard with its conversation, plan, files, diff, checks with evidence, cost, and a timeline with the reason for each step. Leave a thumbs up or down there, or report a problem; it reaches Revyse with the change attached.

If something is off

  • The overlay doesn't appear: is withRevyse() in next.config, is the dev server running on an origin listed in appOrigins? The dev server's [revyse] lines say what's wrong (another app on the agent's port, for example). Restart the dev server after init; if the Next dev cache misbehaves, delete .next.
  • "Revyse isn't sure which file renders this element": Revyse couldn't tell which file draws it (a component rendered by a library, or Turbopack with a Pages Router app without a custom _document). Select it again, or something near it; the agent engine searches your code instead.
  • "not logged in" or "doesn't recognise this machine": npx revyse login again.
  • "no credits left" or "paused": an owner sees the balance on the organization's Credits page and the controls in the project's Settings.