vbcdr bouwen: een AIDE voor developers die viben

Ik was het vechten met mijn IDE beu

Elke dag hetzelfde verhaal. VS Code openen. een terminal openen. nog een terminal openen. de browser openen. vensters schikken. uit het oog verliezen welke terminal wat draait. honderd keer heen en weer tabben tussen de code, de AI en de preview

Dus heb ik gewoon mijn eigen ding gebouwd

De IDE is dood, lang leve de AIDE

AIDE staat voor AI-Integrated Development Environment. traditionele IDEs werden gebouwd voor een wereld waarin mensen elke regel code zelf schrijven. maar zo werk ik niet meer

Mijn workflow nu: een terminal openen, tegen Claude zeggen wat ik nodig heb, bekijken wat het schrijft, het resultaat checken in de browser. de code-editor? daar werp ik soms een blik op. misschien om een type te begrijpen of een bug te traceren

Dus vbcdr draait de traditionele layout om. terminals en browser-previews nemen het hoofdpodium in. De Monaco-editor is er nog steeds wanneer je hem nodig hebt, maar hij staat bewust op de tweede plaats

Terminal-first in alles

Het terminalpaneel is het hart ervan. xterm.js met WebGL-rendering zodat het fluweel aanvoelt. elk project krijgt meerdere terminal-tabbladen - eentje voor je AI-agent, andere voor dev-servers, database-dingen, wat je maar nodig hebt

De AI-terminal wordt automatisch aangemaakt wanneer je van project wisselt. want in een vibe-coding-workflow draait de agent altijd

Gebouwd met node-pty voor native shell-toegang. je echte shell, je echte omgeving, je echte PATH. geen gesandboxte nep-terminal

Terminal-zoekfunctie met highlights, wis/herstart-knoppen en scroll-naar-beneden. Shift+Enter voegt nieuwe regels in het LLM-terminalinvoerveld in zonder te versturen, wat klein klinkt maar een enorm verschil maakt als je multi-line prompts schrijft

Je kunt bestanden rechtstreeks in de terminal slepen voor snelle context. drop een afbeelding en het koppelt automatisch aan de LLM via het klembord. geen bestandspaden meer kopieer-plakken

┌──────────────────────────┬──────────────┐
│                          │   Git Graph  │
│  Browser of Editor       │              │
│                          ├──────────────┤
│                          │   LLM        │
│  Dev 1  │  Dev 2         │   Terminal   │
└──────────────────────────┴──────────────┘

Ingebouwde browser met projectisolatie

Elk project krijgt zijn eigen geïntegreerde browser met opslagisolatie per project. geen cookies meer die lekken tussen projecten. elk project draait in zijn eigen Electron webview-partitie

Ik heb Chrome DevTools Protocol aangekoppeld om netwerkmonitoring en console-opvang te doen zonder eigen instrumentatie te hoeven bouwen. het browserpaneel heeft drie devtools-tabbladen: Console, Network en Passwords

De netwerkinspector toont uitklapbare aanvraagdetails met headers, type en nauwkeurige response-groottes. consolfouten en netwerkfouten hebben een één-klik "stuur naar LLM"-knop die ze rechtstreeks doorstuurt naar je actieve AI-terminal. zie je een 500-fout? klik één keer en je agent is al aan het debuggen

De wachtwoordmanager detecteert inlogformulieren automatisch. injecteert een script dat wachtwoordvelden in de gaten houdt met MutationObserver, formulierinzendingen opvangt en aanbiedt om inloggegevens versleuteld op te slaan met Electron's native safeStorage API

De volgende keer dat je die pagina bezoekt vult het automatisch in

Apparaatemulatie schakelt tussen desktop-, iPad- en mobiele viewports met de juiste user agents. Google OAuth wordt omgeleid naar je systeembrowser omdat Electron webviews en OAuth gewoon niet samengaan

11 thema's, want waarom niet

Ok ik ben hier misschien een beetje doorgeslagen. Dracula, Catppuccin, Nord, Tokyo Night, Gruvbox, One Dark, Solarized en meer. elk met lichte en donkere varianten

