{"id":44432510,"url":"https://github.com/brucetoo/visual-agentic-dev","last_synced_at":"2026-02-16T17:01:51.801Z","repository":{"id":337737474,"uuid":"1154290573","full_name":"brucetoo/visual-agentic-dev","owner":"brucetoo","description":"an immersive browser dev environment with a seamless click-to-locate + agent edit loop.","archived":false,"fork":false,"pushed_at":"2026-02-14T06:36:13.000Z","size":67371,"stargazers_count":49,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-02-15T20:47:21.875Z","etag":null,"topics":["agent","ai","claude","claude-code","devtools","gemini-cli"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brucetoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-10T08:12:07.000Z","updated_at":"2026-02-15T02:46:44.000Z","dependencies_parsed_at":"2026-02-14T15:00:37.184Z","dependency_job_id":null,"html_url":"https://github.com/brucetoo/visual-agentic-dev","commit_stats":null,"previous_names":["brucetoo/visual-agentic-dev"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/brucetoo/visual-agentic-dev","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brucetoo%2Fvisual-agentic-dev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brucetoo%2Fvisual-agentic-dev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brucetoo%2Fvisual-agentic-dev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brucetoo%2Fvisual-agentic-dev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brucetoo","download_url":"https://codeload.github.com/brucetoo/visual-agentic-dev/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brucetoo%2Fvisual-agentic-dev/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29513426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent","ai","claude","claude-code","devtools","gemini-cli"],"created_at":"2026-02-12T13:40:20.321Z","updated_at":"2026-02-16T17:01:51.753Z","avatar_url":"https://github.com/brucetoo.png","language":"TypeScript","readme":"# Visual Agentic Dev\n\n**Visual Agentic Dev** is an immersive browser development environment designed to allow developers to complete code modifications, debugging, and command-line interactions without leaving the browser. Its core **click-to-locate + agent edit loop** is exactly the kind of workflow that makes AI agents feel genuinely useful—moving beyond a simple \"chat in a box\" to become a powerful, integrated part of the development lifecycle.\n\n## Core Features\n\n- 🎯 **Zero-Config Source Location**: Utilizes React Fiber to automatically identify source code locations without inserting redundant attributes into business code.\n- 📂 **Multi-Project Parallel Development**: Automatically identifies the project belonging to the current Tab and intelligently switches to the corresponding terminal session.\n- 🤖 **Dynamic Agent Registry**: Extensible architecture supporting multiple AI agents (Claude Code, CCR, etc.) with dynamic readiness detection.\n- 🖱️ **Batch Element Modification**: Supports selecting multiple page elements and sending them to the agent for batch modification.\n- ⌨️ **Convenient Shortcuts**: Quick access via `Cmd + Shift + S` (Mac) or `Ctrl + Shift + S` (Windows/Linux).\n- 🛠 **Built-in Terminal Integration**: Deeply integrated terminal with session persistence, history restoration, and smart context switching.\n\n## Demo\n\u003e demo task description: \n add one more todo item, not done state, task name is \"hey it's new one\", clike this new item show dialog and say \"you click me\"\n\nhttps://github.com/user-attachments/assets/8bd41a47-18f4-4f37-9731-a88aac9404aa\n\n## Quick Start (Release)\n\n### 1. Install Chrome Extension\n- Download from [Chrome Web Store](https://chromewebstore.google.com/) (Coming Soon)\n- Or download `extension.zip` from [GitHub Releases](https://github.com/brucetoo/visual-agentic-dev/releases) and load strictly.\n\n### 2. Install Bridge Server\n```bash\n# Global install (Recommended)\nnpm install -g @visual-agentic-dev/bridge-server\n\n# Start server\nvdev-server\n```\n\n### 3. Integrate into React Project\n```bash\nnpm install @visual-agentic-dev/react-devtools\n```\n\n```tsx\n// App.tsx\nimport { DevToolsProvider } from '@visual-agentic-dev/react-devtools';\n\nexport default function App() {\n  return (\n    \u003cDevToolsProvider enabled={process.env.NODE_ENV === 'development'}\u003e\n      \u003cYourApp /\u003e\n    \u003c/DevToolsProvider\u003e\n  );\n}\n```\n\n### 4. Not Work? Configure Build Plugin (For React 19+)\n\nReact 19+ requires a build plugin for accurate source location **due to a breaking change** where `_debugSource` was removed (see [facebook/react#32574](https://github.com/facebook/react/issues/32574)). We provide a universal plugin to restore this functionality.\n\n**Vite Example:**\n```ts\n// vite.config.ts\nimport react from '@vitejs/plugin-react';\nimport { vitePlugin as visualDev } from '@visual-agentic-dev/react-devtools/unplugin';\n\nexport default defineConfig({\n  plugins: [\n    visualDev(), // ⚠️ Must be placed BEFORE react()\n    react(),\n  ],\n});\n```\n\n\u003e For other bundlers (Webpack, Rspack, etc.), please see [packages/react-devtools/README.md](packages/react-devtools/README.md).\n\n---\n\n## Quick Start (Local Development)\n\n### 1. Install Dependencies\n\n```bash\npnpm install\n```\n\n### 2. Build All Packages\n\n```bash\npnpm build\n```\n\n### 3. Start Bridge Server\n\n```bash\n# Build and run\npnpm --filter @visual-agentic-dev/bridge-server build\nnode packages/bridge-server/bin/vdev-server.js\n```\n\n### 4. Integrate into Your React Project\n\nSimply install the SDK and introduce the Provider in your App.\n\n```bash\n# In your React project\nnpm install /path/to/visual-agentic-dev/packages/react-devtools\n```\n\n```tsx\n// App.tsx\nimport { DevToolsProvider } from '@visual-agentic-dev/react-devtools';\n\nfunction App() {\n  return (\n    \u003cDevToolsProvider enabled={process.env.NODE_ENV === 'development'}\u003e\n      \u003cYourApp /\u003e\n    \u003c/DevToolsProvider\u003e\n  );\n}\n```\n\n\u003e **Note for React 19+**: You must also configure the build plugin. See [Build Tool Configuration](#4-configure-build-plugin-required-for-react-19) above.\n\n### 5. Install Chrome Extension\n\n1. Open Chrome and visit `chrome://extensions/`\n2. Enable \"Developer mode\"\n3. Click \"Load unpacked\"\n4. Select the `packages/extension/dist` directory\n\n---\n\n## Usage\n\n### 1. Configure Agent\n\n1. Open the extension sidebar.\n2. Click the **Settings** (⚙️) icon.\n3. Select your preferred agent (e.g., `ccr code` or `claude`).\n4. The terminal session will automatically reset and switch to the selected agent.\n\n### 2. Start Developing\n\n1. Start your React development server\n2. Start the Bridge Server\n3. Open Chrome and visit localhost\n4. Click the extension icon to open the sidebar (it will automatically identify the project path and restore history state)\n5. Click the 🔍 button or use the shortcut `Cmd + Shift + S` to select page elements\n6. Describe your modification requirements in the chat box\n\n## Troubleshooting\n\n### `Error: posix_spawnp failed` when starting `vdev-server`\n\nThis is a known [node-pty issue](https://github.com/microsoft/node-pty/issues/845) where the `spawn-helper` binary lacks execute permissions. Fix it by running:\n\n```bash\nchmod +x /your-path/pnpm/global/5/.pnpm/node-pty@1.1.0/node_modules/node-pty/prebuilds/darwin-arm64/spawn-helper\n```\n\n\u003e Replace `/your-path/` with your actual pnpm global store path. You can find it by running `pnpm store path`.\n\n## Package Structure\n\n- `@visual-agentic-dev/react-devtools` [![version](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fbrucetoo%2Fvisual-agentic-dev%2Fmain%2Fpackages%2Freact-devtools%2Fpackage.json\u0026query=%24.version\u0026label=sdk)](https://github.com/brucetoo/visual-agentic-dev/blob/main/packages/react-devtools/package.json)\n- `@visual-agentic-dev/bridge-server` [![version](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fbrucetoo%2Fvisual-agentic-dev%2Fmain%2Fpackages%2Fbridge-server%2Fpackage.json\u0026query=%24.version\u0026label=server)](https://github.com/brucetoo/visual-agentic-dev/blob/main/packages/bridge-server/package.json)\n- `visual-agentic-dev-extension` [![version](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fbrucetoo%2Fvisual-agentic-dev%2Fmain%2Fpackages%2Fextension%2Fpackage.json\u0026query=%24.version\u0026label=extension)](https://github.com/brucetoo/visual-agentic-dev/blob/main/packages/extension/package.json)\n\n## Contributing\n\nWe love contributions! Please read our [Contributing Guide](CONTRIBUTING.md) to get started.\n\n## License\n\n© 2026 Bruce Too\n\nLicensed under PolyForm Shield 1.0.0\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrucetoo%2Fvisual-agentic-dev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrucetoo%2Fvisual-agentic-dev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrucetoo%2Fvisual-agentic-dev/lists"}