Use o v0 da Vercel para criar seu front-end React em segundos com a ajuda da IA!

Fiquei bem surpreso com os resultados do v0, dos mesmos criadores do conhecido Next.js, a Vercel. Com ele, é possível criar interfaces em React usando Inteligência Artificial através de descrições curtas de como a interface deveria ser ou em qual situação ela seria usada❗

Exemplos

Crie em Português do Brasil uma pagina para uma biblioteca que permita consultar livros disponíveis, além de alugar e devolver livros.

Repare que só estou descrevendo a utilidade da página, não estou dizendo como ela deveria ser estruturada.

Resultado: https://v0.dev/r/O6qSvr8iDFz

Crie um logo no formato svg com o texto LivrosAgora, a cor da fonte deverá ser rgb(51,201,235)

Agora estou dando comandos precisos do que espero de resultado e isso também é aceito pelo v0

Resultado: https://v0.dev/r/n78qUJ9VsZi

Como Funciona?

Os componentes criados pelo v0 usam o shadcn/ui para terem funcionalidade, então eles funcionam de fato:

• os menus criados abrem e fecham e são responsivos
• é possível ter um seletor da datas, os campos do formulário se comportam como o esperado para cada tipo de entrada
• é possível criar até uma tabela de gráficos para visualizar dados📈

Veja aqui um exemplo de uma página que simula a compra e venda de ações da Bolsa de Valores e possui mais elementos interativos. Há um gráfico de preços, além de um formulário que aceita diversos tipos de entrada: https://v0.dev/r/zYk3l8KEjcT

Já a parte visual é feita pelo TailwindCSS, o que facilita na hora de customizar visualmente o componente gerado. Usando o recurso de autocompletar do editor de código, é possível fazer mudanças sem precisar consultar a documentação. É possível trocar cores, mudar a posição de um elemento e muito mais, tudo sem ficar gerando um código CSS maluco e desorganizado.

Vantagens

• Ele tem um plano gratuito bem generoso
• Cria a interface toda a partir de uma descrição curta, ótimo para ter ideias ao começar do zero
• Criando componentes individualmente, o código já fica modularizado e fica mais fácil de controlar as modificações com comandos mais específicos
• Cria vários rascunhos que podem ser melhorados com mais comandos
• É possível retocar só um pedaço da interface para que as modificações não prejudiquem as partes que já estão boas
• O código gerado é limpo e legível
• É simples usar o código criado, é só copiar e colar ou através de um único comando no terminal para importar ao seu projeto
• Somente duas dependências: shadcn/ui e TailwindCSS
• O código é responsivo e totalmente funcional.

Desvantagens

• Algumas vezes os meus comandos não foram cumpridos ou não foi possível criar o componente como eu gostaria
• Tudo que é gerado tem cara da Vercel, você não vai ganhar nenhum concurso de design
• Apesar do v0 entender comandos em português, a interface sempre é gerada em inglês, mesmo com comandos explícitos para que seja em português

Como usar no seu projeto

Crie um novo projeto Next.js com Typescript, TailwindCSS e ESlint já inclusos:

npx create-next-app@latest --typescript --tailwind --eslint

Vá para o diretório do projeto e instale o v0:

npx v0@latest init

Agora é só importar os componentes criados pelo v0, copiando e colando o código gerado ou através do terminal:

npx v0@latest add [id do componente]

Conclusões

Eu gosto de criar projetos próprios, tanto para aprendizado como para tentar emplacar um possível negócio e o front-end sempre foi uma barreira para mim.

Quem já começou com uma folha em branco sabe o que estou falando, é muito trabalhoso criar algo do zero, pois é necessário que a interface seja bonita, leve, responsiva, modular, e ainda ter que decidir sobre tudo e ter a sensação de que se está constantemente reinventando a roda, ou seja, tentando resolver problemas que já foram solucionados por diversas pessoas. Quem já ficou horas tentando centralizar um div em outro div?😂

O nome v0 significa versão zero, ou seja, o próprio nome diz que ele é feito para ser a primeira versão do seu projeto.

O v0 permite que 3 rascunhos rápidos e funcionais sejam criados em segundos e depois abre a possibilidade para que você faça as melhorias pela interface dele ou você mesmo faça os ajustes pelo editor de código.

Fique à vontade para postar suas impressões e criações com o v0!😃