brucetoo/visual-agentic-dev: Lingkungan pengembangan browser mendalam yang dirancang untuk memungkinkan pengembang menyelesaikan modifikasi kode, debugging, dan interaksi baris perintah tanpa meninggalkan browser. – Beragampengetahuan

Lingkungan pengembangan browser yang mendalam yang memungkinkan pengembang mengklik elemen React di browser, menjelaskan persyaratan melalui obrolan beragampengetahuan, dan membiarkan Agentic CLI secara otomatis melakukan modifikasi kode.

• 🎯 Lokasi sumber konfigurasi nol: Gunakan React Fiber untuk secara otomatis mengidentifikasi lokasi kode sumber tanpa memasukkan atribut berlebihan dalam kode bisnis.
• 📂 Pengembangan paralel multi-proyek: Secara otomatis mengidentifikasi proyek yang dimiliki Tab saat ini dan secara cerdas beralih ke sesi terminal yang sesuai.
• 🤖 Registri proksi dinamis: Arsitektur skalabel yang mendukung beberapa agen AI (Claude Code, CCR, dll.) dengan kemampuan deteksi kesiapan dinamis.
• 🖱️ Modifikasi elemen batch: Mendukung pemilihan beberapa elemen halaman dan mengirimkannya ke agen untuk modifikasi batch.
• ⌨️ Jalan pintas yang nyaman: Akses cepat Cmd + Shift + S (Mac) atau Ctrl + Shift + S (Windows/Linux).
• 🛠 Integrasi terminal bawaan: Terminal yang sangat terintegrasi dengan fungsi seperti retensi sesi, pemulihan riwayat, dan peralihan konteks cerdas.

Deskripsi tugas demo: Tambahkan item tugas lain, status belum selesai, nama tugas adalah “Hei, ini baru”, seperti item baru ini untuk menampilkan kotak dialog dan ucapkan “Anda klik saya”

# Global install (Recommended)
npm install -g @visual-agentic-dev/bridge-server

# Start server
vdev-server

npm install @visual-agentic-dev/react-devtools

// App.tsx
import { DevToolsProvider } from '@visual-agentic-dev/react-devtools';

export default function App() {
  return (
    <DevToolsProvider enabled={process.env.NODE_ENV === 'development'}>
      <YourApp />
    </DevToolsProvider>
  );
}

# Build and run
pnpm --filter @visual-agentic-dev/bridge-server build
node packages/bridge-server/bin/vdev-server.js

Cukup instal SDK dan perkenalkan Penyedia ke dalam Aplikasi Anda.

# In your React project
npm install /path/to/visual-agentic-dev/packages/react-devtools

// App.tsx
import { DevToolsProvider } from '@visual-agentic-dev/react-devtools';

function App() {
  return (
    <DevToolsProvider enabled={process.env.NODE_ENV === 'development'}>
      <YourApp />
    </DevToolsProvider>
  );
}

1. Buka Chrome dan kunjungi chrome://extensions/
2. Aktifkan “Mode Pengembang”
3. Klik “Muat dan Buka zip”
4. memilih packages/extension/dist Daftar isi

1. Buka bilah sisi ekstensi.
2. klik mendirikan (⚙️) ikon.
3. Pilih agen pilihan Anda (mis. ccr code atau claude).
4. Sesi terminal akan secara otomatis diatur ulang dan beralih ke agen yang dipilih.

1. Mulai server pengembangan React Anda
2. Mulai server jembatan
3. Buka Chrome dan kunjungi localhost
4. Klik ikon ekstensi untuk membuka beragampengetahuan (jalur proyek akan otomatis dikenali dan status historis dipulihkan)
5. Klik tombol 🔍 atau gunakan pintasan Cmd + Shift + S Pilih elemen halaman
6. Jelaskan kebutuhan modifikasi Anda di kotak obrolan

• @visual-agentic-dev/react-devtools – React SDK (lokasi sumber runtime)
• @visual-agentic-dev/bridge-server – Server WebSocket (hubungkan browser dan Claude CLI)
• visual-agentic-dev-extension – Ekstensi Chrome (UI bilah sisi)

Kami senang berkontribusi! Baca pedoman kontribusi kami untuk memulai.

© 2026 Bruce Tu

Berlisensi di bawah PolyForm Shield 1.0.0