{"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.","language":"javascript","status":"active","last_verified":"Mon Apr 27","install":{"commands":["npm install react-dev-bot"],"cli":null},"imports":["import { devBot } from 'react-dev-bot/vite'","import { DevBot } from 'react-dev-bot/next'","import { DevBotErrorBoundary } from 'react-dev-bot/next'","export { GET } from 'react-dev-bot/next/route'","export { POST } from 'react-dev-bot/next/route'","import { inspectorCursorServer } from 'react-dev-bot/vite'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}