v0 de Vercel: Una guía con proyecto de demostración

¿Qué es el v0 de Vercel?

v0 de Vercel es una herramienta de generación de código basada en inteligencia artificial que ayuda a los desarrolladores a crear componentes de interfaz de usuario (¡o páginas enteras!) mediante instrucciones en lenguaje natural. En lugar de codificar manualmente un botón, un formulario o un panel de control, describe lo que necesitas a través de la interfaz de chat, y v0 genera código React y CSS Tailwind listo para producción en cuestión de segundos.

Para contextualizar, Vercel es una plataforma diseñada para desplegar y alojar aplicaciones web, con un fuerte énfasis en optimizar el rendimiento y agilizar el proceso de desarrollo. Es conocido sobre todo por Next.js (un popular marco React) y ofrece alojamiento de aplicaciones frontales con escalado automático y fácil integración.

Creo que v0 es una gran adición al conjunto de herramientas de Vercel, y hace maravillas por la productividad de sus clientes (nosotros, los desarrolladores). Y como muchas otras herramientas de IA que existen, es una buena forma de abrir la puerta a usuarios no técnicos, como diseñadores y jefes de producto, para que contribuyan al proceso de desarrollo.

Es especialmente útil para la creación rápida de prototipos, el aumento de la productividad mediante la reducción del trabajo repetitivo del frontend, y la automatización del diseño al código, como la conversión de archivos Figma directamente en componentes de trabajo. También puedes liberar rápidamente tu proyecto utilizando Vercel, lo que facilita el alojamiento y el despliegue.

¿Cuánto cuesta la v0?

v0 tiene actualmente 3 niveles de precios para particulares. El primer nivel es gratuito, pero el número de mensajes disponibles al día es limitado. Puedes subir de categoría por 20 $/mes, o por 200 $/mes para un uso intensivo. 

El precio funciona de forma diferente para las empresas, y empieza en 30 $/usuario al mes.

Proyecto de demostración: App de gestión de suscripciones con v0

Construyamos un panel de gestión de suscripciones que permita a los usuarios seguir y gestionar todas sus suscripciones (por ejemplo, software, revistas, afiliaciones) en un solo lugar. La aplicación puede notificar a los usuarios los próximos pagos, los vencimientos de las pruebas y las suscripciones no utilizadas.

La descripción anterior es el mensaje exacto que introduje a través de la interfaz de chat v0.

Al cabo de unos 30 segundos, v0 generó 10 archivos. La pestaña de código me permite ver esos archivos mientras la interfaz del chat sigue disponible y explica el código generado.

Puedes hacer clic en el botón Vista previa de la parte superior para ver la aplicación:

Sin embargo, la mejor forma de visualizarlo es hacer clic en el segundo icono de la derecha, en la esquina superior.

Esto abrirá una nueva pestaña en tu dispositivo con la vista previa completa de tu aplicación. Echemos un vistazo a la nuestra:

Como puedes ver, v0 generó una aplicación web totalmente funcional a partir de una sola solicitud. Impresionante. Añadir una nueva suscripción funciona de verdad y se refleja en el resto de la aplicación.

Sin embargo, la barra de navegación de la izquierda no es funcional y es un poco desperdicio de espacio. Volvamos a nuestra vista previa y eliminémosla. Podemos pedir que lo quiten en el chat, pero también podemos hacer un cambio rápido pulsando el botón del ratón en la parte superior (primer icono desde la izquierda). Seleccionamos el componente que queremos cambiar (en este caso, la barra de navegación) y simplemente pedimos a v0 que lo elimine.

¡Y aquí está el resultado!

Vale, ¿y ahora qué?

Hay algunos botones más en la parte superior que merece la pena mencionar. Si haces clic en el botón del historial, podrás ver las distintas versiones de tu aplicación, y si haces clic en una en concreto, volverás a ella.

También puedes desplegar tu aplicación con Vercel en un clic:

