00:00:00Milhões de desenvolvedores criam na nuvem front-end da Vercel há mais de uma década.
00:00:04Todos usamos a Vercel para implantar de tudo, desde projetos pessoais a softwares empresariais.
00:00:10E quando você está criando agentes e recursos de IA para reduzir a fricção de seus usuários ou de sua equipe,
00:00:15a última coisa que você quer é algo complicado de manter em produção.
00:00:21A infraestrutura autônoma da Vercel torna o DevOps tão fácil quanto o deploy.
00:00:25Você gera o código e cria os agentes, então a Vercel otimiza de forma autônoma para desempenho em escala global,
00:00:31provisiona computação, orquestra fluxos de trabalho de IA e até investiga anomalias.
00:00:38Tudo isso sem necessidade de nenhuma configuração.
00:00:40Agora, deixe-me mostrar o que quero dizer com uma demonstração rápida.
00:00:43Vamos aceitar o desafio de migrar um aplicativo web existente.
00:00:46Este é um app de demonstração de uma plataforma de contratação para uma cafeteria de médio porte que possui torrefação e cafés.
00:00:53É um app simples com front-end, um banco de dados para armazenar candidaturas e currículos,
00:00:58e um serviço de back-end que resume cartas de apresentação para uma análise de candidatura mais rápida.
00:01:03Atualmente está em um provedor de hospedagem antigo, não vou dizer qual,
00:01:07mas definitivamente queremos modernizá-lo, então vamos fazer isso.
00:01:10Migraremos para a Vercel, o que vai acelerar o desenvolvimento de recursos, a implantação e a colaboração.
00:01:17Agora, vamos importar este app para a Vercel.
00:01:19Vou começar pelo back-end, que é um serviço básico em Python com FastAPI.
00:01:24Começarei clicando em "Add New".
00:01:26Já conectei minha conta do Git e posso ver que meus repositórios estão aqui.
00:01:31Vou clicar em "Import" no repositório da API.
00:01:33A importação é totalmente configurável, incluindo configurações de build e output,
00:01:38mas a Vercel suporta FastAPI e outros frameworks de back-end nativamente.
00:01:44Então posso apenas clicar em "Deploy" e vai funcionar.
00:01:46E em poucos segundos, meu serviço de back-end em Python está implantado e rodando na Vercel.
00:01:52A Vercel gerou automaticamente uma URL para este projeto.
00:01:55Vou copiá-la para adicioná-la como uma variável de ambiente para o próximo app.
00:02:01Adicionarei outro novo projeto, clicarei em "Import" no próximo app,
00:02:05e vou importar minhas variáveis de ambiente para que ele possa se comunicar com o Supabase.
00:02:11Ótimo, agora meu app pode falar com o Supabase, e para a variável do FastAPI,
00:02:15adicionarei a URL que acabei de copiar e farei o deploy do app.
00:02:20A Vercel está compilando e implantando o projeto,
00:02:23e isso rodará na mesma infraestrutura que alimenta milhões de sites e aplicativos.
00:02:27Os 126 pontos de presença global da Vercel localizam automaticamente o conteúdo próximo ao usuário,
00:02:33o que significa que será sempre super rápido.
00:02:37E aqui podemos ver que o app foi implantado com sucesso.
00:02:40Vamos dar uma olhada nele.
00:02:42Consigo ver as vagas e, no painel, o back-end com nosso recurso de resumo em Python.
00:02:49Uma vez que esteja em produção, poderei monitorar o app inteiro.
00:02:53Mas, por enquanto, vou para outro projeto onde podemos ver alguns dados em tempo real.
00:02:57Posso ter a visão completa com web analytics, speed insights, logs e um painel de observabilidade consultável.
00:03:04Por exemplo, aqui estão as métricas do nosso site, skills.sh, onde as pessoas buscam habilidades de agentes.
00:03:11Consigo encontrar informações detalhadas de tráfego e de origem, incluindo sites de referência.
00:03:15Se eu clicar aqui em "speed insights", ele me mostra os Core Web Vitals.
00:03:19Assim, posso diagnosticar e corrigir quaisquer problemas de velocidade ou carregamento.
00:03:23E ao clicar em "observability", acesso o painel que me permite explorar e consultar qualquer diagnóstico do meu app,
00:03:29desde logs a funções, requisições de borda e transferência de dados.
00:03:34Certo, agora quero tornar o recurso de resumo mais útil para os gerentes de contratação.
00:03:38Atualmente, o FastAPI apenas resume a carta de apresentação com uma biblioteca Python.
00:03:43Mas podemos criar um agente simples para analisar tanto a carta quanto o currículo em PDF,
00:03:48compará-los com a descrição da vaga, fazer uma avaliação inicial do candidato,
00:03:52e gerar um e-mail para o gerente de contratação enviar.
00:03:56Já tenho o repositório clonado localmente, então vou entrar no diretório e instalar as ferramentas necessárias.
00:04:01Agora vou usar a CLI da Vercel para conectar meu projeto local à plataforma.
00:04:06A CLI facilita o controle da plataforma Vercel diretamente pela linha de comando.
00:04:11Vou começar com "vercel link".
00:04:14Sim, vou vincular este projeto local.
00:04:16Será na organização Vercel Demo e no projeto Coffee Shop Jobs.
00:04:21Já o encontrei.
00:04:22E vamos puxar as variáveis de ambiente.
00:04:24Aí está.
00:04:25Também posso rodar o app localmente com "vercel dev", que replica o ambiente de implantação da Vercel.
00:04:31Vou testar: "vercel dev".
00:04:34Iniciando o servidor, vamos testá-lo agora mesmo.
00:04:37E pronto.
00:04:38Muito legal.
00:04:40Agora vamos instalar as ferramentas de IA para construir o agente.
00:04:43A Vercel me dá todas as ferramentas de IA necessárias para criar recursos e agentes.
00:04:47Primeiro, preciso integrar um modelo de IA real para o resumo.
00:04:51Posso usar centenas de modelos diferentes através do Vercel AI Gateway,
00:04:55e rodar o "vercel dev" me dá acesso automático com tokens OIDC, o que é bem bacana.
00:05:00Depois, vou instalar o AI SDK, que oferece um conjunto completo de primitivas de IA para tarefas como resumir texto.
00:05:07Vamos de "pnpm install ai".
00:05:12Ótimo.
00:05:13Em seguida, instalarei o kit de desenvolvimento de workflow, que orquestrará de forma durável cada etapa do agente.
00:05:21Se meu app estivesse gerando código, eu também poderia usar o Vercel Sandbox para rodá-lo com segurança.
00:05:26Mas como este é um agente de resumo simples, não preciso de sandbox para ele.
00:05:31Por último, mas não menos importante, o front-end é em Next.js.
00:05:34Então, adicionarei a habilidade de melhores práticas de React ao projeto para garantir um front-end limpo e rápido.
00:05:40Vou usar o skills.sh.
00:05:43Acessando aqui, procuro por "React best practices".
00:05:47Vou copiar o comando para instalá-lo.
00:05:50E pronto.
00:05:53Vou garantir a instalação para o "clog code" e mais algumas coisas.
00:05:56Globalmente, prefiro a versão SimLink, e está instalado.
00:06:01Agora vamos construir o agente.
00:06:02É bem simples, então vou apenas dar o prompt para o "clog code".
00:06:06Este é o prompt com o qual comecei.
00:06:08Ele diz ao "clog code" para criar o agente, resumir a carta de apresentação e o currículo em PDF,
00:06:12combinar os resumos, comparar com a vaga, fazer uma recomendação inicial e gerar um e-mail de acompanhamento.
00:06:20Claro, passei um tempo com o Clog refinando isso em um prompt de uma única etapa (one-shot),
00:06:25que vou colar agora no "clog code" e deixar rodar.
00:06:29Pela mágica das demos em vídeo, vamos assumir que segui rapidamente pelos prompts do Clog,
00:06:35o que obviamente fiz, e vou abrir o outro diretório com o resultado.
00:06:39Tudo certo, vamos implantar.
00:06:41Vou fazer o commit das alterações e dar um push na branch em que estou trabalhando.
00:06:47Agora, a infraestrutura autônoma da Vercel vai reconhecer as cargas de trabalho de IA
00:06:51e provisionar a infraestrutura para esses jobs de computação.
00:06:55E o preço de computação ativa é excelente aqui.
00:06:57Serei cobrado apenas pelo processamento real, não pelo tempo de espera da resposta da API do modelo.
00:07:03Pronto, agora vejo o app. Vamos ao painel conferir o novo recurso e ver uma candidatura.
00:07:10E, de fato, aqui temos o texto de rejeição para esta vaga e o e-mail de rejeição gerado.
00:07:17A melhor parte dos ambientes de preview é que qualquer pessoa do time pode comentar em qualquer parte do app.
00:07:24Vou fazer isso agora e pedir ao Eric para adicionar um botão.
00:07:31Legal, e esse é apenas um recurso da barra de ferramentas da Vercel.
00:07:34Você pode testar flags, fazer auditorias de acessibilidade, rastreamentos e mais.
00:07:38O ambiente de preview roda na mesma infraestrutura que a produção,
00:07:42então o que eu testo aqui é exatamente o que os usuários finais verão em produção.
00:07:46Ok, adicionamos um agente, mas quero que outros do time também possam iterar na interface.
00:07:52O v0 facilita o trabalho de outras pessoas no projeto em um ambiente de desenvolvimento web,
00:07:57mantendo tudo com controle de versão e seguro via fluxos do Git.
00:08:01Isso é sensacional.
00:08:03Vou importar o projeto do GitHub, escolher a branch "main" e o v0 vai configurar o projeto.
00:08:13E, como podem ver, minhas variáveis de ambiente também foram importadas.
00:08:19Agora, em menos de um minuto, meu app está rodando no v0.
00:08:23Como este é um projeto existente, o v0 inicia um sandbox para rodar o código.
00:08:28É a mesma primitiva de sandbox que usamos na Vercel para criar ambientes isolados.
00:08:33E se eu clicar em Git, verão que o v0 criou automaticamente uma nova branch para eu trabalhar.
00:08:39Quero ajustar um pouco o design da página de vagas.
00:08:42Pode parecer loucura, mas vamos deixar os cartões de vagas com largura total.
00:08:50O v0 processou isso e... não amei minha escolha, mas vamos ver o que o time de design acha.
00:08:57Posso enviar este chat do v0 para minha equipe continuar iterando,
00:09:00ou abrir um PR e compartilhar o ambiente de preview para colaboração.
00:09:06Ao implantar meu app em escala global, a Vercel garante que ele seja seguro por padrão.
00:09:13A mesma infraestrutura autônoma que roda meu app também o protege na borda (edge).
00:09:18Esta é a visão do firewall do nosso site Next.js.
00:09:20Ele recebe muito tráfego, e nem todo ele é legítimo.
00:09:24O firewall de aplicações web da Vercel inspeciona e filtra requisições maliciosas na borda antes de chegarem ao app.
00:09:33O Bot ID distingue silenciosamente usuários reais de tráfego automatizado, bloqueando bots abusivos sem CAPTCHAs.
00:09:40A rede de borda global da Vercel detecta e mitiga ataques de larga escala, mantendo o app responsivo sob carga.
00:09:49Tudo o que você viu — migração, fluxos de IA, colaboração, segurança — rodou em uma plataforma sem configuração.
00:09:59Isso é o que significa ser autônomo.
00:10:01A plataforma sai do caminho para que você possa focar em entregar (shipping).
00:10:05Já são 11 milhões de projetos e contando.
00:10:08O seu será o próximo.