{"id":21861,"library":"react-dev-bot","title":"react-dev-bot","description":"Vite/Next.js plugin that embeds an AI (Claude Code) chat panel and component inspector in the browser during development. Version 1.2.1 integrates with Claude Code CLI for conversational debugging, screenshot capture, click history, and editor-to-browser component inspection. Compatible with Vite 5+ and Next.js 14+ (App Router), though the component inspector's original path resolution is currently limited to Next.js 16. The plugin requires local Claude Code CLI and offers optional error boundaries for React render errors. Release cadence is irregular; primarily maintained by a small team.","status":"active","version":"1.2.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","vite-plugin","next.js","nextjs","claude","claude-code","dev-tools","debugging"],"install":[{"cmd":"npm install react-dev-bot","lang":"bash","label":"npm"},{"cmd":"yarn add react-dev-bot","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-dev-bot","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Next.js integration; peer dependency","package":"next","optional":true},{"reason":"Core peer dependency for React components","package":"react","optional":false},{"reason":"Required for Vite integration; peer dependency","package":"vite","optional":true}],"imports":[{"note":"Legacy import from 'react-dev-bot' still works but is not recommended; prefer '/vite' for clarity.","wrong":"import { devBot } from 'react-dev-bot'","symbol":"devBot","correct":"import { devBot } from 'react-dev-bot/vite'"},{"note":"React component for Next.js; must be imported from '/next' subpath.","wrong":"import { DevBot } from 'react-dev-bot'","symbol":"DevBot","correct":"import { DevBot } from 'react-dev-bot/next'"},{"note":"Optional error boundary for React render errors; only active in development by default.","wrong":null,"symbol":"DevBotErrorBoundary","correct":"import { DevBotErrorBoundary } from 'react-dev-bot/next'"},{"note":"Re-export for Next.js API route handler; must be used in route.ts file with catch-all path.","wrong":"import { GET } from 'react-dev-bot/next/route'","symbol":"GET","correct":"export { GET } from 'react-dev-bot/next/route'"},{"note":"Same as GET above, for POST requests.","wrong":null,"symbol":"POST","correct":"export { POST } from 'react-dev-bot/next/route'"},{"note":"Vite plugin for sourcemap-based component locator; requires VITE_LOCATOR=true and sourcemaps enabled.","wrong":null,"symbol":"inspectorCursorServer","correct":"import { inspectorCursorServer } from 'react-dev-bot/vite'"}],"quickstart":{"code":"# Install as dev dependency\npnpm add -D react-dev-bot\n\n# Ensure Claude Code CLI is available in PATH\nclaude --version\n\n# Set up environment variables in .env.development\nVITE_LOCATOR=true\nREACT_EDITOR=cursor\n\n# Vite: configure vite.config.ts\nimport { defineConfig, loadEnv } from 'vite';\nimport react from '@vitejs/plugin-react-swc';\nimport { devBot, inspectorCursorServer } from 'react-dev-bot/vite';\n\nexport default defineConfig(({ mode }) => {\n const env = loadEnv(mode, process.cwd(), '');\n const locatorEnabled = env.VITE_LOCATOR === 'true';\n if (env.REACT_EDITOR) process.env.REACT_EDITOR = env.REACT_EDITOR;\n\n return {\n build: {\n sourcemap: locatorEnabled ? 'hidden' : false,\n ...(locatorEnabled && {\n rollupOptions: { output: { sourcemapExcludeSources: true } },\n }),\n },\n plugins: [\n ...(locatorEnabled ? [inspectorCursorServer()] : []),\n ...(mode === 'development' ? [devBot()] : []),\n react(),\n ],\n };\n});\n\n# Next.js: add API route at app/api/dev/[...path]/route.ts\n// app/api/dev/[...path]/route.ts\nexport { GET, POST } from 'react-dev-bot/next/route';\n\n# Next.js: mount DevBot in root layout\n// app/layout.tsx\nimport { DevBot } from 'react-dev-bot/next';\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n \n {children}\n \n \n );\n}\n\n# Start dev server\npnpm dev\n# On startup, a random token is printed to stderr if DEVBOT_TOKEN not set.\n# Open browser and look for the DevBot panel (usually bottom-right corner).","lang":"typescript","description":"Minimal setup for both Vite and Next.js projects: install package, configure plugins/routes, mount DevBot component, and start dev server."},"warnings":[{"fix":"Upgrade to Next.js 16 for full inspector functionality, or wait for future support for older versions.","message":"Component inspector original path resolution currently works only with Next.js 16 (Turbopack/Webpack). Next.js 13–15 may show bundle paths instead.","severity":"breaking","affected_versions":"<=1.2.1"},{"fix":"Ensure Vite 5+ or Next.js 14+ is installed.","message":"Peer dependency on Vite >=5.0.0 and Next.js >=14.0.0; using older versions may cause runtime errors.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Change import to `import { devBot } from 'react-dev-bot/vite'`.","message":"Importing `devBot` from `'react-dev-bot'` (top-level) is deprecated; prefer `'react-dev-bot/vite'`.","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"DevBot is always production-safe; for error boundary, use ``.","message":"DevBot component renders nothing in production (NODE_ENV !== 'development'). To test in production, use the `force` prop on DevBotErrorBoundary. (Not available on DevBot itself.)","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set `DEVBOT_REQUIRE_TOKEN=1` and define a strong `DEVBOT_TOKEN` environment variable.","message":"Security: if DEVBOT_REQUIRE_TOKEN is not set to '1', the plugin falls back to same-origin checks (Origin header). In some configurations (e.g., reverse proxy), this may allow unauthorized access.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use environment-specific .env files or CI secrets to manage tokens.","message":"The DEVBOT_TOKEN is printed to stderr on each dev server start if not set manually. Do not commit `.env.development` with a hardcoded token to public repos.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Update package to latest: `pnpm add -D react-dev-bot@latest`.","cause":"Installed package does not include the 'vite' subpath export or package is older version.","error":"Error: Cannot find module 'react-dev-bot/vite'"},{"fix":"Set `VITE_LOCATOR=true` in .env.development and enable `build.sourcemap: 'hidden'` in Vite config.","cause":"Missing environment variable or sourcemap configuration in vite.config.ts.","error":"Error: The inspectorCursorServer plugin requires VITE_LOCATOR=true and sourcemaps to be enabled."},{"fix":"Wrap devBot() in `...(mode === 'development' ? [devBot()] : [])`.","cause":"devBot() was added to plugins array outside of development mode check.","error":"Error: The devBot plugin is only available in development mode."},{"fix":"Create `app/api/dev/[...path]/route.ts` and export GET/POST from `react-dev-bot/next/route`.","cause":"Missing or incorrectly placed catch-all route file.","error":"Error: Route \"app/api/dev/[...path]/route.ts\" does not match the route handler."},{"fix":"Use `import { DevBot } from 'react-dev-bot/next'` instead of from top-level package.","cause":"Import of DevBot from incorrect path; must be from 'react-dev-bot/next'.","error":"Error: DevBot is not defined (Next.js build error)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}