A CLI to enhance your next.js dev environment for agents

Installing

git clone [email protected]:vercel/xtra.git
cd xtra
./install-local.sh

try in a next.js

pnpx create-next-app@latest xtra-test --yes
cd my-app
xtra init

About

xtra

USAGE
  xtra <command> [options]

COMMANDS
  init                Initialize xtra in your Next.js app
  test                Run all *.test.{ts,tsx,js,jsx} files in browser
  exec <code>         Execute TypeScript/JavaScript in browser
  screenshot          Capture screenshots of your app
  dev                 Start Next.js development server
  docs                Search Next.js documentation
  logs                View browser + server console logs
  network             View network requests made in browser
  replay              View sequence of events representing what you did in the browser
  ports               Manage active dev servers
  prompts             Manage rule files optimized for next.js
  agents              Manage specialized agent configs for next.js

OPTIONS
  --help, -h          Show this help message
  --version, -v       Show version number

EXAMPLES
  xtra init
  xtra test
  xtra exec "import * as React from 'react'; console.log(React.version)"
  xtra exec "console.log(process.pid)" --server
  xtra screenshot --selector="#app" --filename="my-screenshot"
  xtra logs --follow
  xtra network --summary
  xtra replay --follow
  xtra dev --turbopack --port=3001
  xtra ports --kill=3000

Run xtra <command> --help for detailed command options

Developing

cd xtra
./install-dev.sh

Then inside any next.js app:

xtra-dev watch

Any changes made to the template dir inside the xtra repo will automatically sync the next.js project.

Use the xtra-dev command to reference the non compiled files in the project. xtra will reference the binary inside xtra/bin.

Note: the CLI is ran with bun, so there is no build step for non template code during development