Layered Code

Una herramienta de desarrollo web asistida por IA para crear, modificar y desplegar código mediante conversaciones en lenguaje natural.

GitHub

Prueba este MCPPatrocinado

Documentación

⚠️ Trabajo en progreso ⚠️

Este proyecto se encuentra actualmente en desarrollo activo. Las características, API y documentación pueden cambiar con frecuencia. Aunque agradecemos comentarios y contribuciones (ver Contribuir), ten en cuenta que este software aún no está listo para uso en producción. Este aviso se eliminará cuando alcancemos la versión 1.0.

🔍 ¿Qué es Layered Code?

Layered Code transforma el desarrollo web en un flujo de trabajo fluido de conversación a implementación. Conversas con tu asistente de IA preferido a través de herramientas compatibles con MCP como Claude Desktop, describiendo lo que quieres construir en lenguaje natural. La IA crea y modifica tu código en tiempo real, mientras que los marcos de desarrollo modernos como Vite y Next.js proporcionan reemplazo instantáneo de módulos en caliente para mostrar los cambios automáticamente. Cuando estés satisfecho con los resultados, solo pide a la IA que confirme tus cambios en un repositorio git y despliegue directamente en servidores de producción, todo sin memorizar comandos complejos ni navegar por herramientas de desarrollo intrincadas.

Mira una descripción general rápida de Layered Code en acción

Método de interacción principal:

🗣️ Conversaciones en lenguaje natural con asistentes de IA como Claude Desktop
🔌 Integración MCP que proporciona a la IA acceso directo a los archivos de tu proyecto en tu máquina local
🎯 Desarrollo impulsado por intención: describe tus objetivos y la IA se encarga de la implementación técnica
🚀 Integración de Git para despliegues automáticos: confirma cambios y despliega a producción mediante comandos conversacionales

Ejemplo de conversación:

Usuario: "Quiero crear una página web básica con un tema oscuro para describir mi nuevo proyecto de IA llamado 'SmartFlow'. Debe tener una sección hero limpia con el nombre del proyecto, una breve descripción y algunas características clave enumeradas a continuación."

La IA, equipada con las herramientas MCP de Layered Code, puede:

Crear la estructura HTML con marcado semántico
Generar CSS para un tema oscuro moderno con contraste adecuado
Organizar archivos y recursos del proyecto automáticamente
Configurar diseño responsivo para móvil y escritorio

Usuario: "¡Se ve genial! ¿Puedes agregar una sección de contacto al final y hacer que las tarjetas de características tengan un efecto hover sutil?"

La IA sin problemas:

Actualiza el HTML para incluir una sección de contacto
Mejora el CSS con animaciones hover suaves
Tu servidor de desarrollo se actualiza automáticamente para mostrar los cambios

Usuario: "¡Perfecto! Ahora confirma estos cambios y despliega a producción."

La IA maneja el control de versiones y el despliegue:

Confirma cambios con un mensaje descriptivo
Activa tu canal de despliegue configurado
Confirma el despliegue exitoso en tu servidor de producción

Aunque hay una interfaz CLI disponible para acceso directo a las herramientas, la experiencia conversacional de IA a través de MCP es donde Layered Code realmente brilla: te permite enfocarte en lo que quieres construir en lugar de cómo construirlo.

🎯 Motivación

Layered Code proporciona un enfoque abierto para el desarrollo asistido por IA: tus indicaciones, tus proveedores, tu elección.

🔓 Gratis y de código abierto para siempre: Layered Code siempre permanecerá gratuito y de código abierto
💻 Soporte multiplataforma: Funciona en macOS, Windows y Linux
🔍 Sin magia oculta: Sin indicaciones secretas ocultas a los usuarios que hacen cosas misteriosas que no entienden
🛠️ Agnóstico tecnológicamente: Funciona con cualquier lenguaje, marco o entorno de desarrollo
🚀 Sin bloqueo de proveedor: Usa cualquier proveedor de hosting, entorno de desarrollo o cadena de herramientas

📦 Instalación

Opción 1: macOS/Linux mediante Homebrew (Recomendado)

brew update
brew tap layered-flow/layered-code
brew install layered-code

Opción 2: Script de instalación (macOS/Linux)

Para instalación en todo el sistema (recomendado):

