🐙 GitHub MCP + token + Docker
Para publicar sin salir del editor, conecta el AntiGravity a GitHub mediante MCP: así administras y publicas repositorios directamente desde allí. La integración requiere dos cosas: un Personal Access Token (granular, con validez) y el Docker instalado.
✓ Requisitos previos
- ✓Personal Access Token fine-grained
- ✓Definir una validez por el token
- ✓Docker instalado y en funcionamiento
✗ Errores comunes
- ✗Token sin validez o con un alcance demasiado amplio
- ✗Olvidar abrir Docker antes
- ✗Pegar el token en el código (usa el lugar correcto)
del editor
fine-grained
con vencimiento
instalado
▲ Deploy en Vercel
A Vercel es el "puente" de GitHub al mundo: aloja tu app en producción. El flujo es breve y visual: Add New → Project → importar el repo → publicar. En pocos clics, la app queda publicada con un enlace público.
Add New → Project
En el panel de Vercel, inicia un proyecto nuevo.
Importar el repo
Conecta tu cuenta de GitHub y selecciona el repositorio de la app.
Publicar
Vercel hace el build y publica la app. Listo: está disponible para todo el mundo.
💡 Localhost × producción
En el localhost, solo tú lo ves. En producción (Vercel), cualquier persona con el enlace puede acceder. Es el salto de "funciona en mi computadora" a "está en línea".
GitHub → mundo
el repo
enlace público
pocos clics
🔐 Variables de entorno
Claves de API nunca deben aparecer en el código. La regla de oro: el agente solo nombra la variable; tú pegas la clave dentro de Vercel (Settings → Environment Variables) y da Redeploy.
✓ Forma segura
- ✓El agente solo nombra:
API_KEY - ✓Pegas el valor en Vercel
- ✓Redeploy para que la clave entre en vigor
✗ Nunca hagas
- ✗Pegar la clave dentro del código
- ✗Subir la clave a un repo público
- ✗Enviar la clave en capturas o chats
| Parte | Quién se encarga | Dónde vive |
|---|---|---|
| Nombre de la variable | el agente | en el código (solo el nombre) |
| Valor de la clave | tú | Vercel → Settings → Env Vars |
| Activar cambio | tú | Redeploy |
el agente
tú, en Vercel
activa la clave
en el código
📊 Analítica y Speed Insights
Después de publicar, quieres saber si la gente lo usa y si la app es rápida. Vercel ofrece Analytics (accesos) y Speed Insights (rendimiento). Actívalo en el panel e instala el paquete desde la terminal (npm). El plan gratis es generoso.
npm i @vercel/analytics @vercel/speed-insights
📈 Analítica
Cuántos accesos hay, de dónde vienen y qué páginas visitan. Muestra si realmente se está usando la app.
⚡ Speed Insights
Mide el rendimiento real que perciben los usuarios. Una app lenta ahuyenta a la gente: aquí ves dónde mejorar.
💡 Decisión basada en datos
Sin datos, adivinas qué mejorar. Con Analytics y Speed Insights, te enfocas en lo que realmente afecta a tus usuarios.
en el panel
instala el paquete
+ rendimiento
plan generoso
🩺 Diagnóstico de problemas con capturas de pantalla
Cuando un falla el build, no entres en pánico ni intentes descifrar el error por tu cuenta. Tómate un screenshot de los logs de error y envíaselo al agente: "hubo un error en el deploy, corrígelo". Para los errores en pantalla, usa el DevTools (Console/Network) y envía la captura.
Captura el error
Screenshot de los logs de build en Vercel, o del Console/Network en DevTools.
Envíala al agente
"Hubo un error en el deploy (mira la captura). Corrígelo." La imagen aporta el contexto exacto.
Lo corrige y tú lo vuelves a publicar
Con el error a la vista, el agente acierta con la corrección mucho más rápido.
🔎 DevTools es tu aliado
O Consola muestra errores de código; la pestaña Network muestra las solicitudes que fallaron. Una captura de estas pantallas vale más que mil descripciones.
de los logs
con la captura de pantalla
Consola/Network
la imagen ayuda
💾 Haz commits con frecuencia
Una lección que duele aprender en la práctica: haz commits con frecuencia. Historia real — programar 6 horas sin hacer commit y perder justamente la mejor versión por un paso en falso. El control de versiones es tu red de seguridad.
✓ Haz commit siempre
- ✓Con cada pequeño avance que funciona
- ✓Mensajes breves y claros
- ✓Cada commit = un punto de retorno seguro
✗ El riesgo de no hacer commit
- ✗Horas de trabajo en un único bloque frágil
- ✗Un error borra la mejor versión
- ✗Sin un punto de retorno, vuelves a empezar
⚓ Puntos de retorno
Piensa en cada commit como un «save» del juego. Si algo sale mal, vuelves al último save y nunca pierdes más que el último fragmento.
cada avance
línea de tiempo
punto de retorno
de seguridad
⏪ Rollback
Un deploy fallido no es el fin del mundo: solo es un rollback. En Vercel: Deployments → elige la versión estable anterior → Redeploy. Es literalmente "volver en el tiempo". También puedes revertirlo desde el GitHub.
| Por dónde | Paso | Resultado |
|---|---|---|
| Vercel | Deployments → versión estable → Redeploy | vuelves en el tiempo |
| GitHub | volver al commit bueno | deshace el cambio |
el historial
la versión buena
vuelves en el tiempo
también revierte
💰 Presupuesto de API + repo privado
Dos últimos cuidados para dormir tranquilo. Primero: define un budget de gasto en la API para que no te llegue una cuenta enorme. Segundo: haz que el repositorio privado después de publicar, protegiendo tu código.
💰 Presupuesto de API
Define un límite de gasto en el panel del proveedor de la API.
- •Evita sorpresas en la factura
- •Protege contra bucles o abusos
🔒 Repo privado
Después de publicar, cambia la visibilidad del repositorio a privado.
- •Protege tu código
- •Reduce el riesgo de que se filtren claves
🛡️ Higiene de producción
El presupuesto de API + el repositorio privado + las variables de entorno forman la base de la seguridad de tu app en producción. Son hábitos sencillos que evitan dolores de cabeza costosos.
límite de gasto
en la factura
después de publicar
código + claves
🔬 Ejemplo práctico
Vamos a publicar el rastreador de precios de la Trilha 2.1 y mantenerlo vivo:
- Publica en Vercel — Add New → Project → importar el repo → publicar.
- Protege la clave — el agente nombra
API_KEY; pegas el valor en Settings → Environment Variables y haces Redeploy. - Simula un deploy fallido — después haz un rollback: Deployments → versión estable → Redeploy.
Resultado: app en línea, clave segura y la tranquilidad de saber que puedes volver atrás en el tiempo.
🏋️ Ejercicio
Lleva al mundo la app que creaste en la 2.1:
- Publica tu app en Vercel y confirma que el enlace funciona.
- Protege una clave mediante una variable de entorno — nómbrala en el código, pega el valor en Vercel, Redeploy.
- Haz un rollback para la versión anterior y mira la app "volver en el tiempo".
Bonificación: activa Analytics y define un presupuesto de API. En la Ruta 3, vas a escalar la producción.
⚡ Prompts listos
Copia, pega en tu asistente de IA y adapta a tu caso.
Crie um repositório no GitHub chamado [nome] e publique o projeto atual. Use o GitHub MCP. Não inclua chaves de API no código.
Especifique como a variável de ambiente deve se chamar (ex.: API_KEY); eu forneço a chave dentro da Vercel. Não coloque o valor no código.
Houve um erro no deploy (veja o print). Corrija. Explique em uma frase o que causou e o que você mudou.
✅ Resumen del módulo
Siguiente ruta:
Ruta 3 — Escalar la producción