Configurar repo seguidorDeLotes desde plantilla
Some checks failed
build-and-deploy / build (push) Failing after 15s
build-and-deploy / deploy (push) Has been cancelled

- Actualizar hook de monitoreo para repo seguidorDeLotes
- Actualizar README con nombre y descripción del proyecto
- Agregar scripts de Chrome MCP y documentación
This commit is contained in:
2025-11-21 13:48:21 -06:00
parent 43bcf4a647
commit 654b5ae3f7
5 changed files with 322 additions and 3 deletions

110
.claude/CHROME_SETUP.md Normal file
View File

@@ -0,0 +1,110 @@
# Configuración de Chrome DevTools MCP para este proyecto
Este proyecto está configurado para usar su propia instancia de Chrome con debugging remoto, permitiendo que múltiples proyectos tengan navegadores independientes.
## Puerto asignado a este proyecto
**Puerto: 9235**
Este puerto se calcula automáticamente basado en el nombre del proyecto para evitar conflictos.
## Paso 1: Iniciar el navegador del proyecto
Antes de abrir Claude Code en este proyecto, ejecutá:
```bash
./start-browser.sh
```
Esto iniciará una instancia de Chrome dedicada para este proyecto en el puerto 9235.
## Paso 2: Configurar MCP en Claude Code
### Opción A: Configuración Automática (Recomendado)
Ejecutá el script de configuración automática:
```bash
./setup-chrome-mcp.sh
```
Este script:
- Detecta el directorio de configuración correcto
- Actualiza o crea el archivo `mcp.json`
- Configura el puerto único para este proyecto (9235)
- Agrega el flag `--isolated` para permitir múltiples navegadores
### Opción B: Configuración Manual
Editá tu archivo de configuración de Claude Code:
**Linux/WSL:** `~/.config/claudecode/mcp.json`
Agregá o modificá la sección `mcpServers`:
```json
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browserUrl=http://localhost:9235",
"--isolated"
]
}
}
}
```
**IMPORTANTE:** El flag `--isolated` es necesario para que cada proyecto tenga su propio navegador.
### Opción C: Script de inicio automático
Creá un alias en tu `~/.bashrc` para este proyecto:
```bash
alias plantilla-chrome='cd /home/draganel/repos/plantillaNuxtAuthentikProxy && ./setup-chrome-mcp.sh && ./start-browser.sh && sleep 2 && claude-code .'
```
Luego solo ejecutás `plantilla-chrome` para iniciar todo automáticamente.
## Paso 3: Reiniciar Claude Code
Después de configurar el MCP, reiniciá Claude Code para que tome la nueva configuración.
## Verificación
Una vez configurado, Claude Code debería poder usar estas herramientas:
- `mcp__chrome-devtools__navigate_page`
- `mcp__chrome-devtools__take_snapshot`
- `mcp__chrome-devtools__take_screenshot`
- `mcp__chrome-devtools__click`
- `mcp__chrome-devtools__fill`
- Y todas las demás herramientas de Chrome DevTools
## Detener el navegador
Para cerrar la instancia de Chrome de este proyecto:
```bash
pkill -f 'remote-debugging-port=9235'
```
## Troubleshooting
### El navegador no se inicia
1. Verificá que `google-chrome` esté en el PATH
2. En WSL, podés necesitar usar la ruta completa: `/mnt/c/Program\ Files/Google/Chrome/Application/chrome.exe`
### Claude Code no se conecta
1. Verificá que el navegador esté corriendo: `lsof -i :9235`
2. Verificá que la configuración MCP tenga el puerto correcto (9235)
3. Reiniciá Claude Code después de cambiar la configuración
### Puerto en uso
Si el puerto 9235 ya está en uso, el script lo detectará y matará el proceso anterior.

View File

@@ -8,7 +8,7 @@ set -euo pipefail
# Configuración # Configuración
GITEA_URL="https://gitea.nucleoriofrio.com" GITEA_URL="https://gitea.nucleoriofrio.com"
OWNER="nucleo000" OWNER="nucleo000"
REPO="plantillaNuxtAuthentikProxy" REPO="seguidorDeLotes"
# Intentar cargar el token desde el entorno o desde ~/.bashrc # Intentar cargar el token desde el entorno o desde ~/.bashrc
GITEA_TOKEN="${GITEA_TOKEN:-}" GITEA_TOKEN="${GITEA_TOKEN:-}"

