Lag AI-minispill med en AI-spillgenerator i FlowHunt

Flyten vi skal bygge

Her er strukturen vi skal implementere, utformet for klarhet og ved bruk av spesifikke FlowHunt-komponenter:

Steg 1: Lag en ny flow og legg til komponenter

La oss starte med å sette opp arbeidsflaten og legge til alle nødvendige byggeklosser som vist i diagrammet.

• I FlowHunt-dashbordet, gå til Mine Flows og klikk på Opprett Flow. Gi den for eksempel navnet “AI JS Spillgenerator v2”.

• Dra følgende komponenter inn på arbeidsflaten fra komponent-biblioteket:
  • Chat Input
  • Chat History (bruker InMemoryChatMessageHistory)
  • LLM Anthropic AI (eller din foretrukne LLM-node, som LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Steg 2: Konfigurer kjernekoponentene

Nå skal vi sette opp nøkkelnodene som håndterer logikken.

1. Prompt-node

   • Klikk på Prompt-noden.

   • Denne noden formaterer instruksjonene til AI-en. I Template-feltet, skriv inn detaljerte instruksjoner, og bruk malvariabler ved behov (som {{$input}} for å referere til meldingen fra Chat Input).

   • Lim inn følgende prompt-mal:

     Brukeren gir deg et spillnavn, og du må lage videospillet i én enkelt javascript-fil slik som EKSEMPELET vist nedenfor. MEN HUSK AT VI ALLEREDE HAR EN HTML-FIL OG SPILLENE SKAL BYGGES BASERT PÅ DENNE FILEN SOM ER NEVNT NEDENFOR.
     —SPILL SOM SKAL GENERERES—
     {input}
     —EKSEMPEL PÅ JAVASCRIPT-FIL—
     *java-fil*—
     —ALLEREDE LAGT HTML-FIL—
     *HTML-fil*—
     

2. Legge til verktøy i Tool Calling Agent (URL Retriever, Google Search):

   • Disse verktøyene er inkludert i dette flytdiagrammet og koblet til Tool Calling Agent, men er kanskje ikke strengt nødvendige for den grunnleggende oppgaven med å generere et spill fra en beskrivelse.
   • Ved å koble dem til, blir de tilgjengelige for agenten. Dersom AI-en (basert på sin LLM og prompt) avgjør at den trenger å søke på nettet eller hente innhold fra en URL for å oppfylle forespørselen, kan den bruke disse verktøyene. For enkle forespørsler som “lag et pong-spill” vil dette som regel ikke være nødvendig. Ingen spesifikk konfigurasjon trengs her med mindre du har API-nøkler for Google Search.

Steg 3: Koble sammen komponentene

Koble nodene sammen nøyaktig som vist i diagrammet. Dette sikrer at data flyter riktig.

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 – Merk stjernen, ofte brukt for å angi hovedinn-/promptinput)
5. URL Retriever (Documents As Tool output) → Tool Calling Agent (Tools * input – Dette inputet godtar flere verktøykoblinger)
6. Google Search (Google Search as Tool output) → Tool Calling Agent (Tools * input)
7. Tool Calling Agent (Message output) → Chat Output (Text * input)

Steg 4: Generer ditt JavaScript-minispill

La oss realisere spillidéene dine!

1. Lagre flyten, og klikk deretter på AI-knappen (▶️).

2. I chat-panelet, skriv inn din spillforespørsel (f.eks. Lag Tetris).

   [Bilde: Skjermbilde av chatgrensesnitt der en bruker skriver inn en spillprompt]

3. Trykk Enter. Prompt-noden formaterer forespørselen din, og Tool Calling Agent, ved hjelp av LLM Anthropic AI, genererer spillkoden.

Steg 5: Spill ditt AI-genererte spill

1. Kopier hele kodeblokken fra Chat Output.
2. Lim den inn i en ren teksteditor (Notepad, TextEdit, VS Code).
3. Lagre filen med filendelsen .html (f.eks. ai_tetris.html).
4. Dobbeltklikk på den lagrede filen for å åpne den i nettleseren og spille!

Konklusjon: Bygg spesifikke AI-flows med FlowHunt

Ved å følge dette spesifikke flytdiagrammet har du bygget en kraftig AI JavaScript-spillgenerator med FlowHunt. Dette eksemplet viser hvordan du kan kombinere dedikerte LLM- og Prompt-noder med den allsidige Tool Calling Agent, og til og med gjøre eksterne verktøy som nettsøk tilgjengelige om nødvendig. FlowHunt sitt visuelle grensesnitt gjør det enkelt å bygge og forstå selv litt mer komplekse AI-arbeidsflyter. Lykke til med spillgenereringen!

Kom i gang med din første flow

Flowhunt har et team av AI-flow-ingeniører klare til å hjelpe deg med AI-automatisering.

• Prøv Flowhunt
• Snakk med en ekspert