in-stride

Scaffold In-Stride into any React / Next.js / Vite app. One command, wires up the widget, auto-detects your routes, optionally installs Chrome DevTools MCP for AI-assisted walkthroughs.

Usage

npx in-stride init

Writes a stride.config.ts at the project root with:

• Framework auto-detected (Next.js vs React + Vite)
• Your routes scanned from the filesystem (app/**/page.tsx, pages/**, or src/pages/**)
• A usage snippet to paste into your app root

Options

npx in-stride init --with-mcp

Also adds Chrome DevTools MCP to your .mcp.json and installs it globally so AI assistants like Claude Code can drive your running app.

npx in-stride scan

Print the auto-detected route list without writing the config. Add --write to overwrite the routes array in an existing stride.config.ts.

After init

1. npm install in-stride-widget @xyflow/react framer-motion lucide-react
2. Paste the printed snippet into your app root (or app/layout.tsx on Next.js)
3. Run your dev server
4. Click the S pill at the bottom of the screen

What the widget gives you

See the in-stride-widget README for the full feature list. Short version:

• DOM inspector that jumps to source file:line in your editor
• Route map, AUDIT snapshot, ASK-to-clipboard prompt export, TASK list
• Mobile-first layout, keyboard-first controls

License

MIT