View File

@@ -1,6 +1,6 @@
# Plantilla Nuxt + Authentik Proxy # Seguidor de Lotes
Plantilla base para aplicaciones Nuxt 4 con autenticación mediante Authentik Proxy Outpost. Aplicación Nuxt 4 para seguimiento y gestión de lotes, con autenticación mediante Authentik Proxy Outpost.
## Estructura del Proyecto ## Estructura del Proyecto
@@ -52,6 +52,25 @@ Este proyecto incluye hooks de Claude Code para monitorear automáticamente las
📖 Ver documentación completa en [`.claude/hooks/README.md`](.claude/hooks/README.md) 📖 Ver documentación completa en [`.claude/hooks/README.md`](.claude/hooks/README.md)
## Chrome DevTools MCP
Este proyecto está configurado para usar su propia instancia de Chrome con debugging remoto, permitiendo múltiples proyectos con navegadores independientes.
### Inicio Rápido:
1. **Iniciar el navegador del proyecto:**
```bash
./start-browser.sh
```
2. **Configurar MCP en Claude Code** (solo primera vez):
- Editá `~/.config/claude-code/config.json`
- Agregá la configuración del navegador (puerto 9235)
3. **Reiniciar Claude Code** para aplicar cambios
📖 Ver documentación completa en [`.claude/CHROME_SETUP.md`](.claude/CHROME_SETUP.md)
## Arquitectura de Componentes ## Arquitectura de Componentes
### Componentes de Autenticación ### Componentes de Autenticación

136
setup-chrome-mcp.sh Executable file
View File

@@ -0,0 +1,136 @@
#!/bin/bash
# Script de configuración automática de Chrome DevTools MCP
PROJECT_NAME=$(basename $(pwd))
CHROME_PORT=$((9222 + $(echo $PROJECT_NAME | cksum | cut -d' ' -f1) % 100))
CLAUDE_CONFIG_DIR="$HOME/.config/claudecode"
CLAUDE_CONFIG_FILE="$CLAUDE_CONFIG_DIR/mcp.json"
echo "======================================"
echo "Configuración de Chrome DevTools MCP"
echo "Proyecto: $PROJECT_NAME"
echo "Puerto: $CHROME_PORT"
echo "======================================"
echo ""
# Crear directorio de configuración si no existe
if [ ! -d "$CLAUDE_CONFIG_DIR" ]; then
echo "Creando directorio de configuración de Claude Code..."
mkdir -p "$CLAUDE_CONFIG_DIR"
fi
# Función para crear configuración nueva
create_new_config() {
cat > "$CLAUDE_CONFIG_FILE" << EOF
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browserUrl=http://localhost:${CHROME_PORT}",
"--isolated"
]
}
}
}
EOF
echo "✓ Configuración creada exitosamente"
}
# Función para actualizar configuración existente
update_existing_config() {
# Hacer backup
cp "$CLAUDE_CONFIG_FILE" "$CLAUDE_CONFIG_FILE.backup"
echo "✓ Backup creado: $CLAUDE_CONFIG_FILE.backup"
# Usar jq para actualizar si está disponible
if command -v jq &> /dev/null; then
jq ".mcpServers[\"chrome-devtools\"].args = [\"chrome-devtools-mcp@latest\", \"--browserUrl=http://localhost:${CHROME_PORT}\", \"--isolated\"]" \
"$CLAUDE_CONFIG_FILE.backup" > "$CLAUDE_CONFIG_FILE"
echo "✓ Configuración actualizada con jq"
else
echo "⚠ jq no está instalado. Mostrando configuración manual..."
echo ""
echo "Por favor, editá manualmente $CLAUDE_CONFIG_FILE"
echo "y cambiá el --browserUrl a: http://localhost:${CHROME_PORT}"
echo "y agregá --isolated como tercer argumento"
echo ""
echo "O instalá jq: sudo apt install jq"
return 1
fi
}
# Verificar si existe config.json
if [ -f "$CLAUDE_CONFIG_FILE" ]; then
echo "Archivo de configuración existente encontrado."
echo "Opciones:"
echo " 1) Actualizar configuración existente (recomendado)"
echo " 2) Sobrescribir con nueva configuración"
echo " 3) Mostrar configuración manual"
echo " 4) Cancelar"
echo ""
read -p "Seleccioná una opción (1-4): " option
case $option in
1)
update_existing_config
;;
2)
echo "⚠ Esto sobrescribirá toda tu configuración actual."
read -p "¿Estás seguro? (s/N): " confirm
if [[ $confirm =~ ^[Ss]$ ]]; then
create_new_config
else
echo "Operación cancelada"
exit 0
fi
;;
3)
echo ""
echo "Configuración manual:"
echo "1. Editá: $CLAUDE_CONFIG_FILE"
echo "2. Agregá o modificá la sección mcpServers:"
echo ""
cat << 'EOF'
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
EOF
echo " \"--browserUrl=http://localhost:${CHROME_PORT}\","
cat << 'EOF'
"--isolated"
]
}
}
}
EOF
exit 0
;;
4)
echo "Operación cancelada"
exit 0
;;
*)
echo "Opción inválida"
exit 1
;;
esac
else
echo "No se encontró configuración existente. Creando nueva..."
create_new_config
fi
echo ""
echo "======================================"
echo "✓ Configuración completada"
echo "======================================"
echo ""
echo "Próximos pasos:"
echo "1. Iniciá el navegador: ./start-browser.sh"
echo "2. Reiniciá Claude Code para aplicar cambios"
echo ""
echo "Ver documentación completa: .claude/CHROME_SETUP.md"