Ik staar veel naar dit ding. het moet er goed uitzien

Multi-project state die écht werkt

Dit was de architectuurbeslissing waar ik het meest trots op ben. elke Zustand-store gebruikt een Record<projectId, StateType>-patroon. van project wisselen toont direct de terminals, browser-tabbladen, bestandsboom, editor-state en git-geschiedenis van dat project

Niets gedeeld. Niets lekt. klik op een project-tabblad en je hele context wisselt

Browser-tabbladen worden met een debounce van 500ms naar schijf geschreven zodat je het bestandssysteem niet kapot beukt. terminalprocessen blijven op de achtergrond draaien. schakel terug en alles staat precies waar je het achterliet

Git graph die met je AI praat

Het git-paneel rendert een lane-gebaseerde commit-grafiek met SVG. elke branch krijgt zijn eigen baan met een kleur. merge-commits krijgen grotere nodes. bezier-curves verbinden ouder-kind-relaties over banen heen

Druk op "Commit" en het stuurt /commit naar je actieve AI-terminal. druk op "New Feature", typ een beschrijving en het maakt een netjes geformatteerde feature/jouw-beschrijving-in-kebab-case-branch aan via je agent

De git-boom is niet alleen visualisatie. het is een commando-interface die via je AI-agent communiceert

Electron, Zustand en een schone IPC-laag

Electron 34 voor cross-platform desktop. React 18 + Tailwind CSS 4 voor de UI. electron-vite voor builds. Zustand voor state omdat Redux overkill is als je stores zo schoon zijn

De IPC-laag is de ruggengraat. zes handler-modules (projects, terminal, filesystem, git, browser, passwords) beheren elk hun eigen domein. services zoals de PTY-manager, file watcher en git-service doen het echte werk. schone scheiding tussen wat de gebruiker ziet en wat het OS doet

Bestandsmonitoring gebruikt chokidar met gitignore-bewuste filtering. de bestandsboom cacht en debouncet updates. Monaco krijgt live bestandssynchronisatie zodat externe wijzigingen van je AI-agent die bestanden schrijft in real-time verschijnen

Sturen is beter dan typen

Developer tools bouwen is verslavend en confronterend. je denkt dat je weet wat je wilt totdat je het een week gebruikt en beseft dat de layout moet veranderen, de terminal zoekfunctionaliteit nodig heeft, de browser wachtwoordbeheer nodig heeft en de git-grafiek interactief moet zijn

Grootste inzicht: in een AI-first-workflow moet de ontwikkelomgeving geoptimaliseerd zijn voor sturen, niet voor typen. grote terminal-ruimte. makkelijke browser-toegang. git-context in één oogopslag. de code-editor is nu gewoon een referentieviewer

vbcdr probeert niet om VS Code te vervangen. het is gebouwd voor een compleet andere workflow, eentje waarbij je meer tijd besteedt aan het aansturen van een AI dan aan het bewerken van bestanden

Dat is wat een AIDE is. geen IDE met AI erop geplakt. een fundamenteel ander hulpmiddel voor een fundamenteel andere manier van software bouwen

Wat nu

Staat nog op de roadmap:

• Visuele skills-manager - bladeren door, in-/uitschakelen en configureren van LLM-agent-skills en slash-commando's vanuit een UI-paneel in plaats van configuratiebestanden te beheren
• Wachtwoord- & browserfavorieten-herziening - het huidige systeem heeft een herontwerp nodig voor betere UX en betrouwbaarheid
• Klik op bestanden en mappen in de projectboom om ze naar je agent te sturen voor eenvoudige context-invoer
• Geef de AI toegang tot de webview-browser zodat het de preview kan manipuleren en testen
• Windows- en Linux-builds
• Nog veel meer ideeën

Open source, MIT-licentie, en nog volop in ontwikkeling. eerste release is uit voor macOS Apple Silicon. voel je vrij om bij te dragen op GitHub