00:00:00Millones de desarrolladores han creado proyectos en la nube front-end de Vercel por más de una década.
00:00:04Todos hemos usado Vercel para desplegar desde proyectos personales hasta software empresarial.
00:00:10Y cuando estás creando agentes y funciones de IA para reducir la fricción de tus usuarios o de tu equipo,
00:00:15lo último que quieres es algo complicado de mantener en producción.
00:00:21La infraestructura autónoma de Vercel hace que el DevOps sea tan fácil como el despliegue.
00:00:25Tú generas código y creas agentes, luego Vercel optimiza autónomamente el rendimiento a escala global,
00:00:31asigna cómputo, orquesta flujos de IA e incluso investiga anomalías.
00:00:38Todo esto sin necesidad de configuración.
00:00:40Ahora, permítanme mostrarles a qué me refiero con una demostración rápida.
00:00:43Aceptemos el reto de migrar una aplicación web existente.
00:00:46Esta es una aplicación de demostración de una plataforma de contratación para una empresa cafetera mediana.
00:00:53Es una app sencilla con un front-end, una base de datos para solicitudes y currículums,
00:00:58y un servicio back-end que resume cartas de presentación para revisar solicitudes más rápido.
00:01:03Actualmente está en un proveedor de hosting muy antiguo, no diré cuál,
00:01:07pero definitivamente queremos modernizarla, así que hagámoslo.
00:01:10Migraremos a Vercel, lo que acelerará el desarrollo de funciones, el despliegue y la colaboración.
00:01:17Ahora, importemos esta aplicación a Vercel.
00:01:19Empezaré con el back-end, que es un servicio básico de Python con FastAPI.
00:01:24Comenzaré haciendo clic en “Add New”.
00:01:26Ya conecté mi cuenta de Git y puedo ver que mis repositorios están aquí.
00:01:31Haré clic en “Import” en el repositorio de la API.
00:01:33La importación es totalmente configurable, incluyendo las configuraciones de compilación y salida,
00:01:38pero Vercel es compatible con FastAPI y otros frameworks de back-end de forma nativa.
00:01:44Así que solo tengo que hacer clic en “Deploy” y funcionará.
00:01:46Y en pocos segundos, mi servicio back-end de Python está desplegado y funcionando en Vercel.
00:01:52Vercel generó automáticamente una URL para este proyecto.
00:01:55Voy a copiarla para añadirla como variable de entorno en la siguiente aplicación.
00:02:01Añadiré otro proyecto nuevo, haré clic en “Import” en la siguiente aplicación,
00:02:05e importaré mis variables de entorno para que esta aplicación pueda comunicarse con Supabase.
00:02:11Genial, ahora mi aplicación puede hablar con Supabase, y para la variable de FastAPI,
00:02:15pegaré la URL que acabo de copiar y desplegaré la aplicación.
00:02:20Vercel está compilando y desplegando el proyecto,
00:02:23y esto se ejecutará en la misma infraestructura que impulsa millones de sitios y aplicaciones.
00:02:27Los 126 puntos de presencia global de Vercel ubican automáticamente el contenido cerca del usuario,
00:02:33lo que significa que siempre será súper rápido.
00:02:37Y aquí vemos que la aplicación se ha desplegado correctamente.
00:02:40Echémosle un vistazo.
00:02:42Puedo ver los empleos, y en el panel, el back-end con nuestra función de resumen en Python.
00:02:49Una vez que esté en producción, podré monitorear toda la aplicación.
00:02:53Pero por ahora, iré a otro proyecto donde podamos ver algunos datos en vivo.
00:02:57Puedo ver el panorama completo con analíticas web, Speed Insights, registros y un panel de observabilidad.
00:03:04Por ejemplo, aquí están las analíticas de nuestro sitio, skills.sh, donde la gente busca habilidades para agentes.
00:03:11Puedo encontrar información detallada sobre el tráfico y las referencias, incluyendo sitios de origen.
00:03:15Si hago clic aquí en Speed Insights, me muestra las Core Web Vitals.
00:03:19De esta forma puedo diagnosticar y solucionar cualquier problema de velocidad o carga.
00:03:23Y si hago clic en observabilidad, accedo al panel que me permite explorar cualquier diagnóstico de mi app,
00:03:29desde registros hasta funciones, solicitudes de edge o transferencia de datos.
00:03:34Bien, ahora quiero que la función de resumen sea más útil para los gerentes de contratación.
00:03:38Actualmente, FastAPI solo resume la carta de presentación con una librería de Python.
00:03:43Pero podemos crear un agente simple que analice tanto la carta como el currículum en PDF,
00:03:48los compare con la descripción del puesto, haga una evaluación inicial del candidato,
00:03:52y genere un correo electrónico para que el gerente lo envíe.
00:03:56Ya tengo el repositorio clonado localmente, así que entraré al directorio e instalaré las herramientas necesarias.
00:04:01Ahora usaré la CLI de Vercel para conectar mi proyecto local con Vercel.
00:04:06La CLI me facilita el control de la plataforma Vercel directamente desde mi línea de comandos.
00:04:11Empezaré con “vercel link”.
00:04:14Sí, voy a vincular este proyecto local.
00:04:16Será en la organización de demostración y el proyecto de empleos de la cafetería.
00:04:21Ya lo encontró.
00:04:22Y ahora traeremos las variables de entorno.
00:04:24Listo.
00:04:25También puedo ejecutar la app localmente con “vercel dev”, que replica el entorno de despliegue de Vercel.
00:04:31Probemos eso: “vercel dev”.
00:04:34Iniciamos el servidor, vamos a probarlo.
00:04:37Y ahí lo tienen.
00:04:38Muy genial.
00:04:40Ahora instalemos las herramientas de IA que necesitaremos para construir el agente.
00:04:43Vercel me da todas las herramientas de IA necesarias para crear funciones y agentes.
00:04:47Primero, necesito integrar un modelo de IA real para el resumen.
00:04:51Puedo usar cientos de modelos diferentes a través del AI Gateway de Vercel,
00:04:55y ejecutar “vercel dev” me da acceso automático con tokens OIDC, lo cual es fantástico.
00:05:00Luego, instalaré el AI SDK, que me da un conjunto completo de primitivas de IA para tareas como resumir texto.
00:05:07Hagamos “pnpm install ai”.
00:05:12Genial.
00:05:13Después de eso, instalaré el kit de desarrollo de flujos de trabajo, que orquestará cada paso del agente.
00:05:21Si mi app generara código, también podría usar el sandbox de Vercel para ejecutarlo de forma segura.
00:05:26Pero este es un agente de resumen simple, así que no necesito el sandbox para esto.
00:05:31Por último, pero no menos importante, el front-end está en Next.js.
00:05:34Así que añadiré la habilidad de mejores prácticas de React a mi proyecto para asegurar un front-end limpio.
00:05:40Voy a usar skills.sh.
00:05:43Entramos aquí y buscamos “React best practices”.
00:05:47Voy a copiar el comando para instalarlo.
00:05:50Y listo.
00:05:53Asegurémonos de instalarlo para Clog Code y un par de cosas más.
00:05:56A nivel global, prefiero la versión SimLink, y ya está instalado.
00:06:01Ahora, construyamos el agente.
00:06:02Es bastante simple, así que solo usaré un prompt en Clog Code.
00:06:06Este es el prompt con el que empecé.
00:06:08Le dice a Clog Code que cree el agente, que resuma la carta y el currículum en PDF,
00:06:12que combine los resúmenes, compare el puesto, haga una recomendación y genere un correo.
00:06:20Por supuesto, pasé tiempo refinando esto en un prompt de un solo intento,
00:06:25que voy a pegar ahora en Clog Code para que empiece a trabajar.
00:06:29Por la magia de las demostraciones en video, asumamos que todo salió bien con los prompts de Clog,
00:06:35que así fue, y simplemente abriré el otro directorio con ese resultado.
00:06:39Muy bien, vamos a desplegar.
00:06:41Voy a confirmar los cambios y subir la rama en la que estoy trabajando.
00:06:47Ahora, la infraestructura autónoma de Vercel reconocerá automáticamente las cargas de IA
00:06:51y asignará la infraestructura para esos trabajos de cómputo.
00:06:55Y el precio por cómputo activo es realmente excelente aquí.
00:06:57Solo se me cobrará por el cómputo real, no por el tiempo de espera mientras la API del modelo responde.
00:07:03Bien, ahora puedo ver la app; entremos al panel, revisemos la nueva función y veamos una solicitud.
00:07:10Y de hecho, ahí tenemos el texto de rechazo para esta solicitud y el correo generado.
00:07:17Lo mejor de los entornos de vista previa es que cualquier persona del equipo puede comentar cualquier parte.
00:07:24Lo haré ahora mismo, simplemente le pediré a Eric que añada un botón.
00:07:31Genial, y esa es solo una función de la barra de herramientas de Vercel.
00:07:34Puedes probar flags, realizar auditorías de accesibilidad, ejecutar trazas y más.
00:07:38El entorno de vista previa se ejecuta en la misma infraestructura que el de producción,
00:07:42así que lo que pruebo aquí es exactamente lo que verán mis usuarios finales.
00:07:46Bien, añadimos un agente, pero quiero que otros en el equipo también puedan iterar en la interfaz.
00:07:52V0 facilita que otras personas trabajen en el proyecto en un entorno de desarrollo web,
00:07:57manteniendo todo bajo control de versiones y seguro mediante flujos de Git.
00:08:01Esto es realmente asombroso.
00:08:03Voy a importar el proyecto de GitHub, elegiré “main” como rama base y V0 configurará el proyecto.
00:08:13Y como pueden ver, mis variables de entorno también se importaron.
00:08:19Y ahora, en menos de un minuto, mi aplicación está funcionando en V0.
00:08:23Como es un proyecto existente, V0 levanta un sandbox para ejecutar el código.
00:08:28Es la misma primitiva de sandbox que usamos en Vercel para crear entornos aislados.
00:08:33Si hago clic en Git, verán que V0 ha creado automáticamente una nueva rama para que yo trabaje.
00:08:39Quiero ajustar un poco el diseño de la página de empleos.
00:08:42Quizás sea una locura, pero hagamos que las tarjetas de empleo ocupen todo el ancho.
00:08:50V0 lo hizo y, bueno, no me encanta mi elección, pero veamos qué opina el equipo de diseño.
00:08:57Puedo enviar este chat de V0 a mi equipo para que sigan iterando,
00:09:00o puedo abrir un PR y compartir el entorno de vista previa para colaborar.
00:09:06Una vez desplegada mi app a escala global, Vercel garantiza que sea segura por defecto.
00:09:13La misma infraestructura autónoma que ejecuta mi app también la protege en el edge.
00:09:18Esta es la vista del firewall para nuestro sitio de Next.js.
00:09:20Recibe mucho tráfico, y no todo es bueno.
00:09:24El WAF de Vercel inspecciona y filtra automáticamente solicitudes maliciosas en el edge antes de que lleguen a la app.
00:09:33Bot ID distingue silenciosamente a usuarios reales del tráfico automatizado, bloqueando bots abusivos sin CAPTCHAs.
00:09:40La red global edge de Vercel detecta y mitiga ataques a gran escala, manteniendo tu app receptiva bajo carga.
00:09:49Todo lo que vieron —migración, IA, colaboración, seguridad— funcionó en una plataforma sin configurar infraestructura.
00:09:59A eso nos referimos con “autónomo”.
00:10:01La plataforma se aparta del camino para que puedas concentrarte en realizar envíos.
00:10:05Ya son 11 millones de proyectos y sumando.
00:10:08El tuyo es el siguiente.