v0.dev. ¿Qué es esto?
A landing page... ¡Ah!
Esto es una alfa. ¡Hostia!
Esto es lo de Eversell que iban a sacar.
¡Ah! ¡No!
Esto es de
Eversell, amigos. Justamente ayer
lo anunció Guillermo.
Justamente ayer estuvo
comentando Guillermo que iba a sacar una
inteligencia artificial que tú podías escribirle
y te generaba la
UI. ¿Vale? Y aquí tenéis,
por ejemplo, una UI generada
directamente
a través de inteligencia artificial.
¿Ves? Ha empezado aquí.
Haz que un retweet icon
como un no sé qué, no sé cuánto. O sea, versión 0.
Versión 1. ¿Ves? Añade
un círculo con la foto
no sé qué, no sé cuánto. ¿Veis?
Y conforme vas hablando
lo han ido cambiando. ¿Ves? Aquí Guillermo
hace dos días dijo, dame un ejemplo de un tweet de
Naval. ¿Ves? Pues
lo han ido iterando.
Lo han ido iterando. ¡Ostras!
¡Madre mía! ¡Madre mía!
¿Veis? Han ido iterando
conforme a lo que iban diciendo por aquí.
¡Ostras! ¿Veis? Aquí tenemos
pricing page. ¡Joder! Pues está súper chulo
el pricing page este. Está súper chulo.
Y mira, este fue ya el primero.
Get started for CTA.
Y aquí, haz que los checkmars
estén en la misma línea.
¡Hostia! Haz que el borde
del color... ¡Madre mía!
¡Madre mía! Esto sí que tiene buena pinta, ¿eh?
Esto sí que tiene buena pinta.
Bueno, habría que ver esto... ¡Ay! ¿Se le puede decir ya?
¿Se le puede decir ya? O sea, si yo le digo
por ejemplo...
¿Qué le podríamos decir?
Streaming platform like Twitch
with a section for the video
and a section for the chat messages.
Ah, vale. Que no lo puedo utilizar.
No lo puedo utilizar.
No lo puedo utilizar.
No lo puedo utilizar.
Yo ya estaba aquí hipeado.
¡Ah! ¡Dios mío!
Ya tengo acceso.
Ya tengo acceso.
Dios mío.
La cosa pinta bien, Dani.
La cosa pinta bien.
No, qué bien, ¿no?
O sea, de verdad que...
Está en Private Alpha.
Bueno, a ver si Guillermo me da...
Le tenía que haber pedido ayer acceso.
¡Guillermo! ¡Dame acceso!
Ya he pedido que nos den acceso.
La verdad, tiene muy buena pinta, ¿eh?
Me ha sorprendido mucho.
Que va bastante bien, ¿eh?
Bastante bien.
Está muy chulo que podéis ver aquí
cómo ha empezado.
Dice, rellenoid de copy y usa cache.
O sea, le pides
a hero component for an email client.
Y ya te hace esto, ¿eh?
Está muy chulo.
Y claro, le puedes dar a código
y aquí ves todo el código.
La verdad es que...
Y mira, puedes añadir el...
¡Uy, lo que es chulo es esto!
¡Qué chulo es esto!
Que te genera esto.
Te genera esto.
¡Ojo con esto!
O sea, no solo es que genera
como veis,
o sea, te va generando
como los componentes
mientras vas hablando
y todo esto, ¿vale?
Le vas diciendo
¡Muéveme esto!
¡Hace esto!
¡Haz lo otro!
O sea, están haciendo
una inteligencia artificial
que genera una UI.
O sea, sí, una UI completa.
Pero lo mejor de todo
es que le das aquí.
No me lo puedo creer.
Y puedes añadir...
A ver, vamos a probar esto.
O sea, podéis añadir...
Esto se ve muy bestia, ¿eh?
Van create next.
Mira, vamos a utilizar van y todo.
Vamos a utilizar van.
A ver si funciona.
¡Ay! ¿Qué ha pasado?
Ah, create next app.
Next app.
Vale, perdón.
Es que joder.
Van create next app.
Vamos a poner demo y ya.
Vale, le decimos que todo por defecto.
Vale.
Y ahora a ver qué tal.
Next app.
Gracias.
¡Ah!
Hostia, utiliza npm.
La verdad...
¡Ah!
¡Qué rabia esto!
Que no utiliza...
No utiliza van.
La madre que nos parió.
Es verdad.
Aunque utilices van,
luego no utiliza...
No utiliza van para hacer la instalación.
Pero bueno, vamos a tener paciencia.
Vamos a tener paciencia.
Pues pones demo ya, ¿vale?
Y según esto, según esto,
la ya te genera la UI.
Le das aquí.
Le das aquí.
Y esto le das aquí.
Y te va a añadir esta UI que ha creado.
O sea, vas a poder generar una UI.
Hacer esto.
¿Vale?
Vamos a ver si funciona.
A ver qué es lo que hace.
Y pero ¿dónde me lo va a guardar?
¿Sabes dónde me va a guardar este componente?
To create a components.json file.
Ah.
Introduction.
Ah, mira.
Hay que inicializar esto.
Vale, vale.
Hay que inicializar esto.
Vale.
Va.
Digo que...
Bueno, no sé.
Le digo que sí a todo.
No, no.
Necesita la configuración esta.
Una vez generado.
Vale.
Una vez generado.
Se supone que ahora sí podemos hacer esto.
Vale.
Ah, mira.
Le puedes poner el nombre.
Le vamos a poner el nombre midulanding.
¿Vale?
Ok.
Oye, oye.
Qué miedo me da esto.
¿Qué miedo?
Van.
Run.
Dep.
Vale.
En el 3000.
¿Y dónde me ha dejado esto?
Components.
Mira, midulanding.
¡Ojo!
¿Os acordáis que siempre os digo de utilizar los componentes con kebabcase?
Pues mira, aquí tenéis un ejemplo.
¿Veis?
Se ha generado con kebabcase.
Que luego reís, que decís, es que yo utilizo pascalcase.
Y yo os digo, es mejor práctica el kebabcase.
Pues mirad, ahí tenéis el ejemplo.
Vale.
Vamos a intentar añadir el midulanding.
O sea, ha generado esto.
Es que estoy flipando, ¿eh?
Estoy flipando muy fuerte lo que acaba de sacar Vercell, que nos hizo el spoiler ayer, ¿eh?
Justo ayer nos lo dijo.
Justo ayer nos lo dijo.
Vale.
Midulanding.
Hacemos esto.
Nos vamos aquí.
Localhost 3000.
Hostia.
Madre mía, madre mía, madre mía, madre mía.
Madre mía.
Madre mía.
Madre mía, amigos.
Qué pintaza tiene esto.
Para la gente que ha llegado tarde.
Vercell acaba de sacar una inteligencia artificial que te genera la UI de tu página web.
Aquí le puedes poner lo que quieres.
Por ejemplo, a hero section in dark mode.
¿Vale?
Le darías al enter.
Y esto, si tuviésemos acceso, te lo pondría.
En este caso, si pusiéramos eso, te generaría la versión cero.
La versión cero, que no se ve, empezaría aquí.
Esta sería la primera versión.
A partir de aquí, tú le puedes ir diciendo que vaya cambiando.
¿Ves?
Le puedes decir, regenera el copy y usa tal.
Vale.
Pues una vez que lo regenera, pum, versión uno, versión dos.
¿No?
Y así iría en incremental.
Cada vez que tú le vas pidiendo cosas, vamos viendo cómo va modificando la UI.
Pero lo mejor de esto es que ahora, si le das a code, puedes no solo copiarte el código con un copy-paste, sino que es que con un solo comando, que es este aquí, con este comando, ejecutándolo en tu proyecto que tengas next.js y chat.cn, puedes ejecutar este código.
Lo puedes tener y te lo va a crear en el componente con el nombre que quieras.
Le pones el nombre de componente.
¿Vale?
Aquí te lo genera y en tu proyecto, fíjate que tenemos aquí UI, te ha puesto el botón, el input y el componente, el nombre que tú quieras.
O sea, ha creado toda la UI que necesitabas, pues te la ha creado aquí.
Y aquí la tenemos.
Y ahora este componente ya lo puedes utilizar.
De hecho, lo acabamos de utilizar hace un momentito aquí y lo tenemos en nuestro proyecto y funcionando.
La verdad, sinceramente, tiene muy, muy buena pinta.
Funciona bastante, bastante bien.
Creo que es el mejor generador de UI que he visto que funcione.
Encima, es medio responsive.
A ver, no tendrá el mejor HTML.
Creo que tenía mucho...
Mira, tiene un H1, cosa que ya se agradece.
Está hecho con Tailwind.
O sea, no está mal.
No está mal.
Tiene mucho deep, pero bueno, no tiene mala pinta.
Madre, madre mía.
O sea, este proyecto de Vercel Labs tiene muy buena pinta y, sinceramente, al menos los ejemplos generados.
Por ejemplo, este.
Una aplicación del tiempo.
¿Veis?
Y cada vez le podéis ir...
Esto es como han empezado.
Esta sería la versión 0.
Que joder, madre mía.
O sea...
Y además te da más de una versión.
O sea...
Madre mía.
Aquí tenemos unos cuantos ejemplos.
Por ejemplo, a Cookie Consent Banner.
O sea, hace 18 horas.
O sea, Guillermo...
Guillermo Rauch dio aquí la charla.
Dijo...
Ah, pues estamos trabajando en una IA que genera UI aquí en Vercel.
Lo dijo ayer, ¿eh?
Lo dijo justamente ayer.
Y una vez cerró la llamada, el tío llamó, terminó la llamada y hizo...
Bueno, ahora voy a crear yo esto.
Hace 18 horas, justamente cuando terminó.
Dijo, venga, ahora voy a jugar con esto.
Ah, se lo podía haber comentado, pero no se lo comenté.
Madre mía.
O sea, no se spoileó.
No se spoileó.
Tal cual, tal cual.
Madre mía, qué buena pinta.
Vercel Toolbar Clon.
Guau, qué chulo.
Qué chulo.
A ver.
Tiene su cosa, pero claro.
Fijaos que a base de ir diciéndole proms.
Ha ido cambiando y tal, ¿eh?
Guau, la verdad es que tiene muy buena pinta.
Me gustaría, claro, hay que jugar con ello, probar.
Mira, una web de noticias.
Faltan las imágenes, pero ya ves tú.
O sea, es que te puede poner ahí los primeros pasos rápidamente.
A ver qué dice Raos.
B0.dp es 100% full stack Vercel.
Está construido con Next.js App Router.
Está utilizando el SDK I de Vercel.
Está haciendo streaming con React Server Components,
Server Site Rendering, streaming con Vercel Functions.
Mutaciones con Server Actions.
Está utilizando Key Value de Vercel.
Los flags, las builds con Turbo Repo
y Social Cards con Ock Image.
Madre mía.
Madre mía.
A ver, ¿creéis que lo harán de pago?
Porque esto, o sea, no sé si esto lo harán de pago.
Si lo van a dejar gratis, ¿qué van a hacer con esto?
Qué fuerte esto, tío.
V0.
Genera la UI con simplemente Text Prompts.
Copy, Paste, Ship.
Explora el Prompt Library y entra en la waitlist.
Madre mía.
Madre mía, la que han liado.
La que han liado, amigos.
Joder.
Es que el hecho de generarlo y copiar aquí,
eso me parece increíble.
Open Source para que el modelo aprenda y se depure después de pago.
Si no, que se aprovecha al principio y ya está.
Por cada hora que esté el componente en la web, 0,01 dólar.
Eso sería buenísimo.
Te da la base de tus UI y siempre da pie a mejorarlos.
Va a matar al Junior que no quiera adaptarse.
Yo creo que va a matar a cualquiera que no quiera adaptarse.
Al final, todas estas herramientas hay que aprovecharlas
para ser más productivos y enfocarte en los problemas
que esto no te soluciona.
Porque sí, esto está muy bien, que te dice Discover, Unique, Futures y tal.
Pero todavía te quedan un montón de cosas aquí por hacer.
Y sobre todo cuando ya tiene, por ejemplo, a Cookie Consent Banner.
Bueno, aquí le falta todavía un montón de...
Bueno, está muy bien que tiene, joder, lo de esto está muy bien, muy bien,
que funcione y todo.
O sea, no me digas que tiene estado.
No, no tiene estado.
O sea, es estado interno.
Claro, tiene estado interno.
No es que tenga estado que puedas ver y tal.
Pero bueno, que está súper bien.
O sea, me parece increíble y que nos va a facilitar un montón la vida.
Yo creo que una cosa que nos vamos a encontrar con la inteligencia artificial,
no sé si me equivocaré, pero me da la sensación que lo que vamos a tener es una...
O sea, en lo que estamos es una curva en la que ahora mismo está creciendo muy rápido
y la que creo que de repente vamos a ver que cada vez le va a costar un poquito más
el volver a sorprendernos, ¿no?
Pero esto desde luego me ha sorprendido.
Está súper chulo.
Me gustaría ver más ejemplos, ¿no?
A ver hasta dónde llega.
Pero mi sensación es que cada vez nos va a sorprender un poquito menos.
No lo digo como algo negativo.
Lo digo como que joder.
Que es que estamos llegando a unos puntos muy chulos
y que la gente se cree que esta evolución va a ser al mismo ritmo todo el rato
y a mí me da la sensación que no va a ser tan que así.
Me da a mí la sensación, ¿no?
Pero bueno, que esto tiene de muy bien a mi mente, ¿no?
Yo creo que es algo que le va a venir muy bien a la gente que está aprendiendo.
Bueno, eso sí, porque al final vienes aquí.
Pues mira, para los porfolios que tenéis que hacer, ¿no?
Pues le podéis echar un vistazo a ver cómo...
Este Twitter, este tuit, tío, este icono de Twitter es el primo gordito, ¿eh?
De Twitter, tío.
Es el primo gordito.
Es el primo gordito, ¿eh?
Como le pasó a Siri.
Claro, Siri cuando salió fue espectacular.
Y ahora si os fijáis, Siri como que es todo lo contrario.
Es como que no es que nos sorprenda, es que decepciona.
Y yo creo que este tipo de cosas como que las vamos a ir viendo constantemente.
Pero bueno, esto sí que sorprende, las cosas como son.