Créer des mini-jeux IA avec un générateur de jeux IA dans FlowHunt

Le flux que nous allons construire

Voici la structure que nous allons mettre en œuvre, conçue pour la clarté et utilisant des composants spécifiques de FlowHunt :

Étape 1 : Créer un nouveau flux & ajouter les composants

Commençons par configurer notre canevas et ajouter tous les blocs nécessaires indiqués sur le schéma.

• Dans votre tableau de bord FlowHunt, allez dans Mes flux et cliquez sur Créer un flux. Donnez-lui un nom du type « Générateur de jeux JS IA v2 ».

• Faites glisser les composants suivants depuis la bibliothèque de composants vers votre canevas :
  • Chat Input
  • Chat History (avec InMemoryChatMessageHistory)
  • LLM Anthropic AI (ou le nœud LLM de votre choix comme LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Étape 2 : Configurer les composants principaux

Mettons maintenant en place les nœuds clés qui gèrent la logique.

1. Nœud Prompt

   • Cliquez sur le nœud Prompt.

   • Ce nœud formate les instructions pour l’IA. Dans le champ Template, saisissez les instructions détaillées, en utilisant les variables de template si besoin (comme {{$input}} pour référencer le message du Chat Input).

   • Collez le template de prompt suivant :

     L’utilisateur va vous donner un nom de jeu et vous devez créer le jeu vidéo dans un seul fichier javascript comme dans l’EXEMPLE ci-dessous. MAIS GARDEZ À L’ESPRIT QUE NOUS AVONS DÉJÀ UN FICHIER HTML ET LES JEUX DOIVENT ÊTRE CONSTRUITS EN FONCTION DE CELUI-CI, LE FICHIER EST INDIQUÉ CI-DESSOUS.
     —JEU À GÉNÉRER—
     {input}
     —EXEMPLE DE FICHIER JAVASCRIPT—
     *java file*—
     —FICHIER HTML DÉJÀ CRÉÉ—
     *HTML file*—
     

2. Ajouter des outils à Tool Calling Agent (URL Retriever, Google Search) :

   • Bien qu’inclus dans ce schéma de flux et connectés à l’Agent d’Appel d’Outils, ces outils ne sont pas forcément indispensables à la tâche de base de génération d’un jeu à partir d’une description.
   • Les connecter les rend disponibles pour l’agent. Si l’IA (selon son LLM central et le prompt) estime avoir besoin de rechercher sur le web ou de récupérer du contenu à partir d’une URL pour répondre à la demande, elle peut utiliser ces outils. Pour des demandes simples comme « créer un jeu de pong », il y a peu de chances qu’ils soient nécessaires. Aucune configuration spécifique n’est requise ici sauf si vous disposez de clés API pour Google Search.

Étape 3 : Connecter les composants

Reliez les nœuds exactement comme indiqué sur le schéma. Cela garantit la bonne circulation des données.

1. Chat History (sortie InMemoryChatMessageHistory) → Tool Calling Agent (entrée Chat History)
2. LLM Anthropic AI (sortie LLM) → Tool Calling Agent (entrée LLM)
3. Chat Input (sortie Message) → Prompt (entrée Input)
4. Prompt (sortie Message) → Tool Calling Agent (entrée Inputs * – L’astérisque indique souvent l’entrée principale utilisateur/prompt)
5. URL Retriever (sortie Documents As Tool) → Tool Calling Agent (entrée Tools * – Cette entrée accepte plusieurs connexions d’outils)
6. Google Search (sortie Google Search as Tool) → Tool Calling Agent (entrée Tools *)
7. Tool Calling Agent (sortie Message) → Chat Output (entrée Text *)

Étape 4 : Générez votre mini-jeu JavaScript

Faites maintenant vivre vos idées de jeux !

1. Enregistrez votre flux, puis cliquez sur le bouton IA (▶️).

2. Dans le panneau de chat, tapez votre demande de jeu (ex : Créer Tetris).

   [Image : Capture d’écran de l’interface chat avec un utilisateur saisissant une instruction de jeu]

3. Appuyez sur Entrée. Le nœud Prompt formate votre demande et l’Agent d’Appel d’Outils, avec l’IA Anthropic, génère le code du jeu.

Étape 5 : Jouez à votre jeu généré par l’IA

1. Copiez tout le bloc de code depuis le Chat Output.
2. Collez-le dans un éditeur de texte brut (Notepad, TextEdit, VS Code).
3. Enregistrez le fichier avec l’extension .html (par exemple, ai_tetris.html).
4. Double-cliquez sur le fichier enregistré pour l’ouvrir dans votre navigateur et jouer !

Conclusion : Créer des flux IA spécifiques avec FlowHunt

En suivant ce schéma de flux précis, vous avez construit un puissant générateur de jeux JavaScript IA avec FlowHunt. Cet exemple montre comment combiner des nœuds dédiés LLM et Prompt avec le polyvalent Agent d’Appel d’Outils, et même rendre des outils externes comme la recherche web disponibles si besoin. L’interface visuelle de FlowHunt rend la création et la compréhension de flux IA, même plus complexes, à la fois simple et efficace. Bonne création de jeux !

Lancez-vous avec votre premier flux

L’équipe Flowhunt est à votre disposition pour vous accompagner dans l’automatisation par IA.

• Essayez Flowhunt
• Parlez à un expert