hootlens

Make Hoot Lens automatic for your site and your coding agents.

npx hootlens init

init finds your framework, adds the Hoot Lens tag in the right file, adds the build plugin on Vite (React) and Next.js, writes .hootlens.json, adds a short Hoot Lens section to AGENTS.md, and connects the Hoot Lens MCP server for Claude Code, Cursor, VS Code and Codex. It shows every change first, and running it again changes nothing.

npx hootlens status    # is the tag in place, does Hoot Lens know the project, does the live site serve it
npx hootlens doctor    # find common mistakes in the source

npx hootlens sourcemaps upload --release <id> <dir>   # so JavaScript errors show the original file and line

For an agent or a script, run it without prompts:

npx hootlens init --project <id> --yes --agents claude,cursor --json
npx hootlens init --project <id> --dry-run --json

The project id is public. Find it under Installation in the Hoot Lens dashboard. No token is written to your repository, and the hosted MCP server signs in with OAuth.

Source locations

On a React site built with Vite or Next.js, the build plugins stamp each element with the file and line it comes from, so a snag in review_findings reads src/components/Pricing.tsx:42 and a coding agent can open that file. They ship in this package:

// vite.config.ts
import hootlens from "hootlens/vite";
export default defineConfig({ plugins: [hootlens(), react()] });

// next.config.ts (webpack and Turbopack)
import { withHootlens } from "hootlens/next";
export default withHootlens(nextConfig);

They are on in development and off in production builds. Set HOOTLENS_SOURCE_LOCATIONS=1 to turn them on for a preview deploy or for production, knowing that file paths are then visible in your page HTML.

Requires Node 20 or later. No runtime dependencies. Full reference: https://hootlens.com/docs/CLI.md.