curl -fsSL https://raw.githubusercontent.com/layered-flow/layered-code/main/scripts/install.sh | sudo bash

Esto instala los binarios en /usr/local/bin para acceso fácil desde cualquier lugar.

Si prefieres instalar en el directorio actual en su lugar, omite sudo:

curl -fsSL https://raw.githubusercontent.com/layered-flow/layered-code/main/scripts/install.sh | bash

Nota: Este script descarga un binario autocontenido con ripgrep incluido.

Opción 3: Binarios precompilados

Descarga el archivo apropiado para tu plataforma desde la página de lanzamientos de GitHub. Cada archivo contiene tanto el binario layered-code como un binario rg (ripgrep) incluido:

macOS (Intel): layered-code_Darwin_x86_64.tar.gz
macOS (Apple Silicon): layered-code_Darwin_arm64.tar.gz
Linux (x86_64): layered-code_Linux_x86_64.tar.gz
Linux (ARM64): layered-code_Linux_arm64.tar.gz
Windows (x86_64): layered-code_Windows_x86_64.zip
Windows (ARM64): layered-code_Windows_arm64.zip (usa binario ripgrep x64 mediante emulación)

Pasos de configuración:

macOS/Linux:

Extrae el archivo: tar -xzf layered-code_*.tar.gz
Haz que ambos binarios sean ejecutables: chmod +x layered-code rg
Mueve ambos binarios al mismo directorio:
- Para instalación de usuario: mkdir -p ~/bin && mv layered-code rg ~/bin/
- Para instalación en todo el sistema: sudo mv layered-code rg /usr/local/bin/
Asegúrate de que la ubicación esté en tu PATH para acceso fácil

Windows:

Extrae el archivo zip (contiene layered-code.exe y rg.exe)
Mueve ambos ejecutables a una ubicación conveniente (por ejemplo, C:\Users\YourUsername\bin\)
Agrega el directorio a tu variable de entorno PATH:
- Abre "Variables de entorno" en Propiedades del sistema
- Agrega el directorio que contiene ambos ejecutables a tu PATH

Importante: Mantén ambos binarios layered-code y rg (ripgrep) en el mismo directorio para un funcionamiento adecuado.

✨ Inicio rápido con Claude Desktop

Aunque hay planes para admitir modelos de código abierto a través de Ollama, Claude Desktop actualmente proporciona el mejor soporte para el Protocolo de Contexto de Modelo del que depende Layered Code.

Instala Claude Desktop
Habilita el Modo Desarrollador:
- Abre Claude Desktop
- Ve a Configuración
- Navega a la pestaña "Desarrollador"
- Habilita "Modo Desarrollador" si aún no está habilitado
Instala layered-code: Sigue las instrucciones de Instalación anteriores y anota la ruta a tu binario
Configura el servidor MCP:
- Abre Configuración de Claude Desktop → Desarrollador → Editar Config
- Agrega a claude_desktop_config.json:

Configurar el servidor MCP en Claude Desktop

Agrega lo siguiente a tu claude_desktop_config.json (en Configuración → Desarrollador → Editar Config), ajustando la ruta command según corresponda para tu instalación y plataforma:

Plataforma/Método de instalación	Ejemplo de valor de "command"
macOS/Linux (Homebrew)	`layered-code`
macOS/Linux (Manual/Binario)	`/usr/local/bin/layered-code`
Windows	`C:\\Users\\YourUsername\\bin\\layered-code.exe`

Nota para Windows: Usa la ruta completa con dobles barras invertidas (\\) en el valor "command".

Ejemplo de configuración:

{
  "globalShortcut": "",
  "mcpServers": {
    "layered-code": {
      "command": "<see table above>",
      "args": ["mcp_server"]
    }
  }
}

Reinicia Claude Desktop por completo (Windows puede requerir que "finalices la tarea" en cualquier tarea en segundo plano de Claude)
Verifica: Busca "layered-code" en el menú de herramientas de Claude

🔧 Opcional: Directorio de aplicaciones personalizado

Por defecto, Layered Code usa ~/LayeredApps como directorio para tus aplicaciones. Para usar un directorio personalizado:

Para MCP (Claude Desktop): Agrega una sección env a tu configuración:

{
  "globalShortcut": "",
  "mcpServers": {
    "layered-code": {
      "command": "layered-code",
      "args": ["mcp_server"],
      "env": {
        "LAYERED_APPS_DIRECTORY": "~/MyCustomAppsFolder"
      }
    }
  }
}

Para uso de CLI: Establece la variable de entorno LAYERED_APPS_DIRECTORY en tu shell:

export LAYERED_APPS_DIRECTORY="~/MyCustomAppsFolder"
layered-code tool lc_apps_list

🔒 Seguridad

Layered Code mantiene la seguridad al configurar directorios de aplicaciones personalizados:

Por seguridad, las rutas se validan para asegurarse de que estén dentro del directorio de inicio del usuario
Se permiten rutas relativas y se resuelven relativas al directorio de inicio del usuario

🖥️ Uso de CLI

Usa layered-code directamente desde la línea de comandos:

# Start MCP server
layered-code mcp_server

# List apps
layered-code tool lc_apps_list

# Get version information
layered-code version
layered-code -v
layered-code --version

# Get help and usage information
layered-code help
layered-code -h
layered-code --help

Comandos disponibles:

mcp_server - Inicia el servidor del Protocolo de Contexto de Modelo para la integración con Claude Desktop
tool - Ejecuta varias herramientas y utilidades (usa con subcomandos como a continuación)