Podrás acceder a la nueva app desde un enlace que encontrarás en el mismo modal una vez finalizado el despliegue, y podrás ver más detalles sobre el despliegue en sí desde tu cuenta de Vercel.

Crear y desplegar esta aplicación me llevó... 15 minutos. ¡Y eso incluye el tiempo que me llevó hacer las capturas de pantalla para este tutorial! 

Como referencia, codificar algo así desde cero me habría llevado un día entero, si no más.

Bonificación: Ejecutar el código localmente

Si quieres añadir este código a tu máquina y acceder a él a través de VS Code (o cualquier otro editor de código que utilices), puedes crear una nueva carpeta de proyecto a través del terminal.

A continuación, crea un nuevo proyecto Next.js:

npx create-next-app@latest my-folder-name

Asegúrate de que estás en el directorio correcto con cd my-folder-path.

Desde ahí puedes volver al proyecto v0 y hacer clic en el botón "Añadir al código base" de la parte superior derecha, copiar el comando generado y pegarlo en el terminal. Cuando se te pida que crees un archivo components.json, introduce Y, y pulsa Intro para todas las indicaciones siguientes.

Ahora puedes abrir la carpeta correcta en VS Code y ver todo el código generado. Ejecuta npm run dev y navega hasta http://localhost:3000 en tu navegador para ejecutar tu aplicación localmente .

Más allá de lo básico: ¿Qué más puede hacer v0?

Vale, la v0 es bastante buena generando código a partir de un simple prompt. ¿Pero qué más puede hacer?

1. Sube archivos Figma para obtener código al instante

Puedes subir un diseño Figma a v0, y generará automáticamente los componentes React + Tailwind correspondientes. Es perfecto para los diseñadores que quieren convertir rápidamente maquetas en código funcional.

2. Utilizar plantillas comunitarias

No necesitas empezar de cero. v0 proporciona plantillas impulsadas por la comunidad para patrones de interfaz de usuario comunes, que puedes bifurcar, modificar e integrar en tu proyecto.

3. Integraciones (función beta)

v0 está desplegando integraciones de terceros, facilitando la conexión con bases de datos y otras herramientas de almacenamiento. Esta función aún está en fase beta, pero promete hacer que v0 sea aún más potente. Puedes ver una lista de las integraciones disponibles navegando a la configuración de tu proyecto, y haciendo clic en el icono + junto a la sección de integraciones.

4. Variables de entorno

v0 permite definir variables de entorno para que puedas configurar claves API, conexiones a bases de datos y otros secretos de forma segura.

Limitaciones de v0

Por desgracia, la v0 no es perfecta para todos los casos de uso. Éstas son las limitaciones que debes conocer:

• Sin vista previa del backend: v0 generará código backend si lo pides, pero no podrás previsualizar una aplicación si tiene lógica backend.
• Sin integración real con GitHub: la v0 aún no se integra con GitHub. La única forma de sincronizar tu código es copiar y pegar el código en tu proyecto local (o utilizar la función "Añadir a la base de código"), y luego enviarlo manualmente a Github.
• El código generado necesita refinarse: Aunque limpio, el código puede requerir retoques para su optimización. Los archivos son a veces muy largos, y puede que no admita la biblioteca de componentes de tu elección.
• No es ideal para la gestión de estados complejos: v0 es realmente adecuado para la interfaz de usuario, pero no para la lógica completa de la aplicación.
• No es ideal para no desarrolladores: En cuanto intentas añadir una lógica algo compleja, v0 tiene dificultades para proporcionar una funcionalidad operativa. Si no eres desarrollador, te encontrarás rápidamente con errores que no podrás solucionar o no podrás personalizar la aplicación a tu gusto. 

Conclusión

v0 de Vercel es una herramienta útil para generar componentes de interfaz de usuario, crear prototipos e incluso convertir diseños en código. Aún está evolucionando, pero ya es una buena opción para los desarrolladores que buscan acelerar su trabajo de front-end. 

Pruébalo en v0.dev ¡y comprueba si se adapta a tu proceso de desarrollo!