54
start-browser.sh Executable file
View File

@@ -0,0 +1,54 @@
#!/bin/bash
# Script para iniciar Chrome con remote debugging para este proyecto
# Cada proyecto tendrá su propia instancia de Chrome en un puerto único
PROJECT_NAME=$(basename $(pwd))
# Generar puerto único basado en el nombre del proyecto (9222-9322)
CHROME_PORT=$((9222 + $(echo $PROJECT_NAME | cksum | cut -d' ' -f1) % 100))
USER_DATA_DIR="/tmp/chrome-${PROJECT_NAME}"
echo "======================================"
echo "Iniciando Chrome para proyecto: $PROJECT_NAME"
echo "Puerto: $CHROME_PORT"
echo "User Data Dir: $USER_DATA_DIR"
echo "======================================"
# Matar instancias previas si existen
if lsof -Pi :${CHROME_PORT} -sTCP:LISTEN -t >/dev/null 2>&1; then
echo "Matando proceso existente en puerto ${CHROME_PORT}..."
pkill -f "remote-debugging-port=${CHROME_PORT}" || true
sleep 1
fi
# Verificar si google-chrome está disponible
if ! command -v google-chrome &> /dev/null; then
echo "ERROR: google-chrome no está instalado o no está en el PATH"
echo "En WSL, podés usar: /mnt/c/Program\ Files/Google/Chrome/Application/chrome.exe"
exit 1
fi
# Iniciar Chrome con remote debugging
google-chrome \
--remote-debugging-port=${CHROME_PORT} \
--user-data-dir="${USER_DATA_DIR}" \
--no-first-run \
--no-default-browser-check \
> /dev/null 2>&1 &
CHROME_PID=$!
sleep 2
# Verificar que Chrome se inició correctamente
if ps -p $CHROME_PID > /dev/null; then
echo "✓ Chrome iniciado exitosamente (PID: $CHROME_PID)"
echo ""
echo "Configuración MCP:"
echo " --browserUrl=http://localhost:${CHROME_PORT}"
echo ""
echo "Para detener Chrome:"
echo " pkill -f 'remote-debugging-port=${CHROME_PORT}'"
else
echo "✗ Error al iniciar Chrome"
exit 1
fi