Pero es que la gente de Vercel ha sacado V0 Chat, que sería como la inteligencia artificial para pedirle con prompts una UI.
Justo antes he dicho, ostras, voy a evitar ver el tutorial para que lo veáis conmigo.
Pero básicamente es como un chat conversacional para crear cualquier UI.
Y es un experto de TypeScript, de Riat, de Next.js, de Vercel y otras tecnologías frontend.
Le puedes ir comentando lo que quieres que vaya haciendo, puedes ejecutar el código, le puedes preguntar, o sea, puedes preguntarle sobre el código.
Y puedes hacer que el chat sea la experiencia por defecto.
Que eso lo vamos a hacer ahora.
Aceptamos y continuamos.
Se supone que ya podríamos decirle.
¿Qué le decimos, amigos?
El Twitter para desarrolladores, tío.
Le voy a decir, I want to create a Twitter clone, but for developers, start with the UI.
O the home UI.
¿Vale?
Entonces, le damos a Enter.
Y esto, ahora la UI ha cambiado totalmente, porque si os fijáis es más, como, mira, la verdad es que la UI está bien bonita.
Te dice aquí que es el archivo, el React component.
Me está creando aquí lo que sería la UI.
Le voy a decir que me lo ponga en modo oscuro.
Make it dark mode.
Vale, te va explicando por aquí la UI responsive.
Dice que la UI responsive.
Bueno, responsive de aquella manera, tampoco te pases, ¿no?
Nos ha dejado aquí el código ya para copiar.
¿Vale?
Aquí teníamos todo el código.
Vamos a iterarlo para hacer que funcione.
Porque, claro.
Ah, mira, qué buena idea.
Add code snippet.
A ver, le das a post.
Vale, no funciona nada.
Mira, para mejorar, diste, puedes considerar Sinta Highlighting, Dark Mode.
¿Vale?
Vamos a añadir cosas.
Que haga Dark Mode.
A ver si lo hace Dark Mode.
¿Vale?
Va a modificar el componente.
Utilizando.
Este es el componente actualizado con el Dark Mode.
¿Vale?
¡Ojo!
Me gusta, me gusta.
Vale, vale.
Bien, bien.
No sé si esto costará mucho.
Pero, bueno.
Más o menos.
Este botón...
Ah, vale.
Está en ello.
Ahora está tardando más, ¿eh?
Me gusta porque además puedes tener como las versiones.
Aquí te van apareciendo como las versiones.
Ahora está tardando más, ¿eh?
Ahora está tardando más.
Ahora está...
Te está costando.
Vale, vale.
Bueno, a mí me lo he intentado, ¿no?
Bueno.
Tampoco es que sea muy para allá, pero bueno.
Vamos a hacer el Thim Toggle.
Nada.
Implementa el Syntax.
Le voy a decir que...
Le voy a decir una funcionalidad.
Más que me haga estilos, porque estilos es un poco aburrido.
Le voy a decir que me haga la funcionalidad.
Le voy a decir que...
Make the post button to work and add to the UI the post written by the user.
Le voy a decir que tenga soporte para Markdown.
Pero es verdad que...
A ver.
Le cuesta...
Ojo, ojo.
Se veía ahí el código, ¿eh?
Se veía ahí el código.
Claro.
El tema es...
Se ve...
O sea, me parece una idea muy buena, pero cuanto más grande es el proyecto, más lento
va a ir, porque va a tener que estar constantemente iterando sobre lo que tiene.
Entonces, yo creo que más que crear un proyecto grande, yo creo que puede venir bien para
hacer un componente pequeño.
¿Sabes?
Para hacer...
Por ejemplo, para hacer un clon de Twitter, pues te va a costar la vida.
A ver, por ejemplo...
Hola.
¡Ojo!
Aquí está, ¿eh?
¡Ey!
Hostia, hostia, madre mía.
Vamos a ver si se puede hacer que funcione el like.
Make the like button to work.
Sí, pídele que haga el ticket de la middlecom y que se...
Que va.
Ahí se queda un poco...
Ahí se va a quedar un poco de aquella forma, ¿eh?
Vale, vale.
Pues venga, a ver.
A ver ahora si...
A ver, que funcione el botón de like, que es bastante fácil.
Ahora le voy a pasar algo más difícil.
De hecho, le voy a pasar una cosa.
Voy a hacer una cosa.
Porque una cosa que he visto que se puede hacer, que está muy chula, es que le puedes
pasar imágenes, tío.
Voy a hacer una cosa.
Me voy a descargar mi nueva foto de Twitter, ¿vale?
Y le voy a decir...
A ver, el like...
Hostia, mira, mira, mira, ¿eh?
Ahí está el like funcionando ya, ¿eh?
Y a ver...
A ver si esto funciona.
Vamos a darle post.
Y ahí está el like funcionando, ¿eh?
Dile que se conecte a la API de Twitter y te muestre los tuits de tu cuenta.
Vale, voy a hacer dos cosas.
Uno, le voy a pasar la foto y le voy a decir...
A ver si la abusa.
A ver si lo entiende.
A ver si lo entiende.
La verdad es que...
Momento...
A ver, a ver, a ver.
A ver si añade...
¿Sabes?
Le puedes pasar una imagen y tal.
Lo que pasa es que es lo que digo que...
Mira, y lo sube a Vercell Storage.
Qué bueno.
Qué bueno, la verdad.
Lo que pasa es que...
Claro, conforme...
Más va iterando, más le cuesta.
Cada vez es más lento.
Cada vez es más...
¿No puedes escribirlo en español?
Ah, lo pruebo.
¡Ojo!
¡Ojo!
¡Ostras!
¡Qué fuerte!
¡Ostras!
¿Cómo ha mejorado la UI en un momento, eh?
¿Cómo ha mejorado la UI en un momento?
¡Ostras!
¡Ojo, cuidado, eh!
¡Ojo, cuidado que se viene el Twitter para desarrolladores, eh!
A ver, voy a ver si le añado aquí...
Si le añado aquí...
Hola.
A ver si me pone...
¡Ostras!
¡Madre mía!
¡Madre mía!
Le voy a escribir en español.
Haz que se pueda escribir código en el input y que lo resalte correctamente al mostrarlo al resto de usuarios entre los posts.
Mira, en español.
Claro, vamos a implementar la funcionalidad para escribir código en el input y mostrar los resultados de los posts.
Para esto utilizaremos la biblioteca React Syntax Highlighter.
O sea, que encima añade dependencias de terceros, eh.
React Syntax Highlighter.
¡Ostras, eh!
¡Madre mía!
Más que bueno.
Dice, molaría que fuese más reactivo.
De forma...
¡Hostia!
Ahora le está costando, eh.
Ahora sí que le está costando, de verdad.
Ahora sí que le está costando.
Como que...
Como que no se ve nada, eh.
A ver si cuando termine el código, porque todavía está ahí...
Molaría que fuese más reactivo, como que lo modificase y que no tuviese que refrescarse todo entero.
Pero aquí...
¡Ojo, ojo!
Que lo tenemos, que lo tenemos.
Que vuelve, que vuelve.
A ver...
Write Cyber...
Hostia, pero se ha roto, ¿no?
Ah, no.
¡Ojo!
¡Ojo!
¡No me lo puedo creer!
¡Ojo!
Add Code.
Code Mode On.
Y aquí podemos poner Function, Say High...
Console.log...
¡Hola!
¡Guau, guau, guau!
¿Y lo posteamos?
No está mal.
Dile que si no te dice quién es el asesino, le vas a disparar en la pierna XD.
Eso que hicimos ayer.
Le voy a decir...
En lugar de tener un botón para el Add Code, haz que el input acepte Markdown directamente,
tanto para bloques de código, como para negritas y cursivas.
Y que todo lo renderice correctamente.
Tremendo.
La verdad es que esto que han sacado...
No sé, no me queda muy claro cuánto cuesta esto.
Creo que es, ahora mismo, la mejor experiencia que he visto así de crear una UI.
Ya os digo que lo malo es que cuanto más lo iteras, más tarda.
Se nota que cada vez le cuesta más.
No sé si lo estáis notando.
Esto que estamos haciendo, no sé cuánto dinero debe costar, pero debe costar bastante.
Porque yo veo que hay mucho movimiento de tokens.
O sea, no sé cuántos créditos me estoy gastando.
Yo estoy pagando el premium.
No sé cuántos tokens estoy gastando, pero algo me dice que estoy gastando bastantes.
Bastantes.
Y luego cada vez le va costando más, está generando más y le cuesta mostrarlo.
Mira, de hecho ahora no lo está mostrando y aquí parece que ha terminado.
O sea que no sé.
Parece que se ha quedado...
Hasta aquí ha llegado.
No sé si puede ser que haya un error de código.
Terminar parece que ha terminado.
Le puedo intentar decir.
Parece que hay...
Te quedaste sin tokens, también puede ser.
Parece que hay un error en el código y se ha quedado todo blanco.
Mira a ver si lo puedes solucionar.
O a ver si me he quedado sin tokens.
Si me he quedado sin tokens sería increíble porque significa que acabo de gastar 20 dólares.
Si me he quedado sin tokens, significa que me acabo de fullir en directo 20 dólares.
Directamente.
Para que os hagáis un poco la idea.
Así que espero que no.
Entiendo que la pantalla se ha quedado en blanco, lo cual generalmente indica un error.
Vamos a revisar el código y hacer algunas correcciones para solucionar el problema.
Aquí está el componente de react corregido.
Bueno, bueno.
Vamos a ver.
Vamos a ver.
Vamos a ver si lo intenta.
Bueno, aquí podemos ver un poco el código.
Mientras.
Esto es el handle post.
Se está haciendo el trim.
Además le puedes poner como un quote.
Puedes votar que esté mal.
Aquí sería para los set post.
Tampoco es que está haciendo nada raro con el tema del markdown y tal.
Pero sí, no.
El preview ya no aparece.
Como que se ha quedado...
Algún error o alguna cosa se ha quedado por ahí en medio.
Le voy a decir que lo arregle o le disparo en la pierna a esta inteligencia artificial.
A ver, vamos a ver.
Ahora que ha terminado.
Se ha quedado funcionando en el 6.
El 6 sí.
El 7 no.
El 7 ya se ha quedado en blanco.
Y el 8 tampoco.
Me da la sensación como que funciona muy bien.
La verdad es que es impresionante.
Las cosas como son.
O sea, es impresionante como ha ido.
Sí, ya le he dado el refresh antes.
Aquí hay un botón refresh.
Aquí.
Refresh preview.
Pero como podéis ver, no termina de funcionar.
O sea, seguramente tiene algún error el código y no podemos verlo.
Encima, no tiene una consola.
Que a lo mejor sería útil, ¿no?
Que tuviese la consola para ver qué problema tiene.
La UI me gusta muchísimo.
La consola.
Dialogue content request.
Dialogue title.
Claro, esto no sé si es culpa nuestra de lo otro.
¿Existe una ya así, pero para back?
Para back.
Bueno, lo más parecido que tendría sería Chagepet, ¿no?
Para back.
Bueno, parece que no está costando.
No me ha costado nada, según esto.
Según por lo que estoy viendo aquí de coste de créditos.
Parece como que no me ha costado dinero.
No sé si me lo quitarán después.
O es que está en beta.
Y no sé si todo el mundo puede acceder.
No tengo ni idea si están probando.
Todavía está a prueba.
O sea, todavía es normal que no funcione correctamente del todo.
Pero muy interesante, ¿eh?
La verdad es que muy, muy, muy interesante.
Me gusta mucho la experiencia.
Creo que está muy llena o mejor.
Os voy a enseñar algunos ejemplos.
He visto este, que era el juego del Snake.
Que encima, fijaos que le dice...
Claro, le ha hecho un prom brutal, ¿eh?
Y le ha pasado los sprites del bicho.
Entonces, ha hecho el bicho con las imágenes que le ha pasado.
O sea, brutal, ¿eh?
Muy, muy bueno.
Este me ha parecido tremendo.
Con los sprites directamente, le ha hecho el juego.
No me digas que es gratis.
No será gratis esto, ¿eh?
Obviamente no va a ser gratis ni en broma.
Luego también un File Tree Editor.
Lo bueno de los chats es que podéis ver todo lo que ha hecho.
Ya veis que es un chat que ha estado aquí un buen rato, ¿no?
Como para arreglar algunas cosas y tal.
Pero esto no es gratis ni en broma.
Luego un File Tree Editor.
Que esto sí que ha sido bastante poquito.
Y aquí tenemos File Tree Editor.
Donde tenemos...
Puedes editar, por ejemplo, trabajos.
Encima con animaciones.
Midu Conf.
Fijaos, con animaciones podéis borrar también.
Interesante, interesante.
Bastante, bastante bien.
Luego se pueden hacer juegos.
En este caso con Framer Motion.
Con animaciones.
Tiene animaciones...
¿Ves?
Que se mueve, que no sé qué.
Reset Game.
Todas esas animaciones se las puedes pedir.
Aquí la verdad es que ha estado bastante.
Aquí sí que la ha pedido...
Han estado hablando bastante.
Pero ha quedado bastante bonito al final.
Y este también he alucinado mucho.
Un clon del Paint.
Ostras.
Tremendo, ¿eh?
Tremendo.
Esto lo quiero hacer con JavaScript puro.
En los proyectos de JavaScript 100.
Lo quiero hacer con JavaScript puro.
Encima es súper sencillo, ¿eh?
Te pones a mirar el código y dices...
Ostras.
Bastante, bastante sencillo.
Puedes borrar.
Tienes aquí para escribir.
Ya los menús contextuales no funcionan.
¿Vale?
No funcionan.
Pero tienes aquí los colores.
Que puedes dibujar.
Le faltaría aquí a lo mejor algunas herramientas.
Pero ha sido bastante sencillo y además le ha pasado imágenes de referencia.
¿Ves?
Dice, vale, está bien porque podéis ver las...
Ah, no, no se puede ver las versiones.
Ah, qué pena.
Ah, sí, mira.
Esta fue la primera versión.
Esta fue la primera versión.
Esta fue la primera versión.
Y una vez que hizo la primera versión, entonces le pasó imágenes.
Le dijo, oye, pues quiero que se vea así.
Y dice, ah, vale, pues lo voy a hacer mejor.
Y entonces, a ver si, le hizo este.
Que como podéis ver, pues tenía errores.
Tenía errores, pero la UI ya empezaba a notarse mejor.
¿Veis?
O sea que, mira, hacía así y hacía así y hacía así.
Y aquí tenía el muñeco.
Y aquí las manos.
Y esto, un árbol feliz.
¿Vale?
Y luego, aquí, pues poco a poco como que lo iba iterando.
Dice, las acciones tienen que ser solo el guardar y el borrar.
¿Sabes?
No, no, muy, muy, muy bien.
Súper, súper genial.
La verdad es que tremendo, ¿eh?
Tremendo.
Y luego tendríamos por aquí, bueno, otro ejemplo de conversación.
Que en este caso es una landing page.
Le pasó, le pasó una foto de esto.
Y le dijo, venga, haz esto.
Y, bueno, aquí sí que le dijo que tenía que cambiar el logo y tal.
Le puedes pasar el SVG.
¿Ves aquí?
Le puedes decir, utiliza este SVG, no sé qué.
Y se lo cambió.
O sea, increíble, increíble.
Muy chulo.
Tiene muy buena pinta.
Me ha gustado, me ha gustado mucho.
Creo que de IA para programación de UI es como la mejor que he visto hasta el momento.
La de V0 chat, por ahora la mejor que he visto.
Veremos los precios.
Vamos a ver los precios porque obviamente esto es barato más a ser.
Y sí que creo que cuanto más vas iterando, cada vez como lo que he visto, ¿no?
Que cada vez cuesta más.
Lo podéis utilizar ya.
V0deb barra chat.
Y deberíais entrar aquí directamente.
Y ya veis que podríais hacer, podéis hacer un montón de preguntas.
Podéis utilizarlo como un chat para preguntarle sobre programación.
Como por ejemplo esto.
¿Cómo puedes implementar un Chrome Job Scheduler?
¿Vale?
Entonces te explica, no sé qué.
Pero luego también le puedes preguntar cosas de UI.
¿Ves?
Esto sería más para temas de programación.
Pero también le puedes preguntar cosas de UI.
Lo cual está muy bien.
Una cosa que me gusta mucho es que está bastante actualizado como por ejemplo para saber cosas de Vercell.
Ah, qué bien esto.
Hola Midu.
Hola.
Soy Data Engineer y Backend.
Actualmente quiero aprender un framework web para hacer cosas personales.
No es mi idea usarlo para algo profesional.
¿Cuál podrías recomendarme en cuanto a facilidad?
No importa el mercado laboral.
Pero hablas web.
Porque dices que quieres aprender un framework pero no sé si te refieres para Backend o para...
Ah, framework web.
Hombre, yo te diría, si es por facilidad, te diría Astro.
Porque además, Astro puedes hacer también temas de Backend, vas a poder hacer páginas estáticas, vas a poder hacer un poco de todo.
Y poco a poco vas a poder ir haciendo más cosas.
Y luego si lo quieres complicar más, pues te puedes ir a Nexies.
Me dieron la beta a Midu y justo tengo que hacer un sistema para un trabajo freelance.
Te amo, también amo a Guillermo Rauch.
Mira, se lo vas a poder decir en septiembre en la MiduConf porque el creador, el creador de Vercel y el que está detrás de V0 es Guillermo Rauch.
Y vamos a estar hablando con él el día de la MiduConf, el 12 de septiembre.
Y hablaremos, obviamente, de V0.
Y lo vas a hablar.