🧠 Interfaz Frontend con Login Google – Integración con API en Cloud Run

Este proyecto forma parte del taller GCP AI Agent Starter Kit. Proporciona una interfaz web construida en Next.js con autenticación por Google, lista para integrarse con una API desplegada en Cloud Run.

👉 Puedes usar esta base clonándola y conectándola a tu propio repositorio para luego personalizarla.

---

🚀 Clonar y reutilizar el proyecto

No es necesario instalar dependencias desde cero. Solo sigue estos pasos:

# 1. Clona este repositorio
git clone https://github.com/macespinoza/agentui-withlogin
cd agentui-withlogin

# 2. Elimina la referencia al repositorio original
git remote remove origin

---

🔗 Configura la conexión con tu API (Cloud Run)

Antes de subir tu versión del proyecto, realiza este cambio:

1. Abre el archivo:

src/app/api/agent/route.ts

2. Reemplaza la lógica de la URL con la dirección de tu servicio en Cloud Run, por ejemplo:

const url = `https://tu-api-cloudrun.a.run.app/agent?` +
  new URL(request.url).searchParams.toString();

Este cambio permite que tu frontend reenvíe correctamente las peticiones al backend.

---

📤 Subir tu repositorio personalizado

Una vez hayas hecho tus modificaciones:

# 3. Agrega tu propio repositorio remoto
git remote add origin <tu_repo_propio>
git push -u origin main

Para subir cambios futuros:

git add .
git commit -m "update"
git push

---

🔐 Configuración de Login con Google

Paso 1: Crear credenciales OAuth en Google Cloud

1. Ve a la Consola de Google Cloud.
2. Crea un ID de cliente OAuth (tipo Aplicación Web).
3. Agrega este URI de redirección:

http://[TU_DOMINIO]/api/auth/callback/google

Por ejemplo, en desarrollo: http://localhost:3000/api/auth/callback/google

---

Paso 2: Variables de entorno necesarias

Define las siguientes variables en o en si usas Vercel: