Construindo com os Melhores: Minha Experiência no The AI Showdown da Lovable.dev

Durante o fim de semana de 14 a 15 de junho de 2025, a lovable.dev (conhecida como Lovable), uma plataforma de “vibe‑coding” com IA, convidou usuários do mundo todo a criar aplicativos web de graça—sem necessidade de saber programar. O Lovable permite construir aplicações full‑stack usando linguagem natural, diretamente no navegador.

Em parceria com OpenAI, Anthropic e Google, Lovable promoveu o The AI Showdown, um evento público de benchmarking que comparou as capacidades dos principais modelos de IA geradores de código. Durante 48 horas, todos tiveram acesso ilimitado e gratuito às ferramentas e modelos do Lovable.

---

🚧 Meu Experimento: Três Modelos, Dois Apps, Um Prompt

Para testar cada modelo, criei dois aplicativos, submetendo os mesmos comandos para as três IAs. Eis o que construí:

🔊 1. Lux‑ASR‑Trial

Um app de reconhecimento de voz que permite gravar uma mensagem em smartphone ou computador e enviar o arquivo via API ao sistema de reconhecimento Lux‑ASR da Universidade do Luxemburgo.
O Lux‑ASR reconhece automaticamente luxemburguês, francês, alemão, inglês, português e espanhol. A transcrição é exibida imediatamente na tela.

Capturas de tela e links de teste:

• https://google-speak-luxasr.lovable.app
• https://anthropic-speak-luxasr.lovable.app
• https://openai-speak-luxasr.lovable.app

🛑 2. Access‑Brake‑to‑API

Um proof of concept que visa limitar o uso abusivo de serviços GenAI gratuitos. O app utiliza randomuser.me para buscar perfis fictícios (foto, nome, idade, endereço). Um atraso progressivo desacelera as requisições subsequentes na mesma sessão, prevenindo abusos.

Capturas de tela e links de teste:

• https://random-user-viewer-by-anthropic.lovable.app
• https://random-profile-explorer-by-openai.lovable.app
• https://instant-profile-seeker-by-google.lovable.app

🌐 Desafio Bônus: Visualizador WordPress Mobile‑First

Para ir além e demonstrar as capacidades do Lovable com conteúdo do mundo real, submeti o seguinte prompt — inicialmente à Anthropic, mas precisei mudar para a OpenAI devido à sobrecarga do servidor.

Prompt:

“Create a Mobile First app that fetches the JSON content of a WordPress article from the REST API at admin.ki-leierbud.lu/?p=1008 and displays it as a properly formatted HTML page with the following features:

1. A fixed header (#003366 background) with the article title on the left and a language switcher (EN, FR, DE, PT, LB) on the right.
2. A fixed footer (#004080 background) with a 3-column grid showing the article’s tags.
3. A central content area (#E6F2FF background) displaying the article body with:
   • Blue, non-underlined links
   • Proper bullets for lists
   • Bold and italic text where applicable
   • UTF-8 support
4. All links should open in a new tab/window.
5. On language change, load the corresponding article:
   • EN > ?p=1008
   • FR > ?p=1012
   • DE > ?p=1017
   • PT > ?p=1014
   • LB > ?p=1020“

Para minha surpresa, o aplicativo funcionou perfeitamente — sem necessidade de ajustes no código. O código gerado foi enviado para o meu repositório no GitHub

🔗  https://github.com/mbarnig/leierbud-article-viewer

e a versão online está acessível publicamente em:

🔗   https://the-ai-showdown.lovable.app

No dia seguinte, notei alguns pequenos problemas de HTML com os marcadores de lista e as tags de cabeçalho <h1> a <h6>. Pedi à lovable.dev para verificar o código. Aqui está a resposta:

Looking at your code, I can see the issue. The HTML content is being rendered with dangerouslySetInnerHTML, 
but the proper styling for HTML elements like headings, lists, etc. is not being applied correctly.

The problem is in the ArticleContent component. While you're using the prose class from Tailwind's typography plugin, 
it seems like the typography plugin might not be installed, or the styles aren't being applied properly to the rendered HTML content.

I've fixed the HTML styling issues by adding proper CSS rules for all HTML elements in the article content. 
Now headings (h1-h6) will display with different sizes, lists will show proper bullets/numbers, and all other HTML elements will be properly styled.

Aqui está o link para a aplicação revisada:

🔗 https://the-ai-showdown-rev1.lovable.app

📊 E agora?

Estou analisando o desempenho dos três modelos nesses projetos. Planejo publicar uma análise comparativa nas redes sociais e submeter meus resultados ao Lovable Content Challenge.

Fiquem ligados para mais novidades!