🚀 Code Generator - Gerador de Código com IA

Aplicação web desenvolvida com Vite que utiliza Inteligência Artificial através da API da Groq para transformar descrições em linguagem natural em código funcional HTML, CSS e JavaScript. O código gerado é exibido formatado na interface e renderizado em tempo real, permitindo visualizar imediatamente o resultado produzido pela IA.

Status do Projeto: ✅ Concluído

📋 Sobre o Projeto

O Code Generator é uma ferramenta que permite aos usuários gerar interfaces e componentes web simples a partir de instruções textuais em linguagem natural.

A aplicação envia os prompts para a API da Groq, recebe o código gerado pela IA e apresenta tanto o código-fonte quanto a renderização do resultado diretamente na interface.

Objetivo

Demonstrar a integração entre aplicações frontend modernas e modelos de Inteligência Artificial para automatizar a geração de código e acelerar o desenvolvimento de interfaces web.

Problema Resolvido

Criar interfaces e protótipos manualmente pode consumir tempo, especialmente durante as etapas iniciais de desenvolvimento. O projeto busca reduzir esse esforço utilizando IA para gerar rapidamente estruturas simples HTML, estilos CSS e comportamentos JavaScript com base em descrições fornecidas pelo usuário.

✨ Funcionalidades

Funcionalidades Implementadas

• Geração automática de código com IA
• Integração com a API da Groq
• Suporte a HTML, CSS e JavaScript
• Exibição formatada do código gerado
• Renderização dinâmica em tempo real
• Interface simples e intuitiva
• Configuração via variáveis de ambiente
• Ambiente de desenvolvimento com Vite

🛠️ Tecnologias Utilizadas

Front-end

Ferramentas

APIs

• Groq API

🏗️ Arquitetura do Projeto

O projeto segue uma arquitetura frontend baseada em componentes e serviços, separando responsabilidades entre interface, comunicação com APIs e renderização dinâmica.

Características principais:

• Interface SPA (Single Page Application)
• Comunicação assíncrona com API REST
• Gerenciamento por módulos JavaScript
• Configuração por variáveis de ambiente
• Renderização dinâmica de conteúdo gerado

📂 Estrutura de Diretórios

code-generator/
│
├── code-generator/
│   ├── src/                # Código-fonte da aplicação
│   │   ├── main.js         # Arquivo principal da aplicação
│   │   └── style.css       # Estilos globais
│   ├── index.html          # Estrutura base da aplicação
│   ├── .env.example        # Exemplo de configuração das variáveis de ambiente
│   └── package.json        # Dependências e scripts do projeto
│
├── docs/                   # Documentação do projeto
│   └── pages/              # Imagens das páginas do projeto
│
├── .gitignore              # Evitar versionamento de informações específicas do projeto
└── README.md    

⚙️ Pré-requisitos

Antes de iniciar, você precisará ter instalado:

• Navegador Web (Google Chrome, Brave ou Microsoft Edge)
• Git (recomendado)
• Visual Studio Code (recomendado)
• Node.js (versão 18 ou superior) + NPM
• Conta na plataforma Groq

🚀 Como Executar

1. Clonar o Repositório

git clone https://github.com/DevJoaoVitorB/code-generator.git

2. Entrar na Pasta

cd code-generator

3. Instalar Dependências

npm install

4. Criar e Fazer Login em uma Conta na Groq

Acesse o painel da Groq e realize seu cadastro e entre na plataforma utilizando sua conta cadastrada.

5. Gerar uma API Key

No painel:

• Acesse a seção API Keys
• Clique em Create API Key
• Copie a chave gerada

6. Configurar Variáveis de Ambiente

Crie o arquivo .env a partir do modelo disponível:

cp .env.example .env

No Windows:

copy .env.example .env

ou

Copy-Item .env.example .env

Configure suas credenciais:

VITE_API_KEY=SUA_CHAVE_AQUI
VITE_API_URL=https://api.groq.com/openai/v1/chat/completions
VITE_AI_MODEL=openai/gpt-oss-120b

7. Executar o Projeto

npm run dev

Após a execução, acesse a URL exibida no terminal.

📸 Screenshots

Tela Principal

Código Gerado e Renderização em Tempo Real

👨‍💻 Autor

DevJoaoVitorB