Herramientas de gestión de archivos:
- tool lc_apps_list - Lista todas las aplicaciones disponibles en el directorio ~/LayeredApps
- tool lc_file_list - Lista archivos y directorios dentro de una aplicación con metadatos opcionales (profundidad máxima: 10,000 niveles)
- tool lc_text_search - Busca patrones de texto en archivos dentro de un directorio de aplicación usando ripgrep
- tool lc_file_read - Lee el contenido de un archivo dentro de un directorio de aplicación
- tool lc_file_write - Escribe o crea un archivo dentro de un directorio de aplicación
- tool lc_file_edit - Edita un archivo realizando operaciones de buscar y reemplazar
- tool lc_file_move - Mueve o renombra un archivo dentro de un directorio de aplicación
- tool lc_file_delete - Elimina un archivo dentro de un directorio de aplicación
- tool lc_file_copy - Copia un archivo dentro de un directorio de aplicación
- tool lc_folder_delete - Elimina una carpeta y todo su contenido dentro de un directorio de aplicación (operación destructiva)
- tool lc_chrome_visit - Visita una URL usando el navegador Chrome y recupera el contenido de la página después de que se cargue JavaScript
Herramientas de Vite:
- tool vite_app_create - Crea una nueva aplicación Vite con varias plantillas (React, Vue, Svelte, etc.)
Herramientas de Next.js:
- tool nextjs_app_create - Crea una nueva aplicación Next.js con TypeScript (predeterminado), JavaScript, Tailwind o plantillas de App Router
  - Banderas de CLI: --src-dir (usar directorio src, predeterminado: true), --import-alias (predeterminado: @/*), --turbopack (predeterminado: true)
  - Ejemplo: tool nextjs_app_create myapp typescript --src-dir --import-alias="~/"
Herramientas de gestor de paquetes:
- tool pnpm_install - Instala dependencias usando pnpm (preferido) o npm
- tool pnpm_add - Agrega uno o más paquetes usando pnpm (preferido) o npm
  - Paquete único: pnpm_add myapp express
  - Múltiples paquetes: pnpm_add myapp express cors @types/node
- tool pnpm_pm2 - Gestiona procesos de Node.js con PM2
  - Comandos: start <app>, stop <app|all>, restart <app|all>, delete <app|all>, list, logs [app] [flags]
  - Detecta automáticamente scripts de dev/start desde package.json
  - Usa ecosystem.config.js si está presente
  - Instala PM2 automáticamente si no está disponible
  - El comando logs incluye --nostream por defecto (muestra las últimas 15 líneas y sale)
  - Se pueden pasar banderas adicionales, por ejemplo, logs myapp --lines 100 para mostrar más líneas
Herramientas de JavaScript/TypeScript:
- tool lc_js_lint - Ejecuta análisis de ESLint en archivos JavaScript/TypeScript con corrección automática opcional
  - Ejecuta ESLint en el directorio de aplicación especificado y devuelve resultados en formato JSON
  - Uso: lc_js_lint <app_name> [--fix] [--config=<config_file>] <files...>
  - Opciones:
    - --fix: Corrige automáticamente problemas que se pueden corregir
    - --config=<file>: Usa un archivo de configuración de ESLint específico
    - --help, -h: Muestra mensaje de ayuda
  - Notas importantes:
    - Los archivos deben ser rutas relativas (no se permiten rutas absolutas ni ..)
    - El archivo de configuración debe ser relativo al directorio de la aplicación
    - Solo se permiten las opciones --config y --fix por seguridad
  - Ejemplos:
    - Archivo único: lc_js_lint myapp src/index.js
    - Lint y corregir: lc_js_lint myapp --fix src/index.js src/app.js
    - Con patrones glob: lc_js_lint myapp "src/**/*.js" "tests/**/*.js"
    - Corregir con configuración: lc_js_lint myapp --fix --config=.eslintrc.json src/index.js
Herramientas de indicaciones:
- tool lc_prompt_list - Lista todas las indicaciones disponibles con IDs numéricos, nombres, versiones y descripciones
  - Solo muestra la versión más alta de cada indicación
  - Usa --help para más información
- tool lc_prompt_read - Lee el contenido completo de una indicación por ID numérico, con versión opcional
  - Importante: Los LLM que usan MCP deben leer automáticamente la indicación ID '1' (Principios Generales) al inicio de cada conversación
  - Ejemplo (última versión): lc_prompt_read 1
  - Ejemplo con versión: lc_prompt_read 1:2
  - Usa --help para sintaxis y ejemplos detallados Herramientas de Git:
tool git_status - Muestra el estado del árbol de trabajo de un repositorio git
tool git_diff - Muestra los cambios entre confirmaciones, confirmación y árbol de trabajo, etc.
tool git_commit - Crea una nueva confirmación con los cambios preparados
tool git_log - Muestra los registros de confirmaciones
tool git_branch - Lista, crea o elimina ramas
tool git_add - Agrega el contenido de archivos al área de preparación
tool git_restore - Restaura los archivos del árbol de trabajo
tool git_stash - Guarda temporalmente los cambios en un directorio de trabajo sucio
tool git_push - Actualiza las referencias remotas junto con los objetos asociados
tool git_pull - Obtiene e integra desde otro repositorio o rama local
tool git_init - Inicializa un nuevo repositorio git
version, -v, --version - Muestra la versión actual de layered-code
help, -h, --help - Muestra información de uso y comandos disponibles

🏗️ Compilación desde el Código Fuente

Para compilar Layered Code desde el código fuente:

# Clone the repository
git clone https://github.com/layered-flow/layered-code.git
cd layered-code

# Build with make (downloads ripgrep binaries automatically)
make build

# Or build for all platforms
make build-all

# Run tests
make test

# Verify installation
layered-code

🧪 Ejecución de Pruebas

Ejecuta el conjunto de pruebas para asegurarte de que todo funcione correctamente:

# Run all tests
go test ./...

# Run tests with verbose output
go test -v ./...

🤝 Contribuciones

¡Estamos entusiasmados con el potencial de las contribuciones de la comunidad! Si bien Layered Code está actualmente madurando hacia la versión 1.0, nos estamos enfocando en estabilizar la funcionalidad principal y las API. Durante esta fase, damos la bienvenida a tus ideas y comentarios a través de GitHub Issues, pero no aceptaremos solicitudes de extracción para asegurarnos de poder avanzar rápidamente y realizar los cambios necesarios que puedan romper la compatibilidad.

Una vez que alcancemos la versión 1.0 y la base sea sólida, estaremos encantados de abrirnos también a las solicitudes de extracción de la comunidad. Creemos que este enfoque centrado creará una mejor experiencia para todos a largo plazo.

No dudes en:

Abrir issues para compartir ideas y sugerencias
Reportar errores que encuentres
Hacer preguntas sobre el proyecto
Proporcionar comentarios sobre funciones y documentación

¡Gracias por tu comprensión e interés en el proyecto! 🙏

📝 Licencia

Este proyecto está licenciado bajo la Licencia MIT; consulta el archivo LICENSE.md para obtener más detalles.

Componentes de Terceros

Este software incluye componentes de terceros. Consulta THIRD-PARTY-LICENSES.md para conocer sus términos de licencia.