Genie React
Getting started

Install

Add Genie, inspect setup changes, and confirm one live session.

Run setup from the app folder containing its package.json. You need a development build of React 18 or newer and Node.js 22.12.0 or newer. The verification examples use Bash and jq.

Add the packages

pnpm add -D genie-react @genie-react/cli

Use your project's package manager. If the project already has Genie installed, check the CLI release and output note before using the JSON examples.

Review and apply setup

npx @genie-react/cli init --dry-run
npx @genie-react/cli init

init detects Vite and Next.js, updates supported configuration, and installs the agent skill. It runs without prompts. --yes is accepted for existing automation and makes the same changes.

Read data.artifacts, data.manualSteps, and userActionRequired in the receipt. A successful exit can still require manual wiring. Plain Vite apps, for example, need <Genie /> near the app root for the additional collectors. Follow the matching platform setup until each manual step is complete. If setup fails partway through, inspect the files before retrying; changes may already have been applied.

Start the app and name its session

Keep the development server running in its own terminal:

Terminal 1
pnpm dev

Open the app's local URL with ?_genie=setup-check. If the URL already has a query string, append &_genie=setup-check. In a second terminal, pin that session and check the running stack:

Terminal 2
export GENIE_SESSION=setup-check
npx @genie-react/cli doctor --live
npx @genie-react/cli status --sessions-only

Continue when doctor reports ok:true and the selected status session has ready:true and staleMs:null. On failure, follow remediation, keep the server running, and open or reload the app before retrying. Troubleshooting covers connection and collector failures.

Make the first read

npx @genie-react/cli tools react_get_tree
npx @genie-react/cli call react_get_tree '{"depth":2}'

A tree response confirms that calls reached the mounted app. Next, use First live check for a reproducible demo with a visible assertion, or follow the agent workflow in your own app.

Development only

The hub listens on localhost. Keep manual integrations behind development guards. The Vite integration and Next.js script component skip production.

On this page