Configurar repo seguidorDeLotes desde plantilla
- 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:
110
.claude/CHROME_SETUP.md
Normal file
110
.claude/CHROME_SETUP.md
Normal 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.
|
||||||
@@ -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:-}"
|
||||||
|
|||||||
23
README.md
23
README.md
@@ -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
136
setup-chrome-mcp.sh
Executable 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
54
start-browser.sh
Executable 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
|
||||||
Reference in New Issue
Block a user