NLW Agents - Assistente de Meta para Jogos

Este projeto, desenvolvido durante a Next Level Week (NLW) da Rocketseat, é uma aplicação web interativa que funciona como um "Assistente de Meta". A ferramenta utiliza a API do Google Gemini para fornecer a jogadores de videojogos (Valorant, League of Legends e CS:GO) estratégias, builds de personagens e dicas atualizadas.

🚀 Visão Geral

O objetivo do NLW Agents é criar uma ponte direta entre os jogadores e o conhecimento estratégico de ponta, utilizando o poder dos Grandes Modelos de Linguagem (LLMs). A aplicação permite que um utilizador selecione um jogo, faça uma pergunta específica e receba uma resposta concisa e relevante, gerada pela IA com base em pesquisas na web em tempo real.

✨ Funcionalidades Principais

• Interface Intuitiva: Um formulário simples e direto para o utilizador inserir sua chave de API, selecionar o jogo e fazer a pergunta.
• Respostas Contextualizadas: A IA é instruída a agir como uma especialista no jogo selecionado.
• Informação Atualizada: Através da engenharia de prompt e da ativação de "Agentes de IA" (ferramenta de busca do Google), a aplicação busca informações sobre os patches mais recentes para fornecer dicas atuais.
• Renderização de Markdown: As respostas da IA, formatadas em Markdown, são convertidas para HTML para uma exibição rica e legível.
• Feedback Visual: A interface informa ao utilizador quando a IA está processando a pergunta, desativando o botão e exibindo uma animação de carregamento.

🛠️ Tecnologias e Arquitetura

Este é um projeto puramente front-end que demonstra competências essenciais em desenvolvimento web moderno e consumo de APIs.

Front-end

• HTML5 Semântico: Estrutura clara e acessível.
• CSS3 Moderno: Estilização com Flexbox, gradientes, animações (@keyframes) e design responsivo.
• JavaScript (ES6+):
  • Manipulação do DOM: Para capturar eventos e atualizar a UI dinamicamente.
  • Comunicação Assíncrona: Uso de fetch com async/await para chamadas não bloqueantes à API do Gemini.
  • Gestão de Estado da UI: O estado dos elementos (como botões) é gerenciado durante a chamada da API.

Integrações

• Google Gemini API: Utiliza o modelo gemini-1.5-flash para geração de texto.
• Showdown.js: Biblioteca externa (carregada via CDN) para converter as respostas em Markdown para HTML.

🧠 Como Funciona

1. Entrada do Utilizador: O utilizador preenche o formulário com sua chave de API do Gemini, seleciona um jogo e digita uma pergunta.
2. Submissão: Ao clicar em "Perguntar", o evento de submit do formulário é capturado pelo script.js.
3. Engenharia de Prompt: Uma função perguntarAI constrói um prompt detalhado (few-shot prompting). Este prompt instrui a IA sobre seu papel, o contexto do jogo, a data atual e as regras para formular a resposta. Crucialmente, ele ativa a ferramenta google_search para que a IA possa realizar pesquisas na web.
4. Chamada à API: Uma requisição POST assíncrona é enviada para o endpoint da API do Gemini, contendo o prompt e a configuração das ferramentas.
5. Processamento da Resposta: A resposta em texto (formato Markdown) é extraída do JSON retornado pela API.
6. Exibição na Tela: A biblioteca Showdown.js converte o Markdown para HTML, que é então injetado na página, tornando a resposta visível para o utilizador.
7. Gestão de Estado: O botão de envio é reativado no bloco finally, garantindo que a UI volte ao estado normal mesmo que ocorra um erro na chamada da API.

⚙️ Como Executar o Projeto

1. Clone o repositório:

   git clone https://github.com/seu-usuario/nlw-agents.git

2. Abra o arquivo index.html no seu navegador de preferência.
3. Obtenha uma API Key:
   • Acesse o Google AI Studio.
   • Crie uma nova chave de API.
4. Utilize a aplicação:
   • Cole a sua chave de API no campo correspondente.
   • Selecione o jogo e faça sua pergunta!

Rodando com o proxy server (recomendado)

1. Entre na pasta do projeto no terminal e instale dependências:

cd <pasta-do-projeto>
npm install

2. Crie um arquivo .env baseado em .env.example e adicione sua chave:

GEMINI_API_KEY=your_api_key_here
PORT=3000

3. Inicie o servidor:

npm start

4. Abra index.html no navegador (ou acesse http://localhost:3000 se servir arquivos estáticos). O frontend usará o endpoint /api/ask para enviar perguntas sem expor a chave ao cliente.

Observações de segurança:

• Evite deixar sua GEMINI_API_KEY no código do cliente.
• Em produção, proteja o servidor com autenticação e limites de uso.