De flow die we gaan bouwen

Hier is de structuur die we gaan implementeren, ontworpen voor duidelijkheid en gebruikmakend van specifieke FlowHunt-componenten:

Stap 1: Maak een nieuwe flow & voeg componenten toe

Laten we beginnen met het opzetten van ons canvas en het toevoegen van alle nodige bouwstenen zoals in het diagram getoond.

• Navigeer in je FlowHunt-dashboard naar Mijn Flows en klik op Flow aanmaken. Geef deze een naam, bijvoorbeeld “AI JS Game Generator v2”.

• Sleep de volgende componenten vanuit de componentbibliotheek op je canvas:
  • Chat Input
  • Chat History (met InMemoryChatMessageHistory)
  • LLM Anthropic AI (of je voorkeurs-LLM-node zoals LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Stap 2: Configureer de kerncomponenten

Nu gaan we de belangrijkste nodes instellen die de logica afhandelen.

1. Prompt-node

   • Klik op de Prompt-node.

   • Deze node formatteert de instructies voor de AI. Vul in het Template-veld de gedetailleerde instructies in, eventueel met templatevariabelen (zoals {{$input}} om te verwijzen naar het bericht van Chat Input).

   • Plak de volgende prompt-template:

     De gebruiker geeft je een gamenaam en jij moet het videospel maken in één enkel javascript-bestand zoals het ONDERSTAANDE VOORBEELD. MAAR HOU ER REKENING MEE DAT WE AL EEN HTML-BESTAND HEBBEN EN DE GAMES DAAROP MOETEN WORDEN GEBOUWD; HET BESTAND STAAT HIERONDER VERMELD.
     —TE GENEREREN GAME—
     {input}
     —VOORBEELD VAN JAVASCRIPT-BESTAND—
     *java-bestand*—
     —REEDS AANGEMAAKT HTML-BESTAND—
     *HTML-bestand*—
     

2. Tools toevoegen aan Tool Calling Agent (URL Retriever, Google Search):

   • Hoewel opgenomen in dit stroomdiagram en verbonden met de Tool Calling Agent, zijn deze tools niet per se nodig voor de basis-taak van het genereren van een game uit een beschrijving.
   • Door ze te verbinden zijn ze beschikbaar voor de agent. Als de AI (op basis van zijn LLM en prompt) besluit dat het nodig is om op internet te zoeken of inhoud van een URL op te halen om aan het verzoek te voldoen, kan hij deze tools gebruiken. Voor eenvoudige verzoeken zoals “maak een pong-game” zijn ze waarschijnlijk niet nodig. Er is hier geen specifieke configuratie vereist tenzij je API-sleutels hebt voor Google Search.

Stap 3: Verbind de componenten

Verbind de nodes precies zoals in het diagram. Zo stroomt de data correct.

1. Chat History (InMemoryChatMessageHistory output) → Tool Calling Agent (Chat History input)
2. LLM Anthropic AI (LLM output) → Tool Calling Agent (LLM input)
3. Chat Input (Message output) → Prompt (Input input)
4. Prompt (Message output) → Tool Calling Agent (Inputs * input – let op de asterisk, die vaak de primaire gebruikers-/promptinput aangeeft)
5. URL Retriever (Documents As Tool output) → Tool Calling Agent (Tools * input – deze input accepteert meerdere toolverbindingen)
6. Google Search (Google Search as Tool output) → Tool Calling Agent (Tools * input)
7. Tool Calling Agent (Message output) → Chat Output (Text * input)

Stap 4: Genereer je JavaScript-minigame

Laten we je game-ideeën tot leven brengen!

1. Sla je flow op en klik daarna op de AI-knop (▶️).

2. Typ in het chatpaneel je gamerequest (bijv. Maak Tetris).

   [Afbeelding: Screenshot van de chatinterface waarin een gebruiker een gameprompt invoert]

3. Druk op Enter. De Prompt-node formatteert je verzoek en de Tool Calling Agent genereert met de LLM Anthropic AI de gamecode.

Stap 5: Speel je door AI gegenereerde game

1. Kopieer het gehele codeblok uit de Chat Output.
2. Plak het in een eenvoudige teksteditor (Kladblok, TextEdit, VS Code).
3. Sla het bestand op met een .html-extensie (bijv. ai_tetris.html).
4. Dubbelklik op het opgeslagen bestand om het in je webbrowser te openen en te spelen!

Conclusie: Specifieke AI-flows bouwen met FlowHunt

Door dit specifieke stroomdiagram te volgen heb je een krachtige AI-JavaScript-gamegenerator gebouwd met FlowHunt. Dit voorbeeld laat zien hoe je een speciale LLM en Prompt-node combineert met de veelzijdige Tool Calling Agent, waarbij je zelfs externe tools zoals websearch beschikbaar maakt indien nodig. Dankzij FlowHunt’s visuele interface is het bouwen en begrijpen van zelfs deze iets complexere AI-workflows eenvoudig en efficiënt. Veel plezier met gamegeneratie!

Begin met je eerste flow

FlowHunt heeft een team van AI-flow-engineers klaar om je te helpen met AI-automatisering.

• Probeer FlowHunt
• Praat met een expert