Opret AI Mini-spil med en AI Spilgenerator i FlowHunt

Flowet vi bygger

Her er strukturen, vi vil implementere, designet for klarhed og med brug af specifikke FlowHunt-komponenter:

Trin 1: Opret et nyt flow & tilføj komponenter

Lad os starte med at opsætte vores lærred og tilføje alle de nødvendige byggeklodser, der vises i diagrammet.

• På dit FlowHunt-dashboard skal du gå til Mine Flows og klikke på Opret Flow. Giv det et navn som “AI JS Spilgenerator v2”.

• Træk følgende komponenter over på dit lærred fra komponentbiblioteket:
  • Chat Input
  • Chat History (ved brug af InMemoryChatMessageHistory)
  • LLM Anthropic AI (eller din foretrukne LLM-node som LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Trin 2: Konfigurér kernekomponenterne

Nu skal vi sætte de centrale noder op, der håndterer logikken.

1. Prompt-node

   • Klik på Prompt-noden.

   • Denne node formaterer instruktionerne til AI’en. I feltet Template indtaster du de detaljerede instruktioner og bruger template-variabler hvis nødvendigt (som {{$input}} for at referere til beskeden fra Chat Input).

   • Indsæt følgende prompt-skabelon:

     Brugeren giver dig et spilnavn, og du skal oprette videospillet i en enkelt javascript-fil ligesom EKSEMPLER vist nedenfor. MEN HUSK AT VI ALLEREDE HAR EN HTML-FIL, OG SPILLENE SKAL BYGGES PÅ DEN—FILERNE ER NÆVNT NEDENFOR.
     —SPILLET DER SKAL GENERERES—
     {input}
     —EKSEMPEL PÅ JAVASCRIPT-FIL—
     *java-fil*—
     —ALLEREDE OPRETTET HTML-FIL—
     *HTML-fil*—
     

2. Tilføj værktøjer til Tool Calling Agent (URL Retriever, Google Search):

   • Selvom de indgår i dette flow-diagram og er forbundet til Tool Calling Agent, er disse værktøjer måske ikke strengt nødvendige for den grundlæggende opgave at generere et spil ud fra en beskrivelse.
   • Ved at forbinde dem gøres de tilgængelige for agenten. Hvis AI’en (på baggrund af dens kerne-LLM og prompt) vurderer, at det er nødvendigt at søge på nettet eller hente indhold fra en URL for at opfylde anmodningen, kan den bruge disse værktøjer. Ved simple forespørgsler som “lav et pong-spil” vil det sandsynligvis ikke være nødvendigt. Ingen specifik konfiguration er nødvendig her, medmindre du har API-nøgler til Google Search.

Trin 3: Forbind komponenterne

Forbind noderne præcist som vist på diagrammet. Det sikrer, at data flyder korrekt.

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 – Bemærk stjernen, som ofte indikerer det primære bruger-/promptinput)
5. URL Retriever (Documents As Tool output) → Tool Calling Agent (Tools * input – Denne input accepterer flere værktøjsforbindelser)
6. Google Search (Google Search as Tool output) → Tool Calling Agent (Tools * input)
7. Tool Calling Agent (Message output) → Chat Output (Text * input)

Trin 4: Generér dit JavaScript mini-spil

Lad os bringe dine spilidéer til live!

1. Gem dit flow, og klik derefter på AI-knappen (▶️).

2. I chatpanelet skriver du din spil-anmodning (fx Lav Tetris).

   [Billede: Skærmbillede af chatgrænsefladen, hvor en bruger indtaster en spilprompt]

3. Tryk Enter. Prompt-noden formaterer din anmodning, og Tool Calling Agent genererer spil-koden ved hjælp af LLM Anthropic AI.

Trin 5: Spil dit AI-genererede spil

1. Kopiér hele kodeblokken fra Chat Output.
2. Indsæt den i en simpel teksteditor (Notepad, TextEdit, VS Code).
3. Gem filen med endelsen .html (fx ai_tetris.html).
4. Dobbeltklik på den gemte fil for at åbne den i din webbrowser og spil!

Konklusion: Byg specifikke AI-flows med FlowHunt

Ved at følge dette specifikke flowdiagram har du bygget en kraftfuld AI JavaScript-spilgenerator med FlowHunt. Dette eksempel viser, hvordan man kombinerer dedikerede LLM- og Prompt-noder med den alsidige Tool Calling Agent, og endda gør eksterne værktøjer som websøgning tilgængelige om nødvendigt. FlowHunts visuelle interface gør det nemt og effektivt at bygge og forstå selv disse lidt mere avancerede AI-workflows. God fornøjelse med spilgenereringen!

Kom i gang med dit første flow

Flowhunt har et team af AI-flow ingeniører klar til at hjælpe dig med AI-automatisering.

• Prøv Flowhunt
• Tal med en ekspert