Me cansé de pelear con mi IDE
Todos los días lo mismo. abrir VS Code. abrir una terminal. abrir otra terminal. abrir el navegador. organizar ventanas. perder la pista de qué terminal ejecuta qué. ir y venir cien veces entre el código, la IA y la vista previa
Así que simplemente construí lo mío
El IDE ha muerto, larga vida al AIDE
AIDE significa AI-Integrated Development Environment. los IDEs tradicionales fueron construidos para un mundo donde los humanos escriben cada línea de código. pero ya no trabajo así
Mi flujo de trabajo ahora: abrir una terminal, decirle a Claude lo que necesito, revisar lo que escribe, verificar el resultado en el navegador. ¿el editor de código? lo miro de vez en cuando. quizás para entender un tipo o rastrear un bug
Así que vbcdr invierte la disposición tradicional. las terminales y las vistas previas del navegador ocupan el escenario principal. El editor Monaco sigue ahí cuando lo necesitas, pero es intencionalmente secundario
Terminal primero en todo
El panel de terminal es el corazón del sistema. xterm.js con renderizado WebGL para que sea ultra fluido. cada proyecto tiene múltiples pestañas de terminal - una para tu agente de IA, otras para servidores de desarrollo, bases de datos, lo que necesites
La terminal de IA se crea automáticamente cuando cambias de proyecto. porque en un flujo de trabajo de vibe coding el agente siempre está corriendo
Construido con node-pty para acceso nativo al shell. tu shell real, tu entorno real, tu PATH real. no una terminal falsa sandboxeada
Búsqueda en terminal con resaltado, botones de limpiar/reiniciar y scroll hacia abajo. Shift+Enter inserta saltos de línea en el campo de entrada del terminal LLM sin enviar, lo cual suena insignificante pero hace una diferencia enorme cuando escribes prompts de múltiples líneas
Puedes arrastrar archivos directamente a la terminal para contexto rápido. suelta una imagen y se adjunta automáticamente al LLM vía portapapeles. se acabó copiar y pegar rutas de archivos
┌──────────────────────────┬──────────────┐│ │ Git Graph ││ Navegador o Editor │ ││ ├──────────────┤│ │ LLM ││ Dev 1 │ Dev 2 │ Terminal │└──────────────────────────┴──────────────┘
Navegador integrado con aislamiento por proyecto
Cada proyecto tiene su propio navegador integrado con aislamiento de almacenamiento por proyecto. se acabaron las cookies filtrándose entre proyectos. cada uno corre en su propia partición webview de Electron
Me conecté al Chrome DevTools Protocol para obtener monitoreo de red y captura de consola sin construir instrumentación personalizada. el panel del navegador tiene tres pestañas de devtools: Console, Network y Passwords
El inspector de red muestra detalles de solicitudes expandibles con headers, tipo y tamaños de respuesta precisos. los errores de consola y fallos de red tienen un botón de "enviar al LLM" con un solo clic que los reenvía directamente a tu terminal de IA activa. ¿ves un error 500? un clic y tu agente ya está debuggeando
El gestor de contraseñas detecta formularios de inicio de sesión automáticamente. inyecta un script que vigila campos de contraseña con MutationObserver, captura envíos de formularios y ofrece guardar credenciales cifradas con la API nativa safeStorage de Electron
La próxima vez que visites esa página se completa automáticamente
La emulación de dispositivos cambia entre viewports de escritorio, iPad y móvil con los user agents apropiados. Google OAuth se redirige a tu navegador del sistema porque las webviews de Electron y OAuth simplemente no se llevan bien
11 temas porque por qué no
Ok puede que me haya pasado un poco aquí. Dracula, Catppuccin, Nord, Tokyo Night, Gruvbox, One Dark, Solarized y más. cada uno con variantes clara y oscura
Paso mucho tiempo mirando esta cosa. debería verse bien
Estado multi-proyecto que realmente funciona
Esta fue la decisión arquitectónica de la que más orgulloso estoy. cada store de Zustand usa un patrón Record<projectId, StateType>. cambiar de proyecto muestra instantáneamente las terminales, pestañas del navegador, árbol de archivos, estado del editor e historial de git de ese proyecto
Nada compartido. Nada se filtra. haz clic en una pestaña de proyecto y todo tu contexto cambia
Las pestañas del navegador se persisten a disco con un debounce de 500ms para no machacar el sistema de archivos. los procesos de terminal siguen vivos en segundo plano. vuelve y todo está exactamente donde lo dejaste
El grafo git que habla con tu IA
El panel de git renderiza un grafo de commits basado en carriles usando SVG. cada rama tiene su propio carril con un color. los merge commits tienen nodos más grandes. curvas de Bézier conectan las relaciones padre-hijo entre carriles
Pulsa "Commit" y envía /commit a tu terminal de IA activa. pulsa "New Feature", escribe una descripción y crea una rama feature/tu-descripcion-en-kebab-case correctamente formateada a través de tu agente
El árbol de git no es solo visualización. es una interfaz de comandos que se comunica a través de tu agente de IA
Electron, Zustand y una capa IPC limpia
Electron 34 para escritorio multiplataforma. React 18 + Tailwind CSS 4 para la UI. electron-vite para builds. Zustand para el estado porque Redux es excesivo cuando tus stores son así de limpios
La capa IPC es la columna vertebral. seis módulos de handlers (projects, terminal, filesystem, git, browser, passwords) cada uno gestiona su propio dominio. servicios como el gestor PTY, el file watcher y el servicio git hacen el trabajo real. separación limpia entre lo que el usuario ve y lo que el SO hace
La vigilancia de archivos usa chokidar con filtrado compatible con gitignore. el árbol de archivos cachea y aplica debounce a las actualizaciones. Monaco recibe sincronización de archivos en vivo para que los cambios externos de tu agente de IA escribiendo archivos aparezcan en tiempo real
Dirigir es mejor que teclear
Construir herramientas para desarrolladores es adictivo y humillante. crees que sabes lo que quieres hasta que lo usas una semana y te das cuenta de que la disposición necesita cambiar, la terminal necesita búsqueda, el navegador necesita gestión de contraseñas y el grafo git necesita ser interactivo
Mayor lección: en un flujo de trabajo AI-first, el entorno de desarrollo debería estar optimizado para dirigir, no para teclear. gran espacio de terminal. acceso fácil al navegador. contexto git de un vistazo. el editor de código ahora es solo un visor de referencia
vbcdr no intenta reemplazar VS Code. está construido para un flujo de trabajo completamente diferente, uno donde pasas más tiempo dirigiendo una IA que editando archivos tú mismo
Eso es un AIDE. no un IDE con IA pegada encima. una herramienta fundamentalmente diferente para una forma fundamentalmente diferente de construir software
Qué viene después
Aún en la hoja de ruta:
- Gestor visual de skills - explorar, activar/desactivar y configurar skills y comandos slash del agente LLM desde un panel de UI en lugar de gestionar archivos de configuración
- Rediseño de contraseñas y favoritos del navegador - el sistema actual necesita un rediseño para mejor UX y fiabilidad
- Hacer clic en archivos y carpetas en el árbol del proyecto para enviarlos a tu agente como contexto
- Dar a la IA acceso al navegador webview para que pueda manipular y probar la vista previa
- Builds para Windows y Linux
- Muchas más ideas
Código abierto, licencia MIT, y claramente un trabajo en progreso. la primera versión está disponible para macOS Apple Silicon. siéntete libre de contribuir en GitHub
Stay Updated
Get notified about new posts on automation, productivity tips, indie hacking, and web3.
No spam, ever. Unsubscribe anytime.
