Sesión de la comunidad: Crea prototipos más inteligentes en v0 con Sanity MCP

VVercel
컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

00:00:00[AUDIO EN BLANCO]
00:00:30[AUDIO EN BLANCO]
00:01:00[AUDIO EN BLANCO]
00:01:14>> Hola a todos, es agradable ver a algunos de ustedes por aquí ya.
00:01:20Bienvenidos a la sesión comunitaria de Versailles de esta semana, me alegra mucho verlos aquí.
00:01:25Si es la primera vez que se unen a nosotros, hola,
00:01:28soy Pauline Navas del equipo de comunidad aquí en Versailles.
00:01:32Probablemente me hayan visto merodeando por nuestras plataformas comunitarias respondiendo preguntas.
00:01:37Y bueno, ahora pueden ponerle cara al nombre, lo cual siempre es muy emocionante.
00:01:44Así que sí, antes de comenzar, escriban un mensaje en el chat y
00:01:48déjennos saber desde qué parte del mundo se están conectando.
00:01:51Tenemos gente conectándose desde todas partes, y
00:01:53honestamente es solo una de mis partes favoritas de estas sesiones.
00:01:58Así que hoy, nos sumergiremos en algo realmente genial.
00:02:02¿Alguien aquí ha oído hablar de Sanity?
00:02:04[RISAS] Así que hoy, vamos a construir prototipos más inteligentes en V0 con el MCP de Sanity.
00:02:12Vamos a hablar de generación de esquemas, contenido real,
00:02:16consultándolo todo desde tu aplicación en vivo y en tiempo real.
00:02:20Ya sea que ya estés usando Sanity o que seas completamente nuevo en esto,
00:02:24hay algo en esto para ti y para todos.
00:02:28Así que sin más preámbulos, entremos en materia.
00:02:33Estoy muy emocionada de ver algunos de estos mensajes en el chat.
00:02:37Así que definitivamente sigan enviándolos durante toda la sesión.
00:02:39Nos encantaría saber de ustedes.
00:02:41Y sí, me encantaría darle la bienvenida al equipo de Sanity aquí con nosotros.
00:02:46Hola chicos, ¿cómo están hoy?
00:02:48>> Hola.
00:02:50>> Hola. >> ¿Cómo están?
00:02:51>> Bien, gracias.
00:02:52Es muy agradable charlar con ustedes.
00:02:54Y obviamente, realmente nos encanta hacer esto con nuestros socios y
00:02:58personas con las que colaboramos en la comunidad.
00:03:00Así que sí, realmente emocionada de tenerlos aquí.
00:03:02Voy a bajar del escenario ahora y dejar que ustedes dos comiencen.
00:03:09>> Eso es genial.
00:03:10Muy bien.
00:03:12Así que sí, hola, hola, Evelina.
00:03:16Estás llamando desde nuestra nueva oficina en Londres, ¿verdad?
00:03:20>> Sí, estoy en nuestra oficina de Londres.
00:03:23Desde hoy, tenemos esta oficina aquí, lo cual es muy divertido.
00:03:27Así que desde ahí estoy conectada.
00:03:29>> Y yo estoy llamando desde mi oficina en casa, que no es nueva, en Oakland,
00:03:34en el Área de la Bahía, pero también tenemos una oficina en San Francisco.
00:03:38Así que tenemos ese pequeño desfase horario interesante,
00:03:41que tal vez nos hace interrumpirnos un poco, pero veamos cómo sale.
00:03:46Así que sí, vamos, sí.
00:03:51Somos de Sanity, y probablemente deberíamos empezar por desglosar qué es Sanity,
00:03:56si no han oído hablar de él.
00:03:58Así que Sanity es un backend de contenido, lo que significa que puedes definir modelos de contenido
00:04:03en código o a través de MCP, como veremos muy pronto.
00:04:07Puedes almacenar todo como datos estructurados en una API alojada.
00:04:12Lo llamamos Content Lake, que es básicamente como una base de datos para contenido.
00:04:17Puedes consultar ese contenido con algo llamado Groq,
00:04:20que es como un lenguaje de consulta para JSON.
00:04:24Y luego puedes tener contenido tipado y consultable donde lo necesites,
00:04:30como en un proyecto de v0.
00:04:32Y creo que tal vez debería dar un pequeño paso atrás y hablar sobre cómo,
00:04:38si has construido con v0, probablemente hayas visto que pondrá tu contenido
00:04:43en archivos Markdown o tal vez en archivos JSON en tu proyecto, lo cual está bien
00:04:48si estás haciendo un prototipo rápido o algo simple como un blog o algo así.
00:04:54Pero cuando llega el momento de ponerse un poco más serio y usar algo que debería terminar
00:04:59en producción en algún lugar o ser un poco más complejo en términos de experiencia de usuario,
00:05:06esas cosas de Markdown comienzan a ser un poco molestas.
00:05:11Lo que he notado, no solo porque trabajo en Sanity,
00:05:14es que cuando hago estos proyectos yo misma, los agentes comienzan a tener dificultades
00:05:18para mantener las cosas sincronizadas cuando están repartidas en diferentes archivos, etcétera.
00:05:22Así que tienes que convencerlo de que lo haga.
00:05:25Sería bueno no tener que hacer esas cosas y gastar esos tokens
00:05:28en construir cosas realmente geniales, ¿verdad?
00:05:30Así que ahí es donde entra Sanity.
00:05:34Y vamos a mostrarte una demostración, o Lina va a mostrarte una demostración de lo que puedes hacer con él.
00:05:38Pero antes de sumergirnos en eso, siento que tal vez debería mostrarte cómo añadir Sanity a v0.
00:05:45Así que si podemos poner mi pantalla.
00:05:46Así que esto es v0.
00:05:48Esta es mi cuenta personal.
00:05:52Hemos hecho sacrificios a los semidioses.
00:05:55Así que espero que esto vaya bien.
00:05:56Pero cómo añadir Sanity debería ser bastante simple.
00:06:00Así que si tienes este cuadro de chat, puedes ir aquí al más,
00:06:06y hay algo llamado MCPs.
00:06:07Y un MCP es como un complemento para agentes, como la forma en que conectas un agente a otro servicio.
00:06:15Así que si presionas el botón de añadir nuevo aquí, obtienes esta lista.
00:06:19Y estamos aquí, abajo, en nosotros, Sanity.
00:06:23Y ahora deberíamos poder simplemente presionar esto.
00:06:26Y tenemos la configuración lista.
00:06:29Así que autorizar.
00:06:31Así que esto... probablemente ya estoy logueada.
00:06:34No, en realidad no.
00:06:35Así que tienes que iniciar sesión en la cuenta o crear una nueva.
00:06:41Vayamos con esto.
00:06:45Y luego puedes... veamos.
00:06:51Tengo muchas organizaciones y cosas.
00:06:54No tendrás eso si es la primera vez.
00:06:57Pero puedes autorizar con tu cuenta y cosas, y luego vuelves.
00:07:01Y ahora está conectado a Sanity.
00:07:03Así que lo que el servidor MCP puede hacer ahora es crear un nuevo proyecto para ti.
00:07:07Puede crear contenidos y documentos y modelos de contenido y todas esas cosas.
00:07:13Y también viene con habilidades, etcétera.
00:07:16Así que el agente puede aprovechar eso para mejores prácticas y cosas así.
00:07:20Y eso es todo.
00:07:22Y ahora podemos decir, haz un nuevo proyecto de Sanity para mi blog.
00:07:29Y él irá y hará eso.
00:07:33Así es como empiezas.
00:07:35Pero entremos en las cosas emocionantes y veamos qué podemos construir.
00:07:39Y aquí es donde entras tú, Evelina.
00:07:41Aquí es donde entro yo.
00:07:42Sí.
00:07:43Y lo genial es que Evelina se unió a nosotros desde un lugar llamado Love Holidays, que
00:07:48es un viaje... como viaje como un...
00:07:52Es una agencia de viajes en línea.
00:07:53Sí.
00:07:54Sí, es una agencia de viajes como servicio.
00:07:57Así que es esta aplicación bastante compleja con un montón de páginas de aterrizaje
00:08:02para todos los hoteles y lo que sea.
00:08:05Usas Sanity como el almacén de configuración para ese servicio.
00:08:12Sí.
00:08:13Usamos Sanity en Love Holidays para potenciar nuestra...
00:08:17tanto nuestro sitio web como nuestra aplicación.
00:08:19Así que básicamente almacenamos todo e hicimos mucho trabajo
00:08:21tanto en Sanity, lo cual es súper genial.
00:08:24Y Evelina, tú construiste estas cosas en un equipo con Sanity
00:08:29antes de que tuviéramos agentes que hicieran todo el código.
00:08:31Así que vienes de este viejo mundo de escribir este código a mano.
00:08:37Y luego lo que nos vas a mostrar ahora
00:08:39es tu primera ejecución adecuada con v0 y el MCP de Sanity.
00:08:44Así que es súper emocionante escuchar tu perspectiva
00:08:46sobre cómo se siente esto frente a la vieja forma de hacer las cosas.
00:08:53Pero me callaré ahora y dejaré que tú compartas la pantalla
00:08:57y tomes el control desde aquí.
00:08:59Increíble.
00:09:00Voy a entrar.
00:09:01Avísame.
00:09:02Voy a cambiar de pantalla ahora.
00:09:03Pero avísame si puedes ver todo bien mientras hago eso.
00:09:07¿Estoy mostrando v0 porque no puedo verlos?
00:09:09Sí.
00:09:10Se ve genial.
00:09:11Genial.
00:09:12Bueno, sí, tienes razón.
00:09:13Así que lo que hice fue que quería probar esto,
00:09:18probar cómo se siente usar v0, sin escribir nada a mano.
00:09:25Así que decidí seguir mucho la temática.
00:09:27Así que estoy en Londres.
00:09:29Acabamos de abrir una oficina en Londres aquí.
00:09:32Y pensé, todos los londinenses, mucha gente ama los pubs.
00:09:38Y hay muchísimos.
00:09:39Así que pensé, ¿qué pasa si construyo una ruta de pubs y un buscador de pubs?
00:09:43Así que veremos en un segundo.
00:09:45Tal vez solo muestre lo que puede hacer primero.
00:09:48Y luego podemos entrar en más detalles.
00:09:51Pero sí, esto es lo que construí. Pasé probablemente tres horas
00:09:55el viernes, tres horas el lunes.
00:09:57Así que no he pasado mucho tiempo en ello.
00:09:59Pero usé el MCP de Sanity.
00:10:01Así que todo funciona a través de eso.
00:10:02En realidad no he escrito ningún código.
00:10:04Le he pedido que itere cosas conmigo, por supuesto.
00:10:08Pero puedes explorar Londres.
00:10:09Así que puedes explorar Londres a través de las diferentes áreas
00:10:12si estás familiarizado con Londres.
00:10:13Soy una persona del norte de Londres.
00:10:15Así que esta sería mi área favorita.
00:10:17Realmente no me gusta el sur.
00:10:18Así que me gusta lo que hizo aquí.
00:10:20El sur hace lo suyo.
00:10:21Opinión impopular.
00:10:22Sí, opinión impopular aquí.
00:10:24Y luego tengo esto con lo que estamos obsesionados.
00:10:26Tengo estos diferentes pubs aquí.
00:10:29Tengo una pequeña suscripción por correo electrónico aquí.
00:10:32Tengo áreas aquí.
00:10:34De hecho, tengo un pequeño cuestionario aquí
00:10:36en el que podemos entrar en un segundo.
00:10:37Y también tengo esto con lo que puedes construir tu propia ruta,
00:10:41lo cual es súper emocionante.
00:10:43Y, sí, esto es similar.
00:10:44Esto es solo sobre...
00:10:47eso es un poco más de información.
00:10:48Pero eso es básicamente todo en pocas palabras.
00:10:52Así que esto es súper genial.
00:10:53Y lo que estoy viendo aquí es que hay muchas maneras
00:10:58de acceder al mismo contenido, ¿verdad?
00:11:01Sí.
00:11:03Todos estos diferentes viajes de usuario.
00:11:06Tu típico listado de cosas.
00:11:08Y luego está casi como un viaje de cuestionario
00:11:15y construir tu propia ruta.
00:11:16Y asumo que estás usando el mismo contenido de pubs de alguna manera.
00:11:21Exactamente.
00:11:22Así que lo que hice a lo largo de esto... tal vez
00:11:25simplemente empezaré con cómo empecé.
00:11:27Tal vez repasaré el primer aviso que hice.
00:11:30Así que le pregunté a un ingeniero cuando solía
00:11:32hacer ingeniería a tiempo completo.
00:11:34Yo era alguien a quien le gustaba
00:11:35planificar un poco con anticipación porque creo que
00:11:37puedes detectar cosas temprano entonces.
00:11:40Así que planifiqué.
00:11:40Iteré junto con Claude y simplemente planifiqué
00:11:44el tipo de aviso.
00:11:46Así que puedo repasar cómo fue eso primero.
00:11:48Esa no es la fecha final.
00:11:50Pero pensé que sería interesante ver
00:11:52mi proceso de pensamiento ahí.
00:11:54Eso es interesante.
00:11:54Así que tuviste una pequeña charla con Claude
00:11:59para adaptar ese primer prompt antes de pasar a v0.
00:12:02Sí.
00:12:04Sé que, obviamente, puedes simplemente improvisar, ¿verdad?
00:12:06Puedes simplemente seguir adelante y hacerlo.
00:12:08Me gusta bastante dar un paso atrás y pensar
00:12:10en lo que realmente quiero lograr.
00:12:12Así que para no precipitarme y, supongo,
00:12:15no complicar demasiado las cosas ni hacer demasiadas cosas a la vez.
00:12:18Definitivamente quiero...
00:12:21Tengo tantas ideas.
00:12:22Así que creo que dar un paso atrás para planificar
00:12:25es algo que disfruto hacer.
00:12:26Así que voy a repasar...
00:12:28Ese es un patrón bastante inteligente.
00:12:30Planificar la planificación, de alguna manera, ¿verdad?
00:12:32Planificar la planificación.
00:12:33Creo que como ingeniero, de nuevo, solía
00:12:35entender el problema.
00:12:37¿Qué intento hacer?
00:12:38Planificar.
00:12:38Y luego realmente programas.
00:12:40Y lo que me gustó de esto es que realmente
00:12:43empecé a programar más rápido.
00:12:44No me quedé atrapado en el modo planificación.
00:12:45Pero lo compartiré rápidamente.
00:12:48Esto es lo que hizo.
00:12:51Crea una página de inicio diferente, sistema de diseño.
00:12:54Es una aplicación de Next.js.
00:12:56Está usando shadcn/ui.
00:12:59Alguna dirección de diseño.
00:13:00Quería que estuviera muy tematizado, así que diferentes colores primarios
00:13:04y todo eso.
00:13:05De nuevo, esto probablemente sea un poco excesivo de todos modos.
00:13:08Pero me gusta bastante profundizar un poco.
00:13:11Y hay algo de tipografía.
00:13:13Y luego están los componentes a construir.
00:13:14Así que a medida que repaso esto, probablemente
00:13:17verás que no todas estas cosas están realmente ahí todavía,
00:13:19como que ya no están, porque iteré sobre ello.
00:13:23Pero sí, página de inicio, estas diferentes secciones.
00:13:27Y también notarás que lo que hice primero
00:13:32fue en realidad solo tener algo de contenido de marcador de posición.
00:13:34Así que eso en realidad no era una locura.
00:13:35Pero a medida que avanzaba, en realidad
00:13:38usé MCP para enseñarme de nuevo
00:13:41todas las mejores prácticas que en realidad son proporcionadas
00:13:44por el MCP de Sanity.
00:13:45Así que sí, eso fue todo.
00:13:50Genial.
00:13:51¿Y cómo fue?
00:13:54Bueno, está funcionando, ¿verdad?
00:13:55Está funcionando.
00:13:57No, fue realmente divertido.
00:14:00Es extraño no tener tanto control.
00:14:02Creo que ese fue un paso que tuvo que ser, oh, en realidad,
00:14:05voy a sentarme y guiarlo.
00:14:09Pero fue divertido ver cuánto podía lograr.
00:14:13Y siento que lo rápido que puedo desenredar el desastre que hay
00:14:17en mi cabeza a veces para realmente ser algo útil en lugar
00:14:22de sentarme y planificar.
00:14:23¿Así que deberíamos ver algo de código, tal vez?
00:14:26Acerquémonos a qué hizo realmente
00:14:29después de ese prompt, ¿verdad?
00:14:30¿Y cómo usa Sanity?
00:14:32Supongo que para eso estamos aquí.
00:14:35Así que sí, no estoy seguro de si puedes...
00:14:38¿vas a mostrar el chat?
00:14:41Puedo mostrar el chat.
00:14:42Estaba pensando si podemos mostrar algo de código también.
00:14:44Pero perdón, deslizando hacia ese lado.
00:14:51De hecho creo que sería quizás interesante mostrar
00:14:54lo último que hice.
00:14:56Porque, como dije, iteré sobre esto.
00:15:00Le pedí que...
00:15:02a medida que escalaba, a medida que añadía imágenes,
00:15:04a medida que añadía más texto y todo eso,
00:15:06no quería que nada estuviera codificado de forma rígida.
00:15:09Estoy pensando en esto como una especie de proyecto a largo plazo,
00:15:12aunque sea un prototipo ahora mismo,
00:15:14para prepararme para más éxito más adelante
00:15:17para enfoques colaborativos.
00:15:19Como que estoy pensando en esto como que somos mis amigos
00:15:21y yo quienes gestionamos esto.
00:15:23Y todo el mundo tiene gustos diferentes y todo el mundo
00:15:25tiene cosas diferentes que quiere decir.
00:15:27Así que lo hice de esa manera.
00:15:30Y al final, me aseguré de no
00:15:33querer que esto estuviera codificado, como dije.
00:15:36Y en lugar de decir, vale, voy
00:15:37a repasar todo el código y hacer eso o iterar,
00:15:40dije, ¿puedes usar las mejores prácticas de Sanity?
00:15:43Así que eso es básicamente lo que hice aquí.
00:15:46Pregunta retórica.
00:15:47¿Dónde encuentras las mejores prácticas para Sanity?
00:15:51Bueno, puedes encontrarlo...
00:15:52De hecho, lo tengo aquí.
00:15:56Puedes encontrarlo aquí si quieres leer lo que es.
00:15:59Está en nuestro kit de herramientas de agente aquí.
00:16:03Pero también puedes preguntar.
00:16:04Así que básicamente pregunté en el chat diciendo,
00:16:07¿puedes usar las mejores prácticas?
00:16:09Sí, y creo que el servidor MCP tiene esas a mano.
00:16:13Así que puedes traerlas al chat.
00:16:15Exacto.
00:16:16Así que sí, perdón, debería haber dicho eso.
00:16:17No tienes que salir fuera.
00:16:19Estás dentro.
00:16:20Hice todo exclusivamente desde dentro.
00:16:23Pero si quieres llevar esto a otro lugar, puedes... sí.
00:16:25Pero también imprime la habilidad y lee todas las habilidades.
00:16:28¿Verdad?
00:16:30Sí.
00:16:30No, pero creo que es valioso leerlo, de todos modos.
00:16:33Eso es lo que hice.
00:16:35Como dije, repasé lo que estaba haciendo.
00:16:39Y pensé, vale, genial.
00:16:40Sí, hace esto, y esto, y esto.
00:16:42Así que aprendes de esto también.
00:16:44Eso es solo que, me gusta aprender mientras lo hago.
00:16:46Sí, estaba bromeando.
00:16:47Pero en realidad es bastante interesante
00:16:49leer archivos de habilidades y ver qué...
00:16:53¿cómo piensan las personas sobre las mejores prácticas, verdad?
00:16:55Pero sí.
00:16:56Vale, genial.
00:16:57Pero podemos repasar un poco más,
00:16:59creo, quizás mirando cómo se ve esto, creo.
00:17:01Así que, por ejemplo, si miramos el código aquí, como dije,
00:17:07tenemos la parte de la aplicación.
00:17:09Así que eso es obviamente la aplicación Next.js,
00:17:10donde consulta todos los datos.
00:17:12Y luego también tenemos la parte de Sanity.
00:17:15Así que podemos ver los esquemas y cómo se ven.
00:17:18Así que tenemos el esquema de área.
00:17:20Tenemos el esquema de página de inicio, pub.
00:17:24Y todos estos tienen diferentes campos.
00:17:26Y sí, esto es una especie de...
00:17:29algunos de ellos probablemente...
00:17:31sí, perdón.
00:17:31¿Qué es un esquema?
00:17:33¿Cuál es el trabajo que un esquema hace por nosotros aquí?
00:17:36Bueno, básicamente... la idea es no...
00:17:40tienes que estructurar tu código de una manera
00:17:43para que pueda ser reutilizado en muchos lugares, ¿verdad?
00:17:45Así que en lugar de tener cosas codificadas, por ejemplo,
00:17:49como que he estructurado lo que es un pub.
00:17:51Como que, un pub tiene ciertos elementos.
00:17:53Así que un pub tiene un nombre.
00:17:54Un pub tiene un slug.
00:17:55Un pub tiene áreas.
00:17:57Así que todas estas cosas son solo estructuras.
00:18:00Y entonces puedo llevar eso a diferentes lugares
00:18:02en la aplicación.
00:18:03Así que, por ejemplo, el área, estos son el Este de Londres,
00:18:07todas estas cosas.
00:18:08Estos son vecindario.
00:18:09Algunos de ellos son requeridos porque siempre deberían
00:18:12estar ahí.
00:18:12Algunos de ellos no son requeridos porque no siempre
00:18:15deberían estar ahí.
00:18:17Puedes tener una matriz de...
00:18:20una lista aquí.
00:18:21Así que las características, tienen doc-friendly.
00:18:24Tienen música en vivo.
00:18:25Tienen todas estas cosas diferentes.
00:18:28Así que sí, todo está en código, lo cual es asombroso porque entonces
00:18:33puedes alimentar más cosas que solo tu aplicación.
00:18:37Sí, y supongo que si estás familiarizado con TypeScript
00:18:40y demás, estos pueden ser usados con la consulta Grok
00:18:43para hacer tipos en aplicaciones.
00:18:44¿Así que es más fácil para los agentes entender si, oh, estoy
00:18:49trayendo los datos correctos?
00:18:50¿Y estoy implementándolo de la manera correcta?
00:18:52O tendré errores de TypeScript que tengo que arreglar, ¿verdad?
00:18:55Sí.
00:18:56Y otra cosa interesante, no mostraremos esto en esta demostración,
00:18:59pero este esquema también puede ser usado para hacer una interfaz editorial,
00:19:05un lugar para que los humanos trabajen con este contenido también.
00:19:10Llamamos a eso Sanity Studio.
00:19:12Puedes revisar nuestra documentación y demás para empezar
00:19:14y funcionar con eso, pero sí.
00:19:16Pero también puedes simplemente usar el MCP para esto.
00:19:18Eso funciona realmente genial, especialmente
00:19:20cuando estás construyendo solo, ¿verdad?
00:19:22Cuando estás construyendo solo, creo que el MCP
00:19:24funciona igual de bien.
00:19:26Y luego cuando quieres colaborar con otros,
00:19:28configurar el estudio.
00:19:30Así que esto es todo...
00:19:31mencionaste antes, esto está todo en content lake ahora mismo.
00:19:33Así que todo está estructurado ahí.
00:19:36Una vez que quieres tener un estudio, solo
00:19:37lo llevas ahí en su lugar.
00:19:40Así que si vuelves al modo visual,
00:19:43Creo que tenías un listado de pubs por zonas.
00:19:46Sí.
00:19:48El norte de Londres, que es tu favorito.
00:19:51Sí, elegimos el norte de Londres.
00:19:52Es mi parte favorita porque vivo allí.
00:19:54Si bajas un poco.
00:19:57Sí.
00:19:57Así que sí, aquí.
00:19:58Y aquí tenemos filtros.
00:20:00Y no sé tú, Evelina,
00:20:04pero suelen ser un dolor de cabeza de implementar
00:20:06porque hay muchas cosas que considerar.
00:20:09Suelen ser un dolor.
00:20:10He trabajado mucho con filtros antes.
00:20:13Creo que las búsquedas y los filtros son un fastidio.
00:20:16Hay mucho que tener en cuenta.
00:20:18Así que también tengo mucha curiosidad: ¿cómo funciona
00:20:21esto en esta sesión relativamente corta?
00:20:24Y ¿cómo se ve la consulta de datos?
00:20:27Sí, podemos ver eso.
00:20:28Vamos a verlo para demostrar que realmente funciona.
00:20:31Creo que eso está bastante bien.
00:20:33Tienes diferentes ambientes.
00:20:35Tienes diferentes características.
00:20:36Tienes todo esto.
00:20:37Esto obviamente puede ampliarse.
00:20:40Pero podemos verlo aquí.
00:20:42Dios, ahora estoy pensando, ¿dónde está esto realmente?
00:20:46Así que creo que esto es solo la consulta de pubs.
00:20:50La programación en vivo no es mi actividad favorita.
00:20:53Así que...
00:20:55Hoy aprendí que hay una función de búsqueda en V0.
00:20:58Eso es muy útil.
00:20:59Sí.
00:21:00Como fanática de VS Code desde el principio,
00:21:03esto es muy útil para poder buscar cosas.
00:21:07Y puedes ver aquí que estamos importando
00:21:10estas consultas diferentes desde los archivos de consulta.
00:21:12Esto es de Sanity.
00:21:14Y estamos consultando...
00:21:16lo siento, esto no es lo que íbamos a repasar.
00:21:18Vamos a repasar el filtro.
00:21:21No, está bien.
00:21:22Pero lo que vemos aquí es que la parte de obtención de datos es...
00:21:26no es mucho código.
00:21:27Básicamente un par de líneas con esta consulta Grok.
00:21:32Así que lo que estás viendo aquí es la sintaxis Grok.
00:21:36Así es como estamos extrayendo estos datos
00:21:38desde Content Lake, ¿verdad?
00:21:40Exacto.
00:21:40Así que tenemos todas estas consultas diferentes.
00:21:43Y lo bueno es que estas consultas pueden ser muy específicas.
00:21:46Así que no estás sobreconsultando ni subconsultando.
00:21:49Estás creando exactamente lo
00:21:51que quieres y haciéndolo de la manera óptima.
00:21:54Y sí.
00:21:57Y luego, sí, estábamos viendo los filtros o algo así.
00:22:01Oh, sí.
00:22:01Lo siento.
00:22:02En realidad no he visto este código yo misma.
00:22:04Quiero decir que ha sido fascinante simplemente hacer esto.
00:22:08Y estoy segura de que hay algunas partes donde
00:22:12puedo optimizar esto, ¿verdad?
00:22:15Sí.
00:22:16Pero en realidad usa...
00:22:18parece que usa parámetros de consulta y esas cosas.
00:22:21Sí.
00:22:22Eso está usando parámetros de consulta.
00:22:25Aquí tenemos algunos...
00:22:28sí, lo siento.
00:22:29Oh, no, lo siento.
00:22:29No estaba aquí.
00:22:30Sí.
00:22:31Y luego algunos patrones interesantes de use state.
00:22:35Se siente bastante...
00:22:37hemos visto este tipo de código React antes.
00:22:40Sí.
00:22:41Definitivamente.
00:22:43Hay mucho de...
00:22:45esto probablemente pueda optimizarse.
00:22:46Así que si la gente está escudriñando este código,
00:22:49no lo he optimizado.
00:22:50Soy muy meticulosa con estas cosas también, pero...
00:22:53Estamos programando por “vibras”, creo.
00:22:54Estamos programando por “vibras”.
00:22:55Lo sé.
00:22:56Pero me gusta mirar el código y digo, oh.
00:22:59Pero es bastante genial ver lo poco de código
00:23:03que es para lo que hace, diría yo.
00:23:07Muy bien.
00:23:07Supongo que el tiempo está volando.
00:23:11Oh, sí, el tiempo está volando.
00:23:13¿Puedo mostrar esto?
00:23:14Siento que sería genial simplemente repasar...
00:23:16realmente no mostré esto en detalle,
00:23:19porque este en realidad...
00:23:21diría que no es muy accesible, así que no hagan eso.
00:23:24Pero lo que puedes hacer es simplemente agregar estas rutas,
00:23:27y luego tienes tu pequeño techo aquí.
00:23:30Y todo esto también se almacena en Sanity.
00:23:32Así que tenemos tu ubicación y todo eso.
00:23:34Así que en realidad puedes almacenar estas cosas en Sanity
00:23:37y simplemente traerlas.
00:23:38Y tienes esta pequeña impresión tan linda.
00:23:40No voy a hacer eso, porque está abierto y hay cosas.
00:23:42Pensé que algunas personas, como mi padre,
00:23:44querrían tener algo en papel.
00:23:46Así que pensé que voy a añadir algo
00:23:47para la generación más mayor.
00:23:52Esto debería ser una función de pago para despedidas de soltero, ¿verdad?
00:23:56Eso creo.
00:23:57Creo que esto sería...
00:23:58es lindo.
00:23:59Así que puedes filtrar por juegos de mesa.
00:24:02En verano, será la Copa del Mundo.
00:24:04Así que tal vez quieras filtrar por transmisiones de la Copa del Mundo, ¿verdad?
00:24:08Creo que sería genial.
00:24:09Y si puedo hacer una acotación rápida, estoy orgullosa de todas mis funciones,
00:24:12supongo.
00:24:13Adelante.
00:24:14El cuestionario también es algo que está configurado más
00:24:17para el futuro.
00:24:17Repasas esto.
00:24:19Y estoy capturando los datos por adelantado de forma estructurada.
00:24:23Pero estoy preparando esto para un mayor éxito editorial
00:24:26más adelante, para tener esto en Sanity Studio
00:24:29y tener más correos electrónicos de alcance.
00:24:31Así que sería un poco más editorial.
00:24:36Así que sí, de nuevo, esta es solo otra forma
00:24:39de llegar al mismo listado de pubs.
00:24:45Sí.
00:24:46Aunque esta es un poco más curada.
00:24:49En realidad obtendrás una lista curada,
00:24:51así que en realidad no obtendrás pubs aquí.
00:24:54Y también puedes imaginar que puedes hacer un agente de pubs encima
00:24:58de esto, ¿verdad?
00:24:59Así que simplemente hablas con el agente, y el agente
00:25:01recomendará algo.
00:25:04Exacto.
00:25:05Tenemos contexto de agente, que es muy nuevo.
00:25:07Y básicamente puedes ponerlo en marcha,
00:25:08y luego simplemente puedes tener esa interfaz de chat en su lugar.
00:25:11Si prefieres simplemente no chatear con humanos,
00:25:14puedes simplemente decir, oye, estoy buscando esto.
00:25:18Eso se hace muy, muy fácilmente gracias al contexto del agente.
00:25:22Y eso también se incluye con la habilidad.
00:25:27Sí, y supongo que tenías algo de un mapa.
00:25:31¿Cómo coloca los pubs en el mapa?
00:25:36Así que en realidad estoy...
00:25:39veamos el mapa más específicamente.
00:25:47Esto es... creo que esto también es [INAUDIBLE]
00:25:50Pero parece que usa coordenadas.
00:25:54Sí.
00:25:56Así que todo esto usa coordenadas que también
00:25:59se pueden consultar desde Content Lake.
00:26:03Es casi como si hubiéramos planeado esto, ¿verdad?
00:26:05Pero sí, como que Grok tiene...
00:26:08esta es una de las funciones no muy conocidas de Grok.
00:26:12Tiene consultas de geolocalización.
00:26:15Así que puedes decir, oye, encuentra los pubs que están a una milla de mí.
00:26:20Sí.
00:26:21Expresado en Grok, lo que parece también bastante útil
00:26:23en una aplicación como esta.
00:26:25Por supuesto.
00:26:26Esa sería probablemente una próxima función de ser un poco...
00:26:29esto está extrayendo los pubs que ya están ahí.
00:26:31Pero probablemente puedas simplemente decir, oh, estoy aquí,
00:26:34como extrayendo estas cosas.
00:26:37Oh, sí, puedes usar tu marcador de geolocalización, ¿verdad?
00:26:39O algo así.
00:26:40Sí.
00:26:41Siento que podrías simplemente darlo, ¿verdad?
00:26:42Literalmente podrías simplemente darlo.
00:26:44Quizás lo das a la interfaz de chat,
00:26:46y eso realmente lo hará por ti.
00:26:50Eso es genial.
00:26:51Sí.
00:26:52¿Queríamos hacer...
00:26:54vamos a hacer algo de programación...
00:26:58programación web en vivo?
00:27:00Podemos intentar.
00:27:03Dijiste antes, como web en vivo.
00:27:04No, pero podríamos hacer eso.
00:27:05Sé que hay una función que no está funcionando en este momento.
00:27:08Por ejemplo, si filtras de esta manera,
00:27:12esto es algo que no debería funcionar, ¿verdad?
00:27:14Como que idealmente no deberías poder llegar a este estado.
00:27:17Debería simplemente filtrarlo.
00:27:23¿O tenías algo más en mente?
00:27:25Sí, también sé...
00:27:26Lo sé porque lo he visto antes.
00:27:28Pero creo que la entrada del pub no
00:27:33tiene un campo de descripción de texto enriquecido o algo así, ¿verdad?
00:27:36Cierto.
00:27:37Cierto, cierto, cierto, cierto.
00:27:39No lo he añadido.
00:27:40No, tienes razón.
00:27:40Tienes razón.
00:27:41Y no estoy segura de si los dioses de la demostración por vibras
00:27:44son más benevolentes que los viejos dioses de la programación.
00:27:48Pero sería interesante ver si v0 y el agente
00:27:53pueden lograrlo.
00:27:55Entonces, ¿cómo haríamos el prompt aquí?
00:27:57Queremos un campo de descripción de texto enriquecido para los pubs, ¿verdad?
00:28:02Sí preparé esto un poco
00:28:05porque iba a...
00:28:06pensé que sería mejor.
00:28:09Queremos un texto enriquecido, ¿cierto?
00:28:11Como que queremos que resalte más.
00:28:12Así que sí hice eso.
00:28:14Y tenemos esto llamado “portable text”.
00:28:16Algo que aprendí y que me gusta hacer
00:28:19es añadirlo a una cosa y luego escalarlo sobre la marcha.
00:28:23No todo el mundo hace eso.
00:28:25Pero solo para hacerlo rápido y poblarlo.
00:28:28Así que tal vez no deberíamos hacerlo aquí
00:28:31porque no sé cuál.
00:28:33¿Cómo cambiamos esto al esquema de pub y poblamos los pubs?
00:28:37Ok, yo estaba tipo: solo hazlo (YOLO), Evelina.
00:28:40Lo sé.
00:28:41Siempre puedes volver atrás.
00:28:45Ok, hagámoslo.
00:28:46Ok, hagámoslo.
00:28:48¿Se nota que no me gusta arriesgarme frente a la cámara?
00:28:51Se nota.
00:28:55Creo que tenemos el enfoque más responsable.
00:28:58Pero siempre tengo curiosidad.
00:29:01¿Cuánto podemos lanzarles a estos agentes?
00:29:04¿Son capaces de probarlo?
00:29:06Y muy a menudo lo son.
00:29:07Y me sorprende.
00:29:09Lo son.
00:29:10Creo que ha sido algo, como dije antes,
00:29:12dejar de lado el control, lo cual fue agradable cuando
00:29:16lo hice, cuando me di cuenta de que estaba haciendo lo suyo.
00:29:18No tenía que... podía hacer otra cosa al mismo tiempo.
00:29:21Estaba tipo, ya sabes, veamos qué está haciendo.
00:29:24Así que está encontrando el paquete “portable text”, lo cual es bueno.
00:29:28Ya está instalado.
00:29:29Creo que ya tenía...
00:29:30Sí.
00:29:31A veces los agentes quieren escribir eso ellos mismos,
00:29:34lo cual es un desperdicio de tokens.
00:29:39Ah, así que actualizó el esquema.
00:29:43También lo desplegó.
00:29:45Está bien, genial.
00:29:47Así que no tengo que decir que necesito hacer esto.
00:29:49Lo está haciendo solo.
00:29:51Tengo que autorizar ciertas cosas, creo que eso...
00:29:55lo cual tiene sentido.
00:29:56Sí, todavía quieres tener un poco de control.
00:29:58Al menos yo sí, así que.
00:30:02Sí, cada acción destructiva,
00:30:05te pedirá tu aprobación primero.
00:30:07¿Estás seguro de que quieres hacer esto?
00:30:09Y creo que siempre existe la opción de “permitir siempre”
00:30:11si sabes que solo estamos bromeando aquí.
00:30:13Como que no importa.
00:30:16Pero cuando estás en producción, probablemente
00:30:18quieras ser un poco más precavido.
00:30:22Definitivamente, pero sí, está leyendo, está añadiendo.
00:30:29Es genial que también veas lo que está haciendo, ¿verdad?
00:30:32Ok, entonces sé, ok, estos son los archivos
00:30:34que voy a ver después si quiero revisarlos.
00:30:40Porque hablamos de esto antes.
00:30:42Parece que estas herramientas son muy poderosas
00:30:47y están permitiendo a personas
00:30:49que no han tocado código antes, construir cosas bastante geniales.
00:30:53Pero resulta que saber un poco de código
00:30:56y de ingeniería de software es muy útil, ¿verdad?
00:31:01Así que ten curiosidad sobre qué es el código
00:31:06e intenta entenderlo.
00:31:07Y probablemente también puedas pedirle al agente que lo explique
00:31:09si no tiene sentido, ¿cierto?
00:31:12Sí.
00:31:13¿Logró hacerlo?
00:31:16Lo estoy viendo ahora.
00:31:18Sí, aquí está el portable text.
00:31:22Hay un bloque.
00:31:24Entonces, “portable text” quizás...
00:31:26el “portable text” es una especificación de contenido en bloques.
00:31:30Es como en Notion y cosas así.
00:31:32Tienes diferentes bloques que puedes insertar.
00:31:36El “portable text” te permite hacer lo mismo básicamente, incluyendo
00:31:40formato de texto enriquecido.
00:31:41Y como todo se almacena como datos,
00:31:43es muy fácil tomar ese contenido
00:31:46e implementarlo aquí en React o en una aplicación nativa
00:31:49y cosas así.
00:31:51Así que sí.
00:31:52¿Lo hizo...?
00:31:53Sí, hay un montón de estos.
00:31:54Lo siento.
00:31:55¿También añadió el contenido a...?
00:31:58Esto es lo que probablemente debería comprobar, ¿verdad?
00:32:01Sí.
00:32:03No estoy tan segura de que se haya añadido.
00:32:04Quizás podamos pedirle que lo haga para este pub específicamente.
00:32:08Oh, sí, tienes razón.
00:32:09En realidad no estoy segura.
00:32:11Y añade algo de contenido aquí.
00:32:22Muy emocionante.
00:32:28Pensé que estaba pensando...
00:32:30Amigos, solo quería intervenir aquí, en realidad.
00:32:33[INAUDIBLE]
00:32:34Está haciendo lo suyo.
00:32:36Es muy agradable que la gente todavía
00:32:38esté mirando y claramente muy curiosa sobre cómo
00:32:41Sanity y v0 trabajan juntos.
00:32:43Tenía una pregunta, sin embargo, sobre el proceso de compilación.
00:32:46Evelina, mencionaste que pasaste seis horas en total.
00:32:51¿Cuánto de eso fue como hacer prompts versus revisar
00:32:55la salida versus iterar?
00:32:59Oh, wow.
00:33:01Siento que...
00:33:02Estaba tipo: no sé cuánto tiempo pasé en ello.
00:33:05Diría que más o menos...
00:33:08Empecé con prompts más grandes, ¿verdad?
00:33:11Y luego pensé, oh, en realidad, creo
00:33:13que sería mejor reducirlo.
00:33:15Así que simplemente iteré.
00:33:17Pasé un poco de tiempo con los permisos, lo que
00:33:20no sería un problema para otras personas,
00:33:21pero es que tengo muchas instancias de Sanity, ¿sabes?
00:33:25Y también hice saber a nuestro equipo de producto
00:33:27que esto puede suceder.
00:33:28Así que fue como solucionar problemas al mismo tiempo.
00:33:32Diría que probablemente pasé la mayor parte del tiempo iterando junto con él,
00:33:37pero fue un ejercicio divertido.
00:33:39Supongo que iterar sobre, oh, quiero esta función.
00:33:41No.
00:33:42Y me di cuenta de que, en realidad, esta función
00:33:44tiene sentido aquí en lugar de aquí.
00:33:45No fue iterar porque estuviera mal.
00:33:48Fue iterar porque descubrí
00:33:52nuevas posibilidades de lo que el contenido podía hacer.
00:33:55Y luego, cuando terminé, como dije, dije: Ok,
00:33:58ahora hemos terminado.
00:33:59Vamos a verlo.
00:34:00Vamos a borrar algo de código.
00:34:02Vamos a optimizarlo para que sea mejor.
00:34:05No tengamos nada codificado directamente.
00:34:06Todas estas cosas que no querría,
00:34:08que no eran importantes al principio,
00:34:10pero que son importantes para más de un estado final.
00:34:12Así que pensaba en esto como un producto terminado
00:34:14que puedo dar a la gente, ¿verdad?
00:34:15Sí, sí, sí.
00:34:16Eso tiene mucho sentido.
00:34:17Genial.
00:34:18Sí.
00:34:20Oh, me está dando una pequeña advertencia.
00:34:23Esta es la única.
00:34:25Creo que esto es divertido.
00:34:26Sí, esto es... vamos a permitir eso.
00:34:29¿Estamos bien de tiempo, Pauline?
00:34:30Me doy cuenta de...
00:34:30Sí.
00:34:31Tal vez, no sé.
00:34:32Absolutamente, sí.
00:34:33Tenemos unos 10 minutos.
00:34:36Así que siéntete libre de mostrar más de la demo.
00:34:37Creo que me quedaré por aquí y luego
00:34:39intervendré con preguntas mientras v0 piensa, como ahora de hecho.
00:34:44Sí, una pregunta que tenía era que hablaste sobre...
00:34:51que solías trabajar en Love Holidays,
00:34:53y tenías muchas landing pages.
00:34:57Así que cuando... sí, muchas landing pages.
00:35:02Pero, ¿cómo previene Sanity la desviación en términos de escala,
00:35:08escalabilidad, si es que tiene sentido?
00:35:11En términos de... lo siento, ¿puedes repetir eso?
00:35:14Entonces en términos de...
00:35:16Tenía curiosidad sobre cómo es esta escala.
00:35:20Por ejemplo, en Love Holidays, dijiste
00:35:23que tenías montones de landing pages.
00:35:25Y luego en esto...
00:35:26sí, ¿cómo previene Sanity la desviación?
00:35:30Espero haber hecho esa pregunta.
00:35:32Sí, no, lo siento.
00:35:32Creo que tengo...
00:35:34sí, o lo siento, ¿quieres ir?
00:35:37¿Tal vez como desviación de qué?
00:35:38¿Como del contenido?
00:35:39El contenido, sí.
00:35:42Para esto, por ejemplo, he definido qué es un pub.
00:35:47He definido qué es un área.
00:35:49Estas cosas son solo documentos, ¿sabes?
00:35:51Son documentos con tipos.
00:35:54Y podría... voy a... es como una fuente de verdad.
00:35:58Así que digamos que quería construir una landing page
00:36:01separada que tenga estos pubs y áreas,
00:36:04pero mostrados de una manera diferente.
00:36:05Podría hacerlo fácilmente simplemente pidiéndote que lo hagas.
00:36:08No va a duplicar el código.
00:36:09De hecho, solo va a usar lo mismo.
00:36:11Y si... ahora lo estoy haciendo con el Sanity TCP, ¿verdad?
00:36:15Pero si tuviera el estudio, podría simplemente actualizarlo en un solo lugar.
00:36:18Y eso irá a todas las páginas.
00:36:20Así que fluirá hacia la derecha.
00:36:22Sí, ok, eso tiene sentido.
00:36:24Sí, sí.
00:36:24Supongo que el lado más técnico de esto
00:36:26es que Content Lake admite algo llamado referencias.
00:36:30Así que es una sola pieza de contenido.
00:36:32Puedes decir: oye, quiero hacer referencia a esta entrada de publicación.
00:36:35Así que cuando lo encuentres, simplemente importa ese documento.
00:36:38Así es como evitas tener duplicación de contenido
00:36:42por todas partes.
00:36:43Y eso también es lo que facilita las cosas para el servidor MCP.
00:36:45Como, oh, estoy actualizando el documento.
00:36:48El documento, ese es el archivo.
00:36:50Lo actualizaré aquí.
00:36:51Y luego, donde sea que estemos usando esta descripción,
00:36:54también se actualizará, ¿verdad?, desde un solo lugar.
00:36:55Sí, exactamente.
00:36:57Sí, vale, vale, genial.
00:37:01Mira.
00:37:02Guau.
00:37:02Yay, mira eso.
00:37:05Yay, ¿por qué no es especial?
00:37:06Oh, por qué es especial.
00:37:07Pensé que no era especial.
00:37:08Yo estaba como, ¿qué?
00:37:10No te pedí que hicieras eso.
00:37:13Sí, esto es increíble.
00:37:15Es genial verlo suceder frente a ti.
00:37:18Sí, supongo que a medida que has estado haciendo este proceso,
00:37:22¿qué crees que todavía necesitas a un humano en términos
00:37:28de revisar todo este proceso de principio a fin?
00:37:34Sí, quiero decir...
00:37:35Oh, gran pregunta.
00:37:36Qué gran pregunta.
00:37:37Lo siento, chicos.
00:37:38Qué gran pregunta, Seth.
00:37:39¿Qué es?
00:37:397:32, estamos en Londres.
00:37:42¿Fue el agente el que preguntó eso, o?
00:37:46Todo yo, todo yo.
00:37:47Creo, quiero decir, esto es como...
00:37:51Lo estoy revisando a medida que avanzo, y es
00:37:53capaz de hacer tanto tan rápido,
00:37:55pero también estoy pensando en esto como algo
00:37:58que estoy compartiendo con otros.
00:37:59Me gusta tener algún tipo de aporte humano.
00:38:02Así que cuando se trata del lado más editorial de estas cosas,
00:38:06ahí es donde me gusta almacenarlo en un solo lugar,
00:38:10pero luego tener algún tipo de, vale,
00:38:12tal vez la IA ha generado automáticamente algo de texto,
00:38:15pero tal vez quiero añadir algo específico a lo que
00:38:17sé sobre Londres.
00:38:18Eso es simplemente especial para mí porque he vivido aquí durante seis años.
00:38:21Estas cosas, creo, son toques agradables
00:38:23para sitios como este que se supone que son muy personales.
00:38:28Software personal.
00:38:29Sí.
00:38:30Sí, 100%.
00:38:32Supongo que continuando con eso, ¿ustedes
00:38:34en Sanity usan v0 para su día a día,
00:38:39o alguna herramienta de agente de IA, supongo?
00:38:44Esta es mi...
00:38:45Para ser honesta, esta fue mi primera vez usando v0.
00:38:47Sí, he tenido la intención de usarlo.
00:38:50Es solo que mi día a día ahora está más en el lado del marketing
00:38:54y la comunidad.
00:38:55Así que me he estado inclinando hacia eso durante el último año,
00:38:58y he estado disfrutando mucho volver a codificar.
00:39:01Y ahora puedo ir de la nada a esto muy rápidamente y mostrarlo.
00:39:06Así que estoy empezando a pensar en cómo puedo hacer esto más a menudo cada semana
00:39:10para mostrar ciertas cosas.
00:39:12Así que a mí también me gustaría hacerlo.
00:39:14Sí, creo que podemos decir con seguridad que en Sanity,
00:39:17usamos la mayoría de las cosas.
00:39:22En parte para nuestro propio trabajo en desarrollo,
00:39:25pero también tenemos soporte de servidor MCP para v0.
00:39:29Así que probablemente deberíamos usar v0 para entender
00:39:33si funciona bien y demás.
00:39:35Así que es muy importante para nosotros usar estas diferentes herramientas
00:39:40para entender lo que nuestros usuarios también están experimentando, ¿verdad?
00:39:44Sí, y eso es... cuando dije antes,
00:39:47ahí es donde me tomé mi tiempo para también entenderlo
00:39:49mientras lo hacía y no apresurarme realmente al principio
00:39:52porque quería ver cómo está respondiendo MCP a esto
00:39:56y luego hacérselo saber a la gente.
00:39:59Sí, vale, eso tiene mucho sentido.
00:40:02Vale, genial.
00:40:03Tenía una pregunta aquí.
00:40:05¿Hay algún punto en el flujo de trabajo en el que dejarías
00:40:10v0 y lo harías manualmente?
00:40:14Supongo que esta es tu primera vez, Evelina, usándolo,
00:40:18pero supongo que hasta ahora, por tu experiencia,
00:40:21¿has sentido como, oh, vale, ya he hecho esto.
00:40:24Esto es suficiente de v0.
00:40:26Voy a sacar esto y luego echarle un vistazo.
00:40:29Creo que probablemente hay un mundo donde
00:40:32haría eso porque creo que es divertido hacer algo de gestión.
00:40:37Guau.
00:40:38Nunca escuchas eso en este caso.
00:40:40Casi lo extraño ahora que estoy trabajando en este tipo de cosas.
00:40:43Me gusta tener algo de tiempo concentrado y resolver algunas áreas,
00:40:46pero realmente no sentí la necesidad aquí.
00:40:48Lo único en lo que sí me salté fue idear en Claude
00:40:53solo porque tengo, no sé, habilidades configuradas.
00:40:56Tengo cosas allí donde estoy en mi flujo de trabajo.
00:40:58Me gusta moverme entre cosas.
00:41:00Pero no me veo necesariamente abandonándolo.
00:41:04Simplemente puedo cambiar, y puedo cambiar el código en el modo
00:41:07de código.
00:41:08Así que puedo hacerlo si quiero.
00:41:11Pero sí.
00:41:12Supongo que v0 también se conecta a GitHub, ¿verdad?
00:41:15Así que también puedes tener un repositorio para ello.
00:41:17Sí.
00:41:18Sí, así que puedes entrar y salir fácilmente, seguro, sí.
00:41:21Pero es realmente extraño porque tenemos una mezcla en la comunidad que
00:41:24son puramente...
00:41:26una vez que están en v0, nunca salen.
00:41:28Y se convierte en todo su...
00:41:30es su editor.
00:41:31Así es como desarrollan software en adelante.
00:41:34Pero luego tienes gente como yo.
00:41:36Prefiero hacer un poco en v0 porque v0
00:41:39es muy bueno en diseño, y luego sacarlo después de que
00:41:42obtengo el buen diseño, el tipo de esqueleto que quiero,
00:41:46y luego codificar el resto yo misma.
00:41:48Porque soy similar.
00:41:50A veces sí extraño revisar el código
00:41:53y limpiar las cosas y escribirlo.
00:41:56Así que sí, siempre es muy interesante para mí cómo
00:41:59la gente piensa sobre estas cosas.
00:42:00Y supongo que si quieres colaborar con alguien más,
00:42:03quizás compartir el repositorio de GitHub, hay
00:42:04elementos de eso donde alguien toma el control y, ya sabes, así que.
00:42:09Sí, no, esto es genial.
00:42:11¿No puedes colaborar en v0 también, verdad?
00:42:15Lo sé.
00:42:16Puedes compartir.
00:42:18Puedes compartir.
00:42:18Pero creo que una vez que compartes, tienes que duplicar el chat.
00:42:23Como, es casi como una nueva rama.
00:42:25Sí, sí.
00:42:26Whoa, esa es buena.
00:42:27Eso sería divertido.
00:42:28Podríamos estar bifurcando al mismo tiempo.
00:42:30Sí, como pequeños Google Docs o algo así.
00:42:32Sí, eso suena bien.
00:42:35Impresionante.
00:42:35¿Hay algo más que ustedes nos van a mostrar
00:42:39de la comunidad hoy?
00:42:40No sé.
00:42:41Como, ¿es obvio?
00:42:43Supongo que mostramos cómo agregar el MCP de Sanity.
00:42:48Sí.
00:42:49Así que si te perdiste eso, deberías poder ir a nuestros documentos
00:42:52y encontrar, como, el servidor MCP y todas las instrucciones
00:42:56allí o simplemente, como, simplemente pregúntale al agente.
00:42:58Como, ¿cómo obtienes Sanity?
00:42:59Y deberíamos poder decírtelo.
00:43:01Esto es lo que hice, ¿verdad?
00:43:02Pregunté simplemente, como, qué está haciendo y, ya sabes.
00:43:05Sí.
00:43:06Y entonces, sí, haznos saber cómo va.
00:43:10Probablemente puedas preguntar cosas en la comunidad de Vercel.
00:43:13También tenemos una comunidad.
00:43:15Puedes unirte a todas las comunidades, ¿verdad?
00:43:17Sí.
00:43:18Pero es algo que impulsa...
00:43:20sí, es algo que impulsa estas herramientas de desarrollo hacia adelante,
00:43:23verdad, comunidad, todo.
00:43:25Seguro.
00:43:26Sí, estamos en Discord.
00:43:27Así que puedes, como, soltar cosas allí.
00:43:29Tenemos un canal separado para el MCP,
00:43:31por ejemplo, con ingenieros que están pasando el rato
00:43:33que probablemente pueden responder a todas las muy intrínsecas...
00:43:36¿intrínsecas, es esa una palabra?
00:43:37Preguntas muy detalladas que podrías tener.
00:43:39Detalladas, sí.
00:43:40Intrínsecas.
00:43:41Esa es la indicada.
00:43:41Eso es...
00:43:42Sí.
00:43:43Sí, a veces es difícil.
00:43:44También encontrar a Evelina y a mí en las redes sociales,
00:43:48como, LinkedIn, X, Blue Sky, lo que sea.
00:43:50Probablemente estamos ahí.
00:43:52Incluso Instagram.
00:43:53Incluso Instagram.
00:43:55Increíble.
00:43:56Bueno, gracias a ambos mucho por su tiempo.
00:43:58Esto fue fantástico.
00:43:59Y de nuevo, la gente que se ha estado uniendo,
00:44:01me encanta el cambio de sombrero allí.
00:44:04Deberíamos haber empezado con eso.
00:44:05Lo siento mucho.
00:44:07Olvidé cambiarlo.
00:44:08¿Dónde está mi sombrero?
00:44:08No conseguí un sombrero.
00:44:10Tendremos que hacer otros, como, 40 minutos, supongo,
00:44:13porque tienes el sombrero real ahora.
00:44:16No, esto fue fantástico, gente.
00:44:18Muchas gracias por unirse.
00:44:20Y sí, estoy seguro de que los tendremos aquí de nuevo
00:44:22a medida que Sanity se desarrolle y veamos
00:44:24más de estas, como, colaboraciones entre Vercel
00:44:28y Sanity.
00:44:28Pero gracias a ambos mucho por su tiempo.
00:44:32Gracias, a todos.
00:44:35Increíble.
00:44:36¿Qué tan divertidos fueron?
00:44:37Absolutamente amo estas sesiones de socios.
00:44:43Creo que son mis favoritas porque realmente
00:44:45me encanta ver cómo la gente usa v0 en cosas adicionales,
00:44:49como capas encima de esto, para asegurarse de que, sí, tú puedes
00:44:54literalmente simplemente construir cualquier cosa.
00:44:55Absolutamente me encanta eso.
00:44:57Así que tenemos algunos eventos comunitarios más
00:45:01que vienen prácticamente cada semana.
00:45:04Así que definitivamente sintonícense en ellos.
00:45:06Si van a [community.vercel.com/events](https://community.vercel.com/events),
00:45:09deberían encontrar una lista tanto de nuestros eventos en línea como en persona.
00:45:13Y también la próxima semana, si están en React Miami, estaré allí.
00:45:17Así que espero poder ver a algunos de ustedes allí también.
00:45:21Pero sí, muchas gracias a todos por unirse.
00:45:24Y sí, los veremos aquí la próxima semana.

Key Takeaway

La combinación de v0 con el MCP de Sanity transforma el desarrollo de prototipos complejos al automatizar la gestión de datos estructurados, permitiendo construir aplicaciones escalables sin escribir código manual desde cero.

Highlights

  • La integración del MCP de Sanity en v0 permite definir modelos de contenido estructurado en código, eliminando la dependencia de archivos Markdown o JSON dispersos.

  • Un prototipo de buscador de pubs en Londres se completó con éxito en aproximadamente seis horas de trabajo utilizando agentes de IA y v0.

  • El servidor MCP de Sanity automatiza la creación de esquemas, documentos y la implementación de mejores prácticas directamente dentro de la interfaz de v0.

  • El lenguaje de consulta Groq habilita consultas de geolocalización específicas y la recuperación eficiente de datos estructurados para aplicaciones de próxima generación.

  • El uso de 'portable text' en los esquemas de Sanity permite integrar formato de texto enriquecido en bloques, similar a Notion, dentro de aplicaciones React.

  • Cada acción destructiva realizada por el agente dentro de v0 solicita la aprobación explícita del usuario para garantizar la seguridad del proyecto.

Timeline

Configuración e integración de Sanity con v0

  • Sanity funciona como un backend de contenido donde el modelo se define a través de código o MCP.
  • La conexión se realiza mediante la sección de MCPs en v0, autorizando el acceso a la cuenta de Sanity.
  • Los agentes de IA pueden crear proyectos, modelos y documentos de contenido basándose en las mejores prácticas integradas.

La integración se presenta como una solución para superar las limitaciones de los archivos Markdown en proyectos escalables. Una vez configurado el servidor MCP dentro de v0, el agente tiene la capacidad de generar la estructura de datos y los esquemas necesarios de manera autónoma, evitando la sincronización manual de archivos.

Desarrollo de un buscador de pubs en Londres

  • El proyecto utilizó una arquitectura basada en Next.js con componentes de shadcn/ui.
  • La planificación previa mediante chats con Claude permitió establecer una estructura antes de la generación en v0.
  • Los datos estructurados permitieron múltiples experiencias de usuario, incluyendo listados por área, cuestionarios y rutas personalizadas, a partir de una única fuente de verdad.

Se demuestra la creación de una aplicación compleja que categoriza pubs por áreas y características. A diferencia de los métodos tradicionales, toda la lógica de los esquemas se define programáticamente, asegurando que los componentes sean reutilizables y evitando la duplicación de código.

Optimización técnica y escalabilidad

  • La actualización de esquemas para incluir 'portable text' fue ejecutada autónomamente por el agente tras una instrucción del usuario.
  • El sistema previene la desviación de contenido mediante el uso de referencias en Content Lake.
  • Los agentes actúan como facilitadores de desarrollo, aunque el criterio editorial humano sigue siendo necesario para toques personalizados.

La sesión concluye analizando la capacidad del sistema para escalar. Se destaca que, al utilizar referencias de documentos en lugar de contenido codificado de forma rígida, los cambios en una sola entrada de datos se propagan automáticamente en toda la aplicación. La interacción entre el humano y el agente se describe como un proceso iterativo donde la IA maneja la complejidad técnica mientras el usuario define la visión estratégica.

Community Posts

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

Write about this video