Criando Mini Jogos de IA com um Gerador de Jogos de IA no FlowHunt

O Fluxo Que Vamos Construir

Aqui está a estrutura que vamos implementar, desenhada para clareza e utilizando componentes específicos do FlowHunt:

Passo 1: Crie um Novo Fluxo & Adicione Componentes

Vamos começar configurando nosso canvas e adicionando todos os blocos de construção necessários mostrados no diagrama.

• No seu painel do FlowHunt, navegue até Meus Fluxos e clique em Criar Fluxo. Dê um nome como “Gerador de Jogos JS com IA v2”.

• Arraste os seguintes componentes para o seu canvas a partir da biblioteca de componentes:
  • Chat Input
  • Chat History (usando InMemoryChatMessageHistory)
  • LLM Anthropic AI (ou seu nó LLM preferido, como LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Passo 2: Configure os Componentes Principais

Agora, vamos configurar os nós-chave que lidam com a lógica.

1. Nó Prompt

   • Clique no nó Prompt.

   • Este nó formata as instruções para a IA. No campo Template, insira as instruções detalhadas, usando variáveis de template se necessário (como {{$input}} para se referir à mensagem do Chat Input).

   • Cole o seguinte template de prompt:

     O usuário fornecerá um nome de jogo e você deve criar o videogame em um único arquivo javascript como o EXEMPLO mostrado abaixo. MAS LEMBRE-SE DE QUE JÁ TEMOS UM ARQUIVO HTML E OS JOGOS DEVEM SER CONSTRUÍDOS COM BASE NELE, O ARQUIVO ESTÁ MENCIONADO ABAIXO.
     —JOGO A SER GERADO—
     {input}
     —EXEMPLO DE ARQUIVO JAVASCRIPT—
     *arquivo java*—
     —ARQUIVO HTML JÁ CRIADO—
     *arquivo HTML*—
     

2. Adicionando Ferramentas ao Tool Calling Agent (URL Retriever, Google Search):

   • Embora incluídas no diagrama de fluxo e conectadas ao Tool Calling Agent, essas ferramentas podem não ser estritamente necessárias para a tarefa básica de gerar um jogo a partir de uma descrição.
   • Conectá-las as torna disponíveis para o agente. Se a IA (com base em seu LLM principal e prompt) decidir que precisa pesquisar na web ou buscar conteúdo de uma URL para cumprir o pedido, ela pode usar essas ferramentas. Para solicitações simples como “faça um jogo de pong”, provavelmente não será necessário. Nenhuma configuração específica é necessária aqui, a menos que você tenha chaves de API para o Google Search.

Passo 3: Conecte os Componentes

Ligue os nós exatamente como mostrado no diagrama. Isso garante que os dados fluam corretamente.

1. Chat History (Saída do InMemoryChatMessageHistory) → Tool Calling Agent (Entrada de Chat History)
2. LLM Anthropic AI (Saída do LLM) → Tool Calling Agent (Entrada de LLM)
3. Chat Input (Saída de Mensagem) → Prompt (Entrada de Input)
4. Prompt (Saída de Mensagem) → Tool Calling Agent (Entradas * input – Note o asterisco, geralmente indicando a entrada principal do usuário/prompt)
5. URL Retriever (Saída de Documents As Tool) → Tool Calling Agent (Ferramentas * input – Esta entrada aceita múltiplas conexões de ferramentas)
6. Google Search (Saída de Google Search as Tool) → Tool Calling Agent (Ferramentas * input)
7. Tool Calling Agent (Saída de Mensagem) → Chat Output (Entrada de Texto * input)

Passo 4: Gere Seu Mini-Jogo em JavaScript

Vamos dar vida às suas ideias de jogos!

1. Salve seu fluxo e clique no botão IA (▶️).

2. No painel de chat, digite seu pedido de jogo (ex: Faça Tetris).

   [Imagem: Captura de tela da interface de chat com um usuário digitando um prompt de jogo]

3. Pressione Enter. O nó Prompt formatará seu pedido, e o Tool Calling Agent, utilizando o LLM Anthropic AI, irá gerar o código do jogo.

Passo 5: Jogue Seu Jogo Gerado por IA

1. Copie todo o bloco de código do Chat Output.
2. Cole em um editor de texto simples (Notepad, TextEdit, VS Code).
3. Salve o arquivo com a extensão .html (ex: ai_tetris.html).
4. Clique duas vezes no arquivo salvo para abri-lo no navegador e jogar!

Conclusão: Construindo Fluxos de IA Específicos com o FlowHunt

Seguindo este diagrama de fluxo específico, você construiu um poderoso gerador de jogos em JavaScript com IA usando o FlowHunt. Este exemplo demonstra como combinar nós dedicados de LLM e Prompt com o versátil Tool Calling Agent, até mesmo tornando ferramentas externas como busca na web disponíveis se necessário. A interface visual do FlowHunt torna a construção e compreensão desses fluxos de IA um pouco mais complexos, simples e eficiente. Boa geração de jogos!

Comece seu primeiro fluxo

O Flowhunt tem uma equipe de engenheiros de fluxos de IA prontos para ajudar você com Automação de IA.

• Experimente o Flowhunt
• Fale com um Especialista