Sessão da Comunidade: Crie Protótipos mais Inteligentes no v0 com Sanity MCP

PortuguêsEnglishEspañol
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00[ÁUDIO EM BRANCO]
00:00:30[ÁUDIO EM BRANCO]
00:01:00[ÁUDIO EM BRANCO]
00:01:14>> Olá a todos, é bom ver alguns de vocês aqui já.
00:01:20Bem-vindos à sessão comunitária da Versailles desta semana, muito feliz em vê-los aqui.
00:01:25Se esta é a sua primeira vez conosco, olá,
00:01:28eu sou a Pauline Navas da equipe da comunidade aqui na Versailles.
00:01:32Vocês provavelmente já me viram por aí nas nossas plataformas comunitárias respondendo a perguntas.
00:01:37E bem, agora vocês podem colocar um rosto no nome, o que é sempre muito emocionante.
00:01:44Então, sim, antes de começarmos, deixem uma mensagem no chat e
00:01:48digam-nos de onde no mundo vocês estão nos assistindo.
00:01:51Temos pessoas participando de todos os lugares, e
00:01:53honestamente é uma das minhas partes favoritas dessas sessões.
00:01:58Então hoje, estamos mergulhando em algo muito legal.
00:02:02Alguém aqui já ouviu falar de Sanity?
00:02:04[RISOS] Então hoje, vamos construir protótipos mais inteligentes no V0 com o MCP do Sanity.
00:02:12Vamos falar sobre geração de esquema, conteúdo real,
00:02:16consultando tudo isso do seu aplicativo ao vivo em tempo real.
00:02:20Se você já usa o Sanity ou é completamente novo nele,
00:02:24tem algo aqui para você e para todos.
00:02:28Então, sem mais delongas, vamos lá.
00:02:33Estou super animada para ver algumas dessas mensagens do chat chegando.
00:02:37Então, definitivamente continuem mandando ao longo da sessão.
00:02:39Adoraríamos ouvir vocês.
00:02:41E sim, adoraria dar as boas-vindas à equipe do Sanity aqui conosco.
00:02:46Ei pessoal, como vocês estão hoje?
00:02:48>> Olá.
00:02:50>> Oi. >> Como vai você?
00:02:51>> Bem, obrigado.
00:02:52É muito bom conversar com vocês.
00:02:54E obviamente, nós realmente amamos fazer isso com nossos parceiros e
00:02:58pessoas com quem colaboramos na comunidade.
00:03:00Então sim, muito animada por tê-los aqui.
00:03:02Vou sair do palco agora e deixar vocês dois começarem.
00:03:09>> Isso é ótimo.
00:03:10Tudo bem.
00:03:12Então sim, ei, ei, Evelina.
00:03:16Você está ligando do nosso novo escritório em Londres, certo?
00:03:20>> Sim, estou no nosso escritório em Londres.
00:03:23Desde hoje, temos este escritório aqui, o que é muito divertido.
00:03:27Então é de onde estou falando.
00:03:29>> E eu estou ligando do meu escritório em casa, que não é novo, em Oakland,
00:03:34na Bay Area, mas também temos um escritório em São Francisco.
00:03:38Então temos aquele pequeno atraso interessante,
00:03:41que talvez nos faça interromper um ao outro, mas vamos ver como vai ser.
00:03:46Então sim, vamos lá, sim.
00:03:51Então somos do Sanity, e provavelmente deveríamos começar explicando o que é o Sanity,
00:03:56caso vocês ainda não tenham ouvido falar.
00:03:58O Sanity é um backend de conteúdo, o que significa que você pode definir modelos de conteúdo
00:04:03em código ou via MCP, como veremos muito em breve.
00:04:07Você pode armazenar tudo como dados estruturados em uma API hospedada.
00:04:12Chamamos isso de Content Lake, que é basicamente como um banco de dados para conteúdo.
00:04:17Você pode consultar esse conteúdo com algo chamado Grok,
00:04:20que é como uma linguagem de consulta para JSON.
00:04:24E então você pode ter conteúdo tipado e consultável onde precisar,
00:04:30como em um projeto V0.
00:04:32E acho que talvez eu deva dar um passo atrás e falar sobre como,
00:04:38se você construiu com V0, provavelmente viu que ele coloca seu conteúdo
00:04:43em arquivos Markdown ou talvez em arquivos JSON no seu projeto, o que é aceitável
00:04:48se você estiver fazendo um protótipo rápido ou algo simples como um blog.
00:04:54Mas quando chega a hora de ficar um pouco mais sério e usar algo que deve acabar
00:04:59em produção em algum lugar ou ser um pouco mais complexo em termos de experiência do usuário,
00:05:06esse negócio de Markdown começa a ser um pouco incômodo.
00:05:11O que eu notei, não só porque trabalho no Sanity,
00:05:14é que quando faço esses projetos eu mesmo, os agentes começam a ter dificuldades
00:05:18em manter as coisas sincronizadas quando estão espalhadas por diferentes arquivos e assim por diante.
00:05:22Então você tem que convencê-los a fazer isso.
00:05:25Seria bom não ter que fazer essas coisas e gastar esses tokens
00:05:28construindo coisas legais de verdade, certo?
00:05:30Então é aí que o Sanity entra.
00:05:34E vamos mostrar uma demonstração, ou Lina vai mostrar uma demonstração do que você pode fazer com ele.
00:05:38Mas antes de mergulharmos nisso, sinto que talvez eu devesse mostrar como adicionar o Sanity ao V0.
00:05:45Então, se pudermos colocar minha tela.
00:05:46Então este é o V0.
00:05:48Esta é a minha conta pessoal.
00:05:52Fizemos sacrifícios aos semideuses.
00:05:55Então, espero que tudo corra bem.
00:05:56Mas como adicionar o Sanity deve ser bem simples.
00:06:00Então, se você tem esta caixa de chat, pode ir aqui no mais,
00:06:06e há algo chamado MCPs.
00:06:07E MCP é como um plug-in para agentes, como a forma de conectar um agente a outro serviço.
00:06:15Então, se você apertar o botão de adicionar novo aqui, você obtém esta lista.
00:06:19E nós estamos aqui, lá embaixo em nós, Sanity.
00:06:23E agora deveríamos ser capazes de apenas pressionar isso.
00:06:26E temos a configuração pronta.
00:06:29Então autorize.
00:06:31Então este-- eu já estou logado, provavelmente.
00:06:34Na verdade não.
00:06:35Então você tem que logar na conta ou criar uma nova.
00:06:41Vamos com essa coisa.
00:06:45E então você pode-- vamos ver.
00:06:51Eu tenho muitas organizações e coisas.
00:06:54Você não terá isso se for a primeira vez.
00:06:57Mas você pode autorizar com sua conta e coisas, e então você volta.
00:07:01E agora está conectado ao Sanity.
00:07:03Então o que o servidor MCP pode fazer agora é criar um novo projeto para você.
00:07:07Ele pode criar conteúdos e documentos e modelos de conteúdo e todas essas coisas.
00:07:13E também vem com habilidades e assim por diante.
00:07:16Então o agente pode recorrer a elas para melhores práticas e assim por diante.
00:07:20E é isso.
00:07:22E agora podemos dizer, faça um novo projeto Sanity para meu blog.
00:07:29E ele vai lá e faz isso.
00:07:33Então é assim que se começa.
00:07:35Mas vamos entrar nas coisas emocionantes e ver o que podemos construir.
00:07:39E é aqui que você entra, Evelina.
00:07:41É aqui que eu entro.
00:07:42Sim.
00:07:43E o que é legal é que a Evelina juntou-se a nós de um lugar chamado Love Holidays, que
00:07:48é uma agência de viagens, como viagens como um--
00:07:52É uma agência de viagens online.
00:07:53Sim.
00:07:54Sim, é uma agência de viagens como um serviço.
00:07:57Então é este aplicativo bastante complexo com zilhões de páginas
00:08:02de destino para todos os hotéis e tudo mais.
00:08:05Você usa o Sanity como o armazenamento de configuração para esse serviço.
00:08:12Sim.
00:08:13Nós usamos o Sanity na Love Holidays para alimentar, na verdade, nossa página--
00:08:17tanto nosso site quanto nosso aplicativo.
00:08:19Então, basicamente, armazenamos tudo e fizemos muito trabalho
00:08:21tanto no Sanity, o que é super legal.
00:08:24E Evelina, você construiu essas coisas em uma equipe com o Sanity
00:08:29antes de termos agentes fazendo todo o código.
00:08:31Então você vem desse velho mundo de digitar esse código manualmente.
00:08:37E então o que você vai nos mostrar agora
00:08:39é sua primeira corrida adequada com V0 e o MCP do Sanity.
00:08:44Então, é super emocionante ouvir sua perspectiva
00:08:46sobre como isso parece versus a velha maneira de fazer as coisas.
00:08:53Mas vou calar a boca agora e deixar você compartilhar a tela
00:08:57e assumir a partir daqui.
00:08:59Incrível.
00:09:00Vou começar.
00:09:01Me avise.
00:09:02Vou mudar de tela agora.
00:09:03Mas me avise se você conseguir ver tudo bem enquanto faço isso.
00:09:07Estou mostrando o V0 porque não consigo ver você?
00:09:09Sim.
00:09:10Parece ótimo.
00:09:11Incrível.
00:09:12Bem, sim, você tem razão.
00:09:13Então, o que eu fiz foi que eu queria tentar isso,
00:09:18tentar como é usar o V0, sem digitar nada manualmente.
00:09:25Então decidi ficar muito dentro do tema.
00:09:27Então estou em Londres.
00:09:29Acabamos de abrir um escritório em Londres aqui.
00:09:32E eu pensei, todos os londrinos, muitas pessoas amam os pubs.
00:09:38E existem tantos deles.
00:09:39Então eu pensei, e se eu construir um pub crawl e um pub crawler?
00:09:43Então veremos em um segundo.
00:09:45Talvez eu apenas mostre o que ele pode fazer primeiro.
00:09:48E então podemos entrar em mais detalhes.
00:09:51Mas sim, é isso que construí. Passei provavelmente três horas
00:09:55na sexta-feira, três horas na segunda-feira.
00:09:57Então não passei muito tempo nisso.
00:09:59Mas usei o MCP do Sanity.
00:10:01Então tudo é alimentado por isso.
00:10:02Eu não escrevi nenhum código de fato.
00:10:04Pedi para ele iterar sobre as coisas comigo, é claro.
00:10:08Mas você pode explorar Londres.
00:10:09Então você pode explorar Londres através das diferentes áreas
00:10:12se você estiver familiarizado com Londres.
00:10:13Eu sou uma pessoa de North London.
00:10:15Então esta seria minha área favorita.
00:10:17Eu não gosto muito do Sul.
00:10:18Então gosto do que ele fez aqui.
00:10:20O Sul faz suas próprias coisas.
00:10:21Opinião polêmica.
00:10:22Sim, opinião polêmica aqui.
00:10:24E então eu tenho essas que somos obcecados.
00:10:26Tenho esses diferentes pubs aqui.
00:10:29Tenho uma pequena assinatura de e-mail aqui.
00:10:32Tenho áreas aqui.
00:10:34Tenho, na verdade, um pequeno quiz aqui
00:10:36que podemos explorar em um segundo.
00:10:37E também tenho essa coisa que você pode construir seu próprio crawl,
00:10:41o que é super emocionante.
00:10:43E então, sim, isto é similar.
00:10:44Isto é apenas sobre--
00:10:47isso é um pouco mais de informação.
00:10:48Mas é basicamente isso em poucas palavras.
00:10:52Então, isto é super legal.
00:10:53E o que estou vendo aqui é que há muitas maneiras
00:10:58de acessar o mesmo conteúdo, certo?
00:11:01Sim.
00:11:03Todas essas diferentes jornadas de usuário.
00:11:06Você sabe, sua listagem típica.
00:11:08E então existe quase como uma jornada de quiz
00:11:15e construir seu próprio crawl.
00:11:16E presumo que você esteja usando o mesmo conteúdo do pub, de certa forma.
00:11:21Exatamente.
00:11:22Então o que fiz ao longo disso-- talvez
00:11:25eu comece pelo modo como comecei.
00:11:27Talvez eu passe pelo primeiro prompt que fiz.
00:11:30Então, perguntei a um engenheiro quando eu costumava
00:11:32fazer engenharia em tempo integral.
00:11:34Eu era muito alguém que gostava
00:11:35de planejar um pouco antes, porque acho
00:11:37que você pode detectar as coisas cedo então.
00:11:40Então eu planejei.
00:11:40Eu iterei junto com o Claude e apenas planejei
00:11:44o tipo de prompt.
00:11:46Então, posso ver como isso ficou primeiro.
00:11:48Essa não é a data final.
00:11:50Mas achei que seria interessante ver
00:11:52meu processo de pensamento ali.
00:11:54Isso é interessante.
00:11:54Então, você teve uma pequena conversa com o Claude
00:11:59para ajustar aquele primeiro prompt antes de ir para o v0.
00:12:02Sim.
00:12:04Eu sei, obviamente, que você pode simplesmente improvisar, certo?
00:12:06Você pode simplesmente seguir em frente e fazer.
00:12:08Eu gosto bastante de dar um passo atrás e pensar
00:12:10no que eu realmente quero alcançar.
00:12:12Para não me precipitar e, eu acho,
00:12:15não complicar demais as coisas ou não fazer muitas coisas ao mesmo tempo.
00:12:18Eu definitivamente quero--
00:12:21Eu tenho muitas ideias.
00:12:22Então, acho que dar um passo atrás para planejar
00:12:25é algo que eu gosto de fazer.
00:12:26Então, vou passar por--
00:12:28Esse é um padrão bem inteligente.
00:12:30Planejar o planejamento, de certa forma, certo?
00:12:32Planejar o planejamento.
00:12:33Eu acho que, como engenheiro, mais uma vez, eu costumava
00:12:35entender o problema.
00:12:37O que estou tentando fazer?
00:12:38Planejar.
00:12:38E então você realmente codifica.
00:12:40E o que gostei nisso é que eu realmente
00:12:43comecei a codificar mais rápido.
00:12:44Eu não fiquei preso no modo de planejamento.
00:12:45Mas vou compartilhar rapidamente.
00:12:48É isso que ele fez.
00:12:51Ele cria uma página inicial diferente, um sistema de design.
00:12:54É uma aplicação Next.js.
00:12:56Está usando o Shadcn UI.
00:12:59Alguma direção de design.
00:13:00Eu queria que fosse muito temático, então cores primárias diferentes
00:13:04e tudo mais.
00:13:05Novamente, isso provavelmente é um pouco exagerado de qualquer maneira.
00:13:08Mas gosto bastante de ir um pouco mais fundo.
00:13:11E tem um pouco de tipografia.
00:13:13E depois há os componentes para construir.
00:13:14Então, conforme vou passando por isso, você provavelmente
00:13:17verá que nem tudo isso está realmente lá ainda,
00:13:19como se estivesse lá, porque eu iterei sobre isso.
00:13:23Mas sim, página inicial, essas diferentes seções.
00:13:27E você também notará que o que fiz primeiro
00:13:32foi na verdade apenas ter algum conteúdo de espaço reservado.
00:13:34Então isso na verdade não era insano.
00:13:35Mas, como fiz durante todo o processo, eu realmente
00:13:38usei o MCP para meio que me reensinar
00:13:41todas as melhores práticas que são, na verdade, fornecidas
00:13:44pelo Sanity MCP.
00:13:45Então, sim, foi basicamente isso.
00:13:50Legal.
00:13:51E como foi?
00:13:54Bem, está funcionando, certo?
00:13:55Está funcionando.
00:13:57Não, foi muito divertido.
00:14:00É estranho não estar tanto no controle.
00:14:02Acho que esse foi um passo que teve que ser tipo, ah, na verdade,
00:14:05vou apenas sentar e orientar.
00:14:09Mas foi divertido ver o quanto consegui fazer.
00:14:13E sinto que o quão rápido posso desembaraçar a bagunça que está
00:14:17na minha cabeça às vezes para realmente ser algo útil em vez
00:14:22de ficar parado planejando.
00:14:23Então, talvez devêssemos olhar para um pouco de código?
00:14:26Vamos focar no que ele realmente
00:14:29fez após aquele prompt, certo?
00:14:30E como ele usa o Sanity?
00:14:32Acho que é para isso que estamos aqui.
00:14:35Então, sim, não tenho certeza se você consegue--
00:14:38você vai mostrar o chat?
00:14:41Posso mostrar o chat.
00:14:42Eu estava pensando se podemos mostrar um pouco de código também.
00:14:44Mas desculpe, deslizando daquele jeito.
00:14:51Na verdade, acho que seria talvez interessante mostrar
00:14:54a última coisa que fiz.
00:14:56Porque, como eu disse, eu iterei sobre isso.
00:15:00Eu pedi para ele meio que--
00:15:02conforme escalei, conforme adicionei imagens,
00:15:04conforme adicionei mais texto e tudo isso,
00:15:06eu não queria que nada ficasse fixo (hardcoded).
00:15:09Estou pensando nisso como um projeto de longo prazo,
00:15:12mesmo que seja um protótipo agora,
00:15:14para me preparar para mais sucesso mais tarde
00:15:17para abordagens colaborativas.
00:15:19Estou pensando nisso como: sou eu e meus amigos
00:15:21que estão gerenciando isso.
00:15:23E cada um tem gostos diferentes e cada um
00:15:25tem coisas diferentes que quer dizer.
00:15:27Então, meio que fiz assim.
00:15:30E, no final, certifiquei-me de que não
00:15:33queria que isso ficasse fixo, como eu disse.
00:15:36E em vez de ser, ok, vou
00:15:37examinar todo o código e fazer isso ou iterar,
00:15:40eu meio que disse, você pode usar as melhores práticas do Sanity?
00:15:43Então, é basicamente o que eu fiz aqui.
00:15:46Pergunta retórica.
00:15:47Onde você encontra as melhores práticas para o Sanity?
00:15:51Bem, você pode encontrar--
00:15:52Na verdade, eu tenho aqui.
00:15:56Você pode encontrar aqui se quiser ler o que é.
00:15:59Está no nosso kit de ferramentas de agente aqui.
00:16:03Mas você também pode apenas perguntar.
00:16:04Então, basicamente perguntei no chat para dizer,
00:16:07você pode usar as melhores práticas?
00:16:09Sim, e acho que o servidor MCP meio que tem essas na ponta dos dedos.
00:16:13Então você pode trazê-las no chat.
00:16:15Exatamente.
00:16:16Então, sim, desculpe, eu deveria ter dito isso.
00:16:17Você não precisa realmente sair.
00:16:19Você está apenas dentro.
00:16:20Tipo, fiz tudo exclusivamente por dentro.
00:16:23Mas se você quiser levar isso para outro lugar, você pode-- sim.
00:16:25Mas também imprima a habilidade e leia todas as habilidades.
00:16:28Tipo, certo?
00:16:30Sim.
00:16:30Não, mas acho que é valioso ler, embora.
00:16:33Foi o que eu fiz.
00:16:35Como eu disse, eu meio que passei pelo que estava fazendo.
00:16:39E eu estava tipo, ok, legal.
00:16:40Sim, ele está fazendo isso, e isso, e isso.
00:16:42Então você aprende com isso também.
00:16:44É só que, eu gosto de aprender enquanto faço.
00:16:46Sim, eu estava brincando.
00:16:47Mas é bem interessante
00:16:49ler arquivos de habilidades e ver o que as pessoas--
00:16:53como elas pensam sobre as melhores práticas, certo?
00:16:55Mas sim.
00:16:56Tudo certo, legal.
00:16:57Mas podemos passar um pouco mais,
00:16:59eu acho, talvez olhando para como isso se parece, eu acho.
00:17:01Então, por exemplo, se olharmos para o código aqui, como eu disse,
00:17:07nós temos a parte do aplicativo.
00:17:09Então, esse é obviamente o aplicativo Next.js,
00:17:10onde ele está consultando todos os dados.
00:17:12E nós também temos a parte do Sanity.
00:17:15Então, podemos olhar para os esquemas e como eles se parecem.
00:17:18Então temos o esquema de área.
00:17:20Temos o esquema da página inicial, bar.
00:17:24E todos eles têm campos diferentes.
00:17:26E sim, isso é meio que--
00:17:29alguns deles são provavelmente--
00:17:31sim, desculpe.
00:17:31Então, o que é um esquema?
00:17:33Tipo, qual é o trabalho que um esquema faz por nós aqui?
00:17:36Bem, você basicamente-- a ideia é não--
00:17:40você tem que estruturar seu código de uma maneira
00:17:43para que possa ser reutilizado em muitos lugares, certo?
00:17:45Então, em vez de ter coisas fixas, por exemplo,
00:17:49como eu estruturei o que é um bar.
00:17:51Tipo, um bar tem certos elementos.
00:17:53Então, um bar tem um nome.
00:17:54Um bar tem um slug.
00:17:55Um bar tem áreas.
00:17:57Então, todas essas coisas são apenas estruturadas.
00:18:00E então posso puxar isso para diferentes lugares
00:18:02na aplicação.
00:18:03Então, por exemplo, a área, estes são o leste de Londres,
00:18:07todas essas coisas.
00:18:08Esses são bairros.
00:18:09Alguns deles são obrigatórios porque devem sempre
00:18:12estar lá.
00:18:12Alguns deles não são obrigatórios porque não deveriam sempre
00:18:15estar lá.
00:18:17Você pode ter uma matriz de--
00:18:20uma lista aqui.
00:18:21Então, as características-- eles são amigáveis para cães.
00:18:24Eles têm música ao vivo.
00:18:25Eles têm todas essas coisas diferentes.
00:18:28Então, sim, está tudo no código, o que é incrível para então
00:18:33você poder alimentar mais coisas além da sua própria aplicação.
00:18:37Sim, e acho que se você estiver familiarizado com TypeScript
00:18:40e assim por diante, eles podem ser usados com a consulta Grok
00:18:43para criar tipos em aplicações.
00:18:44Então, é mais fácil para os agentes entenderem se, oh, estou
00:18:49trazendo os dados certos?
00:18:50E estou implementando da maneira certa?
00:18:52Ou terei erros de TypeScript que preciso corrigir, certo?
00:18:55Sim.
00:18:56E outra coisa interessante, não vamos mostrar isso nesta demonstração,
00:18:59mas este esquema também pode ser usado para criar uma interface editorial,
00:19:05um lugar para os humanos trabalharem com esse conteúdo também.
00:19:10Chamamos isso de Sanity Studio.
00:19:12Você pode conferir nossa documentação e assim por diante para começar
00:19:14a trabalhar com isso, mas sim.
00:19:16Mas você também pode apenas usar o MCP para isso.
00:19:18Isso funciona muito bem, especialmente
00:19:20quando você está construindo sozinho, certo?
00:19:22Quando você está construindo sozinho, acho que o MCP
00:19:24funciona igualmente bem.
00:19:26E então, quando você quer colaborar com outros,
00:19:28configurando o estúdio.
00:19:30Então, tudo isso é--
00:19:31você mencionou anteriormente, isso tudo está no 'content lake' agora.
00:19:33Então, tudo isso está estruturado lá.
00:19:36Uma vez que você queira ter um estúdio, você apenas
00:19:37puxa para dentro dele em vez disso.
00:19:40Então, se você voltar ao modo visual,
00:19:43Acho que você tinha uma listagem de pubs da área.
00:19:46Sim.
00:19:48North London, que é o seu favorito.
00:19:51Sim, escolhemos North London.
00:19:52É minha parte favorita porque moro lá.
00:19:54Se você descer um pouco a página.
00:19:57Sim.
00:19:57Então, sim, aqui.
00:19:58E aqui temos filtros.
00:20:00E não sei quanto a você, Evelina,
00:20:04mas eles costumam ser um transtorno para implementar
00:20:06porque há muitas coisas para se pensar.
00:20:09Costumam ser um transtorno.
00:20:10Já trabalhei muito com filtros antes.
00:20:13Acho que busca e filtros são simplesmente um transtorno.
00:20:16Há muito o que considerar.
00:20:18Então, estou super curiosa também, como isso
00:20:21funciona com essa sessão relativamente curta?
00:20:24E como é que fica a consulta de dados?
00:20:27Sim, podemos dar uma olhada nisso.
00:20:28Vamos apenas ver para mostrar que está realmente funcionando.
00:20:31Acho que isso é bem legal.
00:20:33Você tem as diferentes vibrações.
00:20:35Você tem as diferentes funcionalidades.
00:20:36Você tem tudo isso.
00:20:37Isso pode ser obviamente estendido.
00:20:40Mas podemos ver isso aqui.
00:20:42Meu Deus, agora estou pensando, onde isso está realmente?
00:20:46Então acho que isso é apenas consulta de pub.
00:20:50Programar ao vivo não é a minha coisa favorita, ou mostrar ao vivo.
00:20:53Então, mas--
00:20:55Hoje aprendi que existe um recurso de busca no V0.
00:20:58Isso é muito útil.
00:20:59Sim.
00:21:00Como uma garota do VS Code desde o início,
00:21:03isso é muito útil para eu poder pesquisar as coisas.
00:21:07E você pode ver aqui que estamos importando
00:21:10essas diferentes consultas de consultas.
00:21:12Isso é do Sanity.
00:21:14E estamos consultando--
00:21:16desculpe, não é isso que vamos ver.
00:21:18Nós vamos passar pelo filtro.
00:21:21Não, tudo bem.
00:21:22Mas o que vemos aqui é que a parte de busca de dados é como--
00:21:26não é muito código.
00:21:27São basicamente algumas linhas com essa consulta Grok.
00:21:32Então o que você está olhando aqui é a sintaxe Grok.
00:21:36Então é assim que estamos puxando esses dados
00:21:38do Content Lake, certo?
00:21:40Exatamente.
00:21:40Então temos todas essas consultas diferentes.
00:21:43E a coisa boa é que essas consultas podem ser bem específicas.
00:21:46Então você está tipo não fazendo uma sobre-consulta ou sub-consulta.
00:21:49Você está realmente criando a coisa exata
00:21:51que você quer e fazendo isso da maneira ideal.
00:21:54E sim.
00:21:57E então, sim, estávamos olhando para os filtros ou algo assim.
00:22:01Ah, sim.
00:22:01Desculpe.
00:22:02Na verdade, eu mesma não olhei para esse código.
00:22:04Eu quero dizer que tem sido muito fascinante fazer isso.
00:22:08E tenho certeza de que há algumas partes onde
00:22:12eu posso otimizar isso, certo?
00:22:15Sim.
00:22:16Mas na verdade usa--
00:22:18parece que usa parâmetros de consulta e coisas do tipo.
00:22:21Sim.
00:22:22Isso está usando parâmetros de consulta.
00:22:25Aqui temos alguns--
00:22:28sim, desculpe.
00:22:29Oh, não, desculpe.
00:22:29Não era aqui.
00:22:30Sim.
00:22:31E então alguns padrões de uso de estado interessantes.
00:22:35Parece bastante--
00:22:37já vimos esse tipo de código React antes.
00:22:40Sim.
00:22:41Definitivamente.
00:22:43Tem muito--
00:22:45isso provavelmente pode ser otimizado.
00:22:46Então, se as pessoas estão examinando esse código,
00:22:49eu não o otimizei para isso.
00:22:50Sou muito exigente em fazer essas coisas também, mas--
00:22:53Estamos no modo “vibe-coding”, eu acredito.
00:22:54Estamos no “vibe-coding”.
00:22:55Eu sei.
00:22:56Mas gosto de olhar o código e penso, oh.
00:22:59Mas é muito legal ver o pouco de código
00:23:03que é para o que ele faz, eu diria.
00:23:07Tudo bem.
00:23:07Acho que estamos, tipo, o tempo está voando.
00:23:11Oh, sim, o tempo está voando.
00:23:13Posso mostrar isso?
00:23:14Sinto que seria legal apenas passar por--
00:23:16eu realmente não mostrei isso em detalhes,
00:23:19porque este aqui é realmente--
00:23:21eu diria que não é muito acessível, então não faça isso.
00:23:24Mas o que você pode fazer é simplesmente adicionar esses caminhos,
00:23:27e então você tem seu telhado aqui.
00:23:30E tudo isso também é armazenado no Sanity.
00:23:32Então temos sua localização e tudo mais.
00:23:34Então você pode realmente armazenar essas coisas no Sanity
00:23:37e simplesmente puxar.
00:23:38E você tem essa pequena impressão fofa.
00:23:40Não vou fazer isso, porque está aberto e tudo mais.
00:23:42Achei que algumas pessoas, como meu pai,
00:23:44gostariam de ter algo em papel.
00:23:46Então pensei em adicionar algo
00:23:47para a geração mais velha.
00:23:52Isso precisa ser um recurso pago para festas de despedida de solteiro, certo?
00:23:56Eu acho que sim.
00:23:57Acho que isso seria--
00:23:58é fofo.
00:23:59Então você pode filtrar por jogos de tabuleiro.
00:24:02No verão, vai ter a Copa do Mundo.
00:24:04Então talvez você queira filtrar por exibições da Copa do Mundo, certo?
00:24:08Acho que isso seria legal.
00:24:09E se eu puder apenas, tipo, rápido, estou orgulhosa de todos os meus recursos,
00:24:12eu acho.
00:24:13Vai em frente.
00:24:14O quiz também é algo que está mais preparado
00:24:17para o futuro.
00:24:17Você passa por isso.
00:24:19E estou capturando os dados antecipadamente de forma estruturada.
00:24:23Mas estou preparando isso para mais sucesso editorial
00:24:26mais tarde, para ter isso no Sanity Studio
00:24:29e ter mais e-mails de divulgação.
00:24:31Então seria um pouco mais editorial.
00:24:36Então sim, novamente, esta é apenas outra maneira
00:24:39de chegar à mesma lista de pubs.
00:24:45Sim.
00:24:46Embora este aqui seja um pouco mais selecionado.
00:24:49Você realmente obterá uma lista selecionada,
00:24:51então você não obterá pubs aqui.
00:24:54E você também pode imaginar que pode criar um agente de pub em cima
00:24:58disso, certo?
00:24:59Então você simplesmente fala com o agente, e o agente
00:25:01vai recomendar alguma coisa.
00:25:04Exatamente.
00:25:05Temos contexto de agente, que é muito novo.
00:25:07E você pode basicamente girar isso,
00:25:08e então você pode apenas ter essa interface de chat em vez disso.
00:25:11Se você prefere simplesmente não conversar com humanos,
00:25:14você pode simplesmente ser tipo, ei, estou procurando por isso.
00:25:18Isso é muito, muito facilmente feito graças ao contexto de agente.
00:25:22E isso vem com a habilidade também.
00:25:27Sim, e acho que você tinha uma coisa de mapa.
00:25:31Como ele está colocando os pubs no mapa?
00:25:36Então eu estou na verdade--
00:25:39vamos olhar para o mapa mais especificamente.
00:25:47Isso é-- acho que isso também é [INAUDÍVEL]
00:25:50Mas parece que usa coordenadas.
00:25:54Sim.
00:25:56Então tudo isso usando coordenadas que também é
00:25:59consultável pelo Content Lake.
00:26:03Tipo, isso foi-- é quase como se tivéssemos planejado isso, certo?
00:26:05Mas sim, tipo, Grok tem--
00:26:08esse é um dos recursos não tão conhecidos do Grok.
00:26:12Ele tem consultas de geolocalização.
00:26:15Então você pode dizer, ei, encontre os pubs que estão a uma milha de mim.
00:26:20Sim.
00:26:21Express setting Grok, que também parece bem útil
00:26:23em uma aplicação como esta.
00:26:25Com certeza.
00:26:26Esse seria provavelmente um próximo recurso de ser um pouco--
00:26:29isso é meio que puxando os pubs que já estão lá.
00:26:31Mas você provavelmente pode simplesmente ser tipo, oh, estou aqui,
00:26:34tipo, puxando essas coisas.
00:26:37Oh, sim, você pode usar seu marcador de geolocalização, certo?
00:26:39Ou algo assim.
00:26:40Sim.
00:26:41Sinto que você poderia simplesmente dar, certo?
00:26:42Tipo, você poderia literalmente simplesmente dar.
00:26:44Talvez você dê para a interface de chat,
00:26:46e isso vai realmente fazer por você.
00:26:50Isso é bem legal.
00:26:51Sim.
00:26:52Queríamos fazer--
00:26:54vamos fazer algum live web--
00:26:58programação web ao vivo?
00:27:00Podemos tentar.
00:27:03Você disse antes, tipo web ao vivo.
00:27:04Não, mas poderíamos fazer isso.
00:27:05Eu sei que há um recurso que não está funcionando no momento.
00:27:08Por exemplo, se você filtrar mais ou menos assim,
00:27:12isso é algo que não deveria funcionar, certo?
00:27:14Tipo, você não deveria ser capaz de chegar a esse estado idealmente.
00:27:17Ele deveria meio que apenas filtrar.
00:27:23Ou você tinha algo mais em mente?
00:27:25Sim, eu também sei--
00:27:26eu sei disso porque olhei antes.
00:27:28Mas acho que a entrada do pub não
00:27:33tem um campo de descrição de texto rico ou algo assim, certo?
00:27:36Verdade.
00:27:37Verdade, verdade, verdade, verdade.
00:27:39Eu não adicionei.
00:27:40Não, você tem razão.
00:27:40Você tem razão.
00:27:41E não tenho certeza se os deuses da demonstração de vibe
00:27:44são mais benevolentes do que os bons e velhos deuses da demonstração de programação.
00:27:48Mas seria interessante ver se o v0 e o agente
00:27:53conseguem realizar isso.
00:27:55Então, como faríamos o prompt aqui?
00:27:57Queremos um campo de descrição em rich text para os pubs, certo?
00:28:02Eu meio que preparei isso um pouco
00:28:05porque eu ia--
00:28:06Eu achei que ficaria melhor.
00:28:09Nós queremos uma descrição em rich text, certo?
00:28:11Como se quiséssemos que se destacasse mais.
00:28:12Então eu fiz um pouco disso.
00:28:14E temos essa coisa chamada portable text.
00:28:16Então, algo que aprendi e gosto de fazer
00:28:19é adicionar a uma coisa e depois escalar conforme avança.
00:28:23Nem todo mundo faz isso.
00:28:25Mas apenas para tornar rápido e populado.
00:28:28Então, talvez não devêssemos fazer isso aqui
00:28:31porque não sei qual.
00:28:33Como transformamos isso no esquema de pub e populamos os pubs?
00:28:37Ok, eu estava tipo, apenas YOLO, Evelina.
00:28:40Eu sei.
00:28:41Você sempre pode voltar atrás.
00:28:45Ok, vamos fazer o YOLO.
00:28:46Ok, vamos fazer o YOLO.
00:28:48Dá para perceber que não gosto de fazer YOLO na minha frente?
00:28:51Dá para perceber.
00:28:55Acho que temos uma abordagem mais responsável.
00:28:58Mas estou sempre curiosa.
00:29:01Quanto podemos jogar para esses agentes?
00:29:04Eles conseguem, tipo, testar?
00:29:06E muitas vezes eles conseguem.
00:29:07E fico surpresa.
00:29:09Eles conseguem.
00:29:10Acho que isso tem sido algo, como disse antes,
00:29:12apenas abrir mão do controle, o que foi realmente bom quando
00:29:16eu fiz, quando percebi que ele estava apenas fazendo sua própria coisa.
00:29:18Tipo, eu não precisava... eu podia fazer algo ao mesmo tempo.
00:29:21Eu estava tipo, sabe, então vamos ver o que ele está fazendo.
00:29:24Então ele está encontrando o pacote de portable text, o que é bom.
00:29:28Já está instalado.
00:29:29Acho que eu tinha--
00:29:30Sim.
00:29:31Às vezes, os agentes querem apenas escrever isso eles mesmos,
00:29:34o que é um desperdício de tokens.
00:29:39Ah, então ele atualizou o esquema.
00:29:43Ele também fez o deploy.
00:29:45Tudo bem, legal.
00:29:47Então não preciso dizer que preciso fazer isso.
00:29:49Ele meio que está apenas fazendo sozinho.
00:29:51Eu tenho que permitir, no entanto, certas coisas que acho que--
00:29:55O que faz sentido.
00:29:56Sim, você ainda quer ter um pouco de controle.
00:29:58Pelo menos eu quero, então.
00:30:02Sim, então, tipo, toda ação destrutiva,
00:30:05ele vai, tipo, pedir sua aprovação primeiro.
00:30:07Tipo, você tem certeza de que quer fazer isso?
00:30:09E acho que existe sempre a opção de permitir tudo
00:30:11se você sabe que só estamos testando aqui.
00:30:13Tipo, não importa.
00:30:16Mas quando você está em produção, você provavelmente
00:30:18quer ser um pouco mais cauteloso.
00:30:22Definitivamente, mas é, sim, está lendo, está adicionando.
00:30:29É bem legal que você também veja o que ele está fazendo, certo?
00:30:32Ok, então eu sei, tipo, esses são os arquivos
00:30:34que vou olhar depois, se eu quiser dar uma olhada.
00:30:40Porque falamos sobre isso antes.
00:30:42Parece que essas ferramentas são muito poderosas
00:30:47e estão permitindo que pessoas
00:30:49que nunca tocaram em código construam coisas bem legais.
00:30:53Mas acontece que saber um pouco sobre código
00:30:56e engenharia de software é muito útil, certo?
00:31:01Então, seja curioso sobre o que o código é
00:31:06e tente entendê-lo.
00:31:07E você provavelmente também pode pedir ao agente para explicar
00:31:09se não fizer sentido, certo?
00:31:12Sim.
00:31:13Ele conseguiu fazer isso?
00:31:16Estou olhando agora.
00:31:18Sim, tem o portable text aqui.
00:31:22Tem um bloco.
00:31:24Então, portable text talvez--
00:31:26portable text é uma especificação de conteúdo de bloco.
00:31:30Então é como no Notion e tal.
00:31:32Você tem blocos diferentes que pode inserir.
00:31:36O portable text permite fazer o mesmo basicamente, incluindo
00:31:40formatação rich text.
00:31:41E então, como tudo é armazenado como dados,
00:31:43é muito fácil pegar esse conteúdo
00:31:46e implementá-lo aqui no React ou em um aplicativo nativo
00:31:49e coisas do tipo.
00:31:51Então sim.
00:31:52Ele--
00:31:53Sim, tem vários desses.
00:31:54Desculpe.
00:31:55Ele também adicionou o conteúdo a, tipo--
00:31:58Isso é o que eu provavelmente deveria verificar, certo?
00:32:01Sim.
00:32:03Não tenho certeza se foi adicionado.
00:32:04Talvez possamos apenas pedir para fazer isso para este pub especificamente.
00:32:08Ah, sim, você tem razão.
00:32:09Na verdade, não tenho certeza.
00:32:11E você adiciona algum conteúdo a isso aqui.
00:32:22Muito emocionante.
00:32:28Achei que está pensando--
00:32:30Pessoal, eu só queria entrar aqui, na verdade.
00:32:33[INAUDÍVEL]
00:32:34Está fazendo sua coisa.
00:32:36É tão legal que as pessoas ainda
00:32:38estejam assistindo e claramente muito curiosas sobre como
00:32:41Sanity e v0 trabalham juntos.
00:32:43Eu tinha uma pergunta, no entanto, sobre o processo de build.
00:32:46Então, Evelina, você mencionou que passou seis horas no total.
00:32:51Quanto disso foi, tipo, fazendo prompt versus revisando
00:32:55output versus iterando?
00:32:59Ah, nossa.
00:33:01Sinto que--
00:33:02Eu estava tipo, não sei quanto tempo foi gasto nisso.
00:33:05Eu diria que eu meio que--
00:33:08Comecei com, tipo, prompts maiores, certo?
00:33:11E então eu estava tipo, oh, na verdade, eu
00:33:13acho que seria melhor reduzir a escala.
00:33:15Então eu meio que apenas iterei.
00:33:17Passei um pouco de tempo com as permissões, o que
00:33:20não seria um problema para outras pessoas,
00:33:21mas porque eu também tenho muitas instâncias do Sanity, certo?
00:33:25E também deixei nossa equipe de produto
00:33:27saber que isso pode acontecer.
00:33:28Então foi tipo uma solução de problemas ao mesmo tempo.
00:33:32Eu diria que passei provavelmente a maior parte do tempo iterando junto com ele,
00:33:37mas foi um exercício divertido.
00:33:39Acho que iterando em, tipo, oh, eu quero esse recurso.
00:33:41Não.
00:33:42E percebi que, na verdade, esse recurso
00:33:44faz sentido aqui em vez de aqui.
00:33:45Não foi iterando porque estava errado.
00:33:48Foi iterando porque eu meio que desbloqueei
00:33:52novas possibilidades do que o conteúdo poderia fazer.
00:33:55E então, quando terminei, como eu disse, eu meio que disse, ok,
00:33:58agora estamos meio que prontos.
00:33:59Vamos dar uma olhada.
00:34:00Vamos excluir um pouco de código.
00:34:02Vamos otimizá-lo para ficar melhor.
00:34:05Vamos não ter nada codificado fixamente.
00:34:06Todas essas coisas que eu não gostaria,
00:34:08que não era importante no início,
00:34:10mas que é importante para mais, tipo, um estado final.
00:34:12Então eu estava pensando nisso como um produto final
00:34:14que eu possa simplesmente dar para as pessoas, certo?
00:34:15Sim, sim, sim.
00:34:16Isso faz muito sentido.
00:34:17Legal.
00:34:18Sim.
00:34:20Oh, está me dando um pequeno aviso.
00:34:23Essa é a tal.
00:34:25Acho que isso é divertido.
00:34:26Sim, isso é... vamos permitir isso.
00:34:29Estamos bem de tempo, Pauline?
00:34:30Eu percebi--
00:34:30Sim.
00:34:31--talvez, não sei.
00:34:32Absolutamente, sim.
00:34:33Temos cerca de 10 minutos.
00:34:36Então, sinta-se à vontade para mostrar mais da demonstração.
00:34:37Acho que vou apenas ficar por aqui e
00:34:39entrar com perguntas enquanto o V0 está pensando, como agora, na verdade.
00:34:44Sim, uma pergunta que eu tinha era que você falou sobre--
00:34:51você costumava trabalhar na Love Holidays,
00:34:53e você tinha muitas landing pages.
00:34:57Então quando... sim, tipo, muitas landing pages.
00:35:02Mas como o Sanity previne o desvio em termos de escala,
00:35:08escalabilidade, se é que faz sentido?
00:35:11Em termos de... desculpe, pode repetir isso?
00:35:14Então, em termos de--
00:35:16Então eu estava curiosa sobre como isso escala.
00:35:20Então, por exemplo, na Love Holidays, você disse
00:35:23que tinha muitas landing pages.
00:35:25E então, nisto--
00:35:26sim, como o Sanity previne o desvio?
00:35:30Espero ter feito a pergunta certa.
00:35:32Sim, não, desculpe.
00:35:32Acho que tenho--
00:35:34Sim, ou desculpe, você quer ir?
00:35:37Talvez, tipo, desvio de quê?
00:35:38Tipo, o conteúdo?
00:35:39O conteúdo, sim.
00:35:42Então, para isso, por exemplo, defini o que é um pub.
00:35:47Defini o que é uma área.
00:35:49Essas coisas são apenas, tipo, documentos, certo?
00:35:51Tipo, são documentos com tipos.
00:35:54E eu poderia... eu vou... essa é, tipo, uma fonte única da verdade.
00:35:58Então, tipo, digamos que eu quisesse construir uma landing page
00:36:01separada que tenha esses pubs e áreas,
00:36:04mas exibidos de uma maneira diferente.
00:36:05Tipo, eu poderia facilmente fazer isso apenas pedindo para você fazer.
00:36:08Não vai duplicar o código.
00:36:09Na verdade, vai apenas usar a mesma coisa.
00:36:11E se eu... agora estou fazendo isso com o MCP do Sanity, certo?
00:36:15Mas se eu tivesse o estúdio, poderia apenas atualizá-lo em um lugar.
00:36:18E isso meio que irá para todas as páginas.
00:36:20Então vai fluir para a direita.
00:36:22Sim, ok, isso faz sentido.
00:36:24Sim, sim.
00:36:24Acho que o lado técnico mais profundo disso
00:36:26é que o Content Lake suporta algo chamado referências.
00:36:30Então, é um conteúdo único.
00:36:32Você pode dizer: ei, eu quero referenciar esta entrada de publicação.
00:36:35Então, quando você a encontrar, apenas puxe esse documento.
00:36:38Então é assim que você evita ter duplicação de conteúdo
00:36:42por toda parte.
00:36:43E isso também é o que torna tudo mais fácil para o servidor MCP.
00:36:45Tipo: ah, estou atualizando a glória.
00:36:48A glória, esse é o documento.
00:36:50Vou atualizá-lo aqui.
00:36:51E então, onde quer que estejamos usando essa descrição,
00:36:54ela também será atualizada, certo, a partir de um lugar só.
00:36:55Sim, exatamente.
00:36:57Sim, ok, ok, ótimo.
00:37:01Olha.
00:37:02Uau.
00:37:02Eba, olha só aquilo.
00:37:05Eba, por que não é especial?
00:37:06Ah, por que é especial.
00:37:07Eu pensei que não fosse especial.
00:37:08Eu fiquei tipo: o quê?
00:37:10Eu não pedi para você fazer isso.
00:37:13Sim, isso é incrível.
00:37:15É legal ver isso acontecer bem na sua frente.
00:37:18Sim, eu acho que, conforme você tem feito esse processo,
00:37:22o que você acha que ainda precisa de um humano em termos
00:37:28de revisar todo esse processo de ponta a ponta?
00:37:34Sim, quer dizer...
00:37:35Oh, grande pergunta.
00:37:36Que grande pergunta.
00:37:37Desculpe por isso, pessoal.
00:37:38Que grande pergunta, Seth.
00:37:39O que é isso?
00:37:397:32, estamos em Londres.
00:37:42Foi o agente que perguntou isso, ou?
00:37:46Tudo meu, tudo meu.
00:37:47Eu acho, quero dizer, isso é meio que...
00:37:51Eu estou revisando conforme avanço, e é
00:37:53incrível ser capaz de fazer tanto tão rapidamente,
00:37:55mas também estou pensando nisso como algo
00:37:58que estou compartilhando com outros.
00:37:59Gosto de ter algum tipo de contribuição humana.
00:38:02Então, quando se trata do lado mais editorial dessas coisas,
00:38:06é onde gosto de armazenar em um só lugar,
00:38:10mas então ter algum tipo de, ok,
00:38:12talvez a IA tenha gerado texto automaticamente,
00:38:15mas talvez eu queira adicionar algo específico ao que
00:38:17eu sei sobre Londres.
00:38:18Isso é apenas especial para mim porque vivi aqui por seis anos.
00:38:21Essas coisas, eu acho, são toques agradáveis
00:38:23para sites como este, que deveriam ser muito pessoais.
00:38:28Software pessoal.
00:38:29Sim.
00:38:30Sim, 100%.
00:38:32Acho que, continuando a partir disso, vocês
00:38:34aí na Sanity usam o v0 no dia a dia,
00:38:39ou alguma ferramenta de agente de IA, eu acho?
00:38:44Essa foi a minha...
00:38:45Sendo honesta, esta foi a minha primeira vez usando o v0.
00:38:47Sim, eu tenho planejado usá-lo.
00:38:50É só que o meu dia a dia agora é mais no marketing,
00:38:54no lado da comunidade das coisas.
00:38:55Então, eu tenho me inclinado para isso no último ano,
00:38:58e tenho gostado muito de voltar a programar um pouco.
00:39:01E agora posso ir do nada a isto muito rapidamente e apresentar.
00:39:06Então, estou começando a pensar em como posso fazer isso mais toda semana
00:39:10para apresentar certas coisas.
00:39:12Então, eu também gostaria de fazer isso.
00:39:14Sim, acho que podemos dizer com segurança que na Sanity, nós
00:39:17usamos a maioria das coisas.
00:39:22Parcialmente para o nosso próprio trabalho em desenvolvimento,
00:39:25mas também temos suporte a servidor MCP para o v0.
00:39:29Então, provavelmente deveríamos usar o v0 para entender
00:39:33se ele está funcionando bem e assim por diante.
00:39:35Então é muito importante para nós usar essas ferramentas diferentes
00:39:40para entender o que nossos usuários também estão experimentando, certo?
00:39:44Sim, e é por isso que, quando eu disse mais cedo,
00:39:47foi onde levei meu tempo para também entendê-lo
00:39:49enquanto o fazia e não realmente correr no início
00:39:52porque eu queria ver como o MCP está respondendo a isso
00:39:56e então deixar as pessoas saberem.
00:39:59Sim, ok, isso faz muito sentido.
00:40:02OK, legal.
00:40:03Eu tinha uma pergunta aqui.
00:40:05Existe um ponto no fluxo de trabalho onde você sairia
00:40:10do v0 e iria para o manual?
00:40:14Acho que esta é sua primeira vez, Evelina, usando isso,
00:40:18mas acho que, pela sua experiência até agora,
00:40:21você sentiu tipo: oh, ok, já fiz isso agora.
00:40:24Isso é o suficiente do v0.
00:40:26Vou tirar isso e dar uma olhada.
00:40:29Acho que provavelmente existe um mundo onde
00:40:32eu faria isso porque acho divertido fazer algumas manipulações.
00:40:37Uau.
00:40:38Você nunca ouve isso neste caso.
00:40:40Eu meio que sinto falta disso agora que estou trabalhando nesse tipo de coisa.
00:40:43Gosto de ter um tempo focado e resolver algumas áreas,
00:40:46mas não senti realmente a necessidade aqui.
00:40:48A única coisa que fiz foi pular para o Claude para idealizar
00:40:53só porque eu tenho, não sei, habilidades configuradas.
00:40:56Eu tenho coisas lá onde está o meu fluxo de trabalho.
00:40:58Gosto de ir entre as coisas.
00:41:00Mas não me vejo necessariamente saindo.
00:41:04Eu posso simplesmente mudar, e posso apenas alterar o código no modo
00:41:07de código.
00:41:08Então posso fazer isso se eu quiser.
00:41:11Mas sim.
00:41:12Acho que o v0 também se conecta ao GitHub, certo?
00:41:15Então você também pode ter um repositório para isso.
00:41:17Sim.
00:41:18Sim, então você pode entrar e sair facilmente, com certeza, sim.
00:41:21Mas é muito estranho porque temos uma mistura na comunidade que
00:41:24são puramente...
00:41:26uma vez que entram no v0, eles nunca mais saem.
00:41:28E se torna o todo deles...
00:41:30é o editor deles.
00:41:31É assim que eles desenvolvem software daqui para frente.
00:41:34Mas então você tem pessoas como eu.
00:41:36Eu prefiro fazer um pouco no v0 porque o v0
00:41:39é muito bom em design, e depois tirar de lá depois que eu
00:41:42tenho o bom design, o tipo de esqueleto que eu quero,
00:41:46e então programar o resto eu mesma.
00:41:48Porque eu sou parecida.
00:41:50Às vezes sinto falta de realmente passar pelo código
00:41:53e limpar as coisas e escrevê-lo.
00:41:56Então sim, é sempre muito interessante para mim como
00:41:59as pessoas pensam sobre essas coisas.
00:42:00E acho que se você quiser colaborar com outra pessoa,
00:42:03talvez compartilhar o repositório do GitHub, existem
00:42:04elementos disso em que alguém assume e, você sabe, então.
00:42:09Sim, não, isso é legal.
00:42:11Você não pode colaborar no v0 também, certo?
00:42:15Eu sei.
00:42:16Você pode compartilhar.
00:42:18Você pode compartilhar.
00:42:18Mas acho que uma vez que você compartilha, você tem que duplicar o chat.
00:42:23Tipo, é quase como um novo branch.
00:42:25Sim, sim.
00:42:26Uau, essa é boa.
00:42:27Isso seria divertido.
00:42:28Poderíamos estar, tipo, bifurcando ao mesmo tempo.
00:42:30Sim, como pequenos Google Docs ou algo assim.
00:42:32Sim, isso soa bem.
00:42:35Incrível.
00:42:35Tem mais alguma coisa que vocês vão nos mostrar
00:42:39da comunidade hoje?
00:42:40Não sei.
00:42:41Tipo, é óbvio?
00:42:43Acho que mostramos como adicionar o MCP da Sanity.
00:42:48Sim.
00:42:49Então, se você perdeu isso, você deveria ser capaz de ir à nossa documentação
00:42:52e encontrar, tipo, o servidor MCP e todas as instruções
00:42:56lá, ou apenas, tipo, apenas perguntar ao agente.
00:42:58Tipo, como você obtém a Sanity?
00:42:59E deveríamos ser capazes de lhe dizer.
00:43:01Foi o que eu fiz, certo?
00:43:02Eu perguntei apenas, tipo, o que ele está fazendo e, você sabe.
00:43:05Sim.
00:43:06E então, sim, deixe-nos saber como vai.
00:43:10Você provavelmente pode perguntar coisas na comunidade da Vercel.
00:43:13Nós também temos uma comunidade.
00:43:15Você pode participar de todas as comunidades, certo?
00:43:17Sim.
00:43:18Mas é algo que impulsiona...
00:43:20sim, é algo que impulsiona essas ferramentas de desenvolvimento para frente,
00:43:23certo, comunidade, tudo.
00:43:25Com certeza.
00:43:26Sim, estamos no Discord.
00:43:27Então você pode, tipo, deixar coisas lá.
00:43:29Temos um canal separado para o MCP,
00:43:31por exemplo, com engenheiros que estão por lá
00:43:33que provavelmente podem responder a todas as perguntas muito intrínsecas...
00:43:36intrínsecas, é essa a palavra?
00:43:37Perguntas muito detalhadas que você possa ter.
00:43:39Detalhadas, sim.
00:43:40Intrínsecas.
00:43:41Essa é a tal.
00:43:41Essa é...
00:43:42Sim.
00:43:43Sim, é difícil às vezes.
00:43:44Nós também encontramos Evelyne e eu nas redes sociais,
00:43:48tipo, LinkedIn, X, Blue Sky, o que for.
00:43:50Provavelmente estamos lá.
00:43:52Até no Instagram.
00:43:53Até no Instagram.
00:43:55Incrível.
00:43:56Bem, obrigado a ambos pelo seu tempo.
00:43:58Isso foi fantástico.
00:43:59E novamente, as pessoas que têm participado,
00:44:01adorei a troca de chapéu ali.
00:44:04Deveríamos ter começado com isso.
00:44:05Sinto muito.
00:44:07Esqueci de trocar.
00:44:08Onde está meu chapéu?
00:44:08Eu não ganhei um chapéu.
00:44:10Teremos que fazer outros, tipo, 40 minutos, eu acho,
00:44:13porque você tem o chapéu real agora.
00:44:16Não, isso foi fantástico, pessoal.
00:44:18Muito obrigado por participarem.
00:44:20E sim, tenho certeza de que teremos vocês aqui novamente
00:44:22conforme a Sanity se desenvolve e vemos
00:44:24mais dessas, tipo, colaborações entre Vercel
00:44:28e Sanity.
00:44:28Mas muito obrigado a ambos pelo seu tempo.
00:44:32Obrigado a todos.
00:44:35Incrível.
00:44:36Quão divertidos eles foram?
00:44:37Absolutamente amo essas sessões de parceiros.
00:44:43Acho que são meus favoritos porque eu realmente
00:44:45amo ver como as pessoas usam o v0 em cima de coisas,
00:44:49tipo camadas em cima dele, para garantir que, sim, você pode
00:44:54literalmente apenas construir qualquer coisa.
00:44:55Absolutamente amo isso.
00:44:57Então temos mais alguns eventos da comunidade
00:45:01acontecendo praticamente toda semana.
00:45:04Então definitivamente sintonizem-se nisso.
00:45:06Se você for em [community.vercel.com/events](https://community.vercel.com/events),
00:45:09você deve encontrar uma lista de nossos eventos online e presenciais.
00:45:13E também na próxima semana, se você estiver no React Miami, eu estarei lá.
00:45:17Então espero que possa ver alguns de vocês lá também.
00:45:21Mas sim, muito obrigado a todos por participarem.
00:45:24E sim, nos vemos aqui na próxima semana.

Key Takeaway

A combinação do v0 com o MCP do Sanity permite o desenvolvimento rápido de aplicações complexas e escaláveis, utilizando o Content Lake como uma fonte única de dados estruturados em vez de arquivos locais fixos.

Highlights

  • A integração do MCP (Model Context Protocol) do Sanity ao v0 permite a geração de esquemas, conteúdo real e consultas em tempo real diretamente na interface de chat do agente.

  • O uso do Sanity como backend de conteúdo elimina o problema de dados dispersos em arquivos Markdown ou JSON, centralizando informações em uma API hospedada chamada Content Lake.

  • A linguagem Grok permite consultas específicas de JSON e geolocalização, facilitando a filtragem de dados sem sobrecarga ou subutilização de parâmetros.

  • O protótipo de um 'pub crawler' em Londres foi desenvolvido em aproximadamente seis horas, utilizando Next.js, Shadcn UI e o MCP do Sanity sem digitação manual de código.

  • O portable text permite o armazenamento de conteúdo estruturado rich text, semelhante ao Notion, que é facilmente consumível por aplicações React ou nativas.

Timeline

Integração do Sanity no Ambiente v0

  • O Sanity atua como um backend de conteúdo que armazena dados estruturados em uma API hospedada denominada Content Lake.
  • A conexão do servidor MCP do Sanity ao v0 possibilita que agentes criem projetos, esquemas e modelos de conteúdo de forma automatizada.
  • O uso de arquivos Markdown ou JSON locais em protótipos rápidos torna-se ineficiente e difícil de sincronizar à medida que o projeto ganha complexidade.

O Sanity resolve limitações de gerenciamento de estado em agentes, onde a dispersão de dados em múltiplos arquivos causa dessincronização. A configuração ocorre diretamente via chat no v0, adicionando o plug-in MCP, o que autoriza o agente a gerenciar o ciclo de vida do conteúdo e realizar chamadas de API em tempo real.

Desenvolvimento e Iteração de Protótipo

  • A construção de um 'pub crawler' em Londres demonstrou a capacidade de criar jornadas de usuário variadas, como listagens, quizzes e roteiros personalizados, a partir de um único conjunto de dados.
  • O processo envolveu um planejamento inicial para definir o modelo de dados antes da codificação ativa com agentes.
  • A consulta de dados e a implementação de filtros complexos consumiram poucas linhas de código devido ao uso da sintaxe Grok e parâmetros dinâmicos.

O projeto serviu como uma primeira experiência prática com o MCP do Sanity. O uso de agentes exigiu uma mudança de mentalidade, passando do controle manual do código para a orientação estratégica do fluxo de trabalho. A estrutura de dados (esquemas) permitiu reutilizar elementos como 'pubs' e 'áreas' em diferentes seções da aplicação sem duplicação.

Escalabilidade e Manutenção de Conteúdo

  • A utilização de referências no Content Lake impede a duplicação de dados, permitindo que uma atualização central reflita em toda a aplicação.
  • O Portable Text fornece flexibilidade para criar conteúdo estruturado e formatado em blocos, sendo ideal para sistemas editoriais colaborativos.
  • A colaboração humana em projetos baseados em agentes permanece importante para toques editoriais específicos e otimizações de segurança antes da produção.

A discussão abordou a prevenção de desvio de conteúdo em sistemas de grande escala. O modelo de dados estruturados permite que uma única fonte da verdade alimente múltiplos pontos de acesso. O fluxo de trabalho demonstra que, embora agentes de IA realizem a maior parte da codificação, a curadoria humana é essencial para manter a qualidade editorial e o contexto pessoal em produtos finais.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video