Skapa AI-minispel med en AI-spelgenerator i FlowHunt

Flödet vi ska bygga

Här är strukturen vi kommer att implementera, utformad för tydlighet och med användning av specifika FlowHunt-komponenter:

Steg 1: Skapa ett nytt flöde & lägg till komponenter

Låt oss börja med att sätta upp vår canvas och lägga till alla nödvändiga byggstenar som visas i diagrammet.

• I din FlowHunt-instrumentpanel, gå till Mina flöden och klicka på Skapa flöde. Ge det ett namn som “AI JS Game Generator v2”.

• Dra följande komponenter till din canvas från komponentbiblioteket:
  • Chat Input
  • Chat History (med InMemoryChatMessageHistory)
  • LLM Anthropic AI (eller din föredragna LLM-nod som LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Steg 2: Konfigurera kärnkomponenterna

Nu ska vi ställa in nyckelnoderna som hanterar logiken.

1. Prompt-nod

   • Klicka på Prompt-noden.

   • Denna nod formaterar instruktionerna för AI:n. I fältet Mall, ange de detaljerade instruktionerna och använd mallvariabler om det behövs (som {{$input}} för att hänvisa till meddelandet från Chat Input).

   • Klistra in följande prompt-mall:

     Användaren kommer att ge dig ett spelnamn och du måste skapa videospelspelet i en enda javascript-fil enligt EXEMPLET nedan. MEN KOM IHÅG ATT VI REDAN HAR EN HTML-FIL OCH SPELEN SKA BYGGAS BASERAT PÅ DET, FILEN NÄMNS NEDAN.
     —SPEL SOM SKA GENERERAS—
     {input}
     —EXEMPEL PÅ JAVASCRIPT-FIL—
     *java file*—
     —REDAN SKAPAD HTML-FIL—
     *HTML file*—
     

2. Lägga till verktyg i Tool Calling Agent (URL Retriever, Google Search):

   • Även om de ingår i detta flödesdiagram och är kopplade till Tool Calling Agent, kanske dessa verktyg inte är strikt nödvändiga för den grundläggande uppgiften att generera ett spel från en beskrivning.
   • Att koppla dem gör dem tillgängliga för agenten. Om AI:n (baserat på sin kärn-LLM och prompt) beslutar att den behöver söka på webben eller hämta innehåll från en URL för att uppfylla begäran, kan den använda dessa verktyg. För enkla förfrågningar som “gör ett pong-spel” kommer de troligen inte att behövas. Ingen specifik konfiguration krävs här om du inte har API-nycklar för Google Search.

Steg 3: Koppla ihop komponenterna

Koppla ihop noderna exakt som visas i diagrammet. Det säkerställer att dataflödet blir 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 – Observera asterisken, som ofta indikerar den primära användar-/promptinmatningen)
5. URL Retriever (Documents As Tool output) → Tool Calling Agent (Tools * input – Denna inmatning accepterar flera verktygskopplingar)
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: Generera ditt JavaScript-minispel

Nu är det dags att ge liv åt dina spelidéer!

1. Spara ditt flöde och klicka sedan på AI-knappen (▶️).

2. Skriv din spelbegäran i chattpanelen (t.ex. Gör Tetris).

   [Bild: Skärmdump av chattgränssnittet där en användare skriver in en spelprompt]

3. Tryck på Enter. Prompt-noden kommer att formatera din begäran och Tool Calling Agent, med hjälp av LLM Anthropic AI, genererar spelkoden.

Steg 5: Spela ditt AI-genererade spel

1. Kopiera hela kodblocket från Chat Output.
2. Klistra in det i en vanlig textredigerare (Notepad, TextEdit, VS Code).
3. Spara filen med filändelsen .html (t.ex. ai_tetris.html).
4. Dubbelklicka på den sparade filen för att öppna den i din webbläsare och spela!

Slutsats: Bygg specifika AI-flöden med FlowHunt

Genom att följa detta specifika flödesdiagram har du byggt en kraftfull AI JavaScript-spelgenerator med FlowHunt. Det här exemplet visar hur du kan kombinera dedikerade LLM- och Prompt-noder med den mångsidiga Tool Calling Agent, och till och med göra externa verktyg som webbsökning tillgängliga vid behov. FlowHunts visuella gränssnitt gör det enkelt och effektivt att bygga och förstå även lite mer avancerade AI-arbetsflöden. Lycka till med spelgenereringen!

Redo att växa ditt företag?

Starta din kostnadsfria provperiod idag och se resultat inom några dagar.

Begär demo Logga in

Kom igång med ditt första flöde

Flowhunt har ett team av AI-flödesingenjörer redo att hjälpa dig med AI-automation.

• Prova Flowhunt
• Prata med en expert