cli

README

ViberCode CLI

🚀 Generate Go APIs with Clean Architecture + Visual Editor + AI Chat

English • Español • Documentation

---

🚀 ViberCode CLI es una herramienta de línea de comandos para generar APIs Go con arquitectura limpia, incluyendo un editor visual React y chat AI integrado.

🌟 Características Principales

🎨 Modo Vibe Completo (¡NUEVO!)

vibercode vibe

Un solo comando que inicia:

• 📡 Servidor WebSocket en tiempo real
• 🎨 Editor React Visual con interfaz moderna
• 💬 Chat AI integrado con Claude
• 🔄 Sincronización en vivo entre componentes
• 🌐 Apertura automática del navegador

🔌 Servidor MCP (¡NUEVO!)

vibercode mcp

Integración con agentes IA:

• 🤖 Compatible con Claude Desktop y otros clientes MCP
• 🎨 Control remoto del editor visual
• ⚡ Generación de código via agentes
• 🔄 Actualización de componentes en tiempo real

⚡ Generación de Código

• 🏗️ APIs Go completas con arquitectura limpia
• 📊 Recursos CRUD con modelos, handlers, servicios y repositorios
• 🗄️ Soporte multi-database (PostgreSQL, MySQL, SQLite, MongoDB)
• 🐳 Docker-ready con auto-generación de docker-compose

🚀 Instalación Rápida

Opción 1: Script Automático

git clone <repo>
cd vibercode-cli-go
./install.sh

Opción 2: Manual

go build -o vibercode .
sudo cp ./vibercode /usr/local/bin/

Verificar Instalación

vibercode --help
which vibercode  # Debería mostrar: /usr/local/bin/vibercode

🎯 Uso Rápido

Modo Completo (Recomendado)

# ¡Todo en uno! - Editor + WebSocket + Chat AI
vibercode vibe

# Modo enfocado en componentes
vibercode vibe component

Servicios Individuales

# Solo servidor WebSocket
vibercode ws

# Solo servidor MCP
vibercode mcp

# Solo servidor HTTP API
vibercode serve

Generación de Código

# API completa
vibercode generate api

# Recurso individual
vibercode generate resource

📋 Comandos Disponibles

Comando	Descripción	Estado
vibercode vibe	🎨 Modo completo - Editor + Chat + WebSocket	✅ Nuevo
vibercode mcp	🔌 Servidor MCP para agentes IA	✅ Nuevo
vibercode ws	📡 Servidor WebSocket para React Editor	✅
vibercode serve	🌐 Servidor HTTP API	✅
vibercode generate api	⚡ Generar API Go completa	✅
vibercode generate resource	📦 Generar recurso CRUD	✅
vibercode schema	📋 Gestionar esquemas de recursos	✅
vibercode run	🚀 Ejecutar proyecto generado	✅

🛠️ Flujo de Desarrollo

1. Modo Desarrollo Completo

$ vibercode vibe

🎨 Welcome to VibeCode Full Mode
📡 Starting WebSocket server on port 3001...
🎨 Starting React Editor...
📂 Found editor at: /path/to/vibercode/editor
🌐 Opening browser...
✅ VibeCode is ready!

💬 Viber AI: ¡Hola! ¿En qué puedo ayudarte?

2. Desarrollo Visual + Chat

• 🎨 Arrastra componentes en el editor visual
• 💬 Chatea con AI: "Agrega un botón azul aquí"
• 🔄 Ve cambios en tiempo real en el navegador
• ⚡ Genera código Go desde el esquema visual

3. Integración con Agentes IA

# Terminal 1: Servidor MCP
vibercode mcp

# Terminal 2: Modo vibe
vibercode vibe

# Ahora Claude Desktop puede controlar tu editor

🎨 Editor Visual

El editor React incluye:

• 🧩 Componentes atomicos (Button, Text, Input, etc.)
• 🏗️ Componentes moleculares (Card, Form, Navigation)
• 🌊 Componentes organizacionales (Hero, Layout, Dashboard)
• 🎨 Sistema de temas dinámico
• 📱 Vista responsive (Desktop, Tablet, Mobile)
• 🔄 Sincronización en tiempo real con WebSocket

🤖 Integración IA

Chat Interactivo

💬 Usuario: "Agrega un botón rojo en la esquina superior derecha"
🤖 Viber AI: ¡Perfecto! He agregado un botón rojo en la posición (500, 50).

Agentes MCP

🔌 Claude Desktop → MCP → ViberCode → Editor React
                    ↓
                   Chat AI ← WebSocket ← Live Updates

📊 Arquitectura

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   AI Agents     │    │   ViberCode     │    │   React Editor  │
│   (Claude MCP)  │◄──►│   CLI Server    │◄──►│   (localhost)   │
└─────────────────┘    └─────────────────┘    └─────────────────┘
                                │
                                ▼
                       ┌─────────────────┐
                       │   Generated     │
                       │   Go API Code   │
                       └─────────────────┘

🔧 Configuración

Variables de Entorno

# Para funcionalidad AI completa
export ANTHROPIC_API_KEY=your_api_key

# Para debug detallado
export VIBE_DEBUG=true

# Puertos personalizados (opcional)
export VIBE_WS_PORT=3001
export VIBE_EDITOR_PORT=5173

Requisitos del Sistema

• ✅ Go 1.19+ para el CLI
• ✅ Node.js 16+ para el editor React
• ✅ pnpm/npm/yarn para dependencias
• 🎯 ANTHROPIC_API_KEY para AI (opcional)

🧪 Testing

# Probar modo completo
./test-vibe-full.sh

# Probar servidor MCP
./test-mcp-server.sh

# Verificar conexiones
curl http://localhost:3001/health   # WebSocket
curl http://localhost:5173         # React Editor

🐛 Troubleshooting

Editor no inicia

⚠️  Could not start React editor
💡 You can manually start it with: cd vibercode/editor && pnpm dev

Puerto ocupado

❌ WebSocket server error: address already in use
# Solución:
lsof -ti:3001 | xargs kill -9

Dependencias faltantes

📦 Installing dependencies...
❌ failed to install dependencies
# Solución:
npm install -g pnpm

📚 Documentación Completa

🇪🇸 Español

• 📖 Documentación Completa - Guía completa en español
• 🚀 Inicio Rápido - Instalación y primeros pasos
• 💻 Comandos CLI - Referencia completa
• 🚨 Solución de Problemas - Errores comunes

🇺🇸 English

• 📖 Complete Documentation - Full English guide
• 🚀 Quick Start - Installation and first steps
• 💻 CLI Commands - Complete reference
• 🚨 Troubleshooting - Common errors

📂 Archivos Técnicos

• 🎨 CLAUDE.md - Documentación técnica para Claude Code
• 📋 Documentos Archivados - Documentación anterior

🤝 Contribuir

¡Nos encanta recibir contribuciones de la comunidad!

🚀 Formas de Contribuir

• 🐛 Reportar bugs usando los issue templates
• ✨ Proponer nuevas funcionalidades
• 📝 Mejorar documentación
• 🧹 Limpiar código y optimizaciones

📋 Proceso Rápido

1. Fork el repositorio
2. Crear rama: git checkout -b feature/amazing-feature
3. Commit: git commit -m 'feat: add amazing feature'
4. Push: git push origin feature/amazing-feature
5. Crear Pull Request

Ver CONTRIBUTING.md para guías detalladas.

🌟 Contributors

📄 Licencia

Este proyecto está bajo la licencia MIT. Ver LICENSE para más detalles.

🔒 Seguridad

Para reportar vulnerabilidades de seguridad, ver SECURITY.md.

---

🚀 ¡Construye APIs Go con superpoderes visuales!