Crearea de mini-jocuri AI cu un generator AI de jocuri în FlowHunt

Fluxul pe care îl vom construi

Iată structura pe care o vom implementa, concepută pentru claritate și folosind componente specifice FlowHunt:

Pasul 1: Creează un nou flow și adaugă componente

Să începem prin a seta canvasul și a adăuga toate blocurile de construcție necesare prezentate în diagramă.

• În dashboard-ul FlowHunt, navighează la My Flows și apasă pe Create Flow. Dă-i un nume precum „AI JS Game Generator v2”.

• Trage următoarele componente pe canvas din biblioteca de componente:
  • Chat Input
  • Chat History (folosind InMemoryChatMessageHistory)
  • LLM Anthropic AI (sau nodul tău LLM preferat precum LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Pasul 2: Configurează componentele de bază

Acum, să setăm nodurile cheie care gestionează logica.

1. Nodul Prompt

   • Apasă pe nodul Prompt.

   • Acest nod formatează instrucțiunile pentru AI. În câmpul Template, introdu instrucțiunile detaliate, folosind variabile de template dacă este necesar (precum {{$input}} pentru a face referire la mesajul din Chat Input).

   • Lipește următorul șablon de prompt:

     Utilizatorul îți va da un nume de joc și trebuie să creezi jocul video într-un singur fișier javascript ca în EXEMPLUL de mai jos. DAR ȚINE CONT CĂ AVEM DEJA UN FIȘIER HTML, IAR JOCURILE TREBUIE CONSTRUITE PE BAZA ACESTUIA, FIȘIERUL ESTE MENȚIONAT MAI JOS.
     —JOCUL CARE TREBUIE GENERAT—
     {input}
     —EXEMPLU DE FIȘIER JAVASCRIPT—
     *fișier java*—
     —FIȘIER HTML DEJA CREAT—
     *fișier HTML*—
     

2. Adăugarea uneltelor la Tool Calling Agent (URL Retriever, Google Search):

   • Deși sunt incluse în această diagramă de flux și conectate la Tool Calling Agent, aceste unelte s-ar putea să nu fie strict necesare pentru sarcina de bază de a genera un joc dintr-o descriere.
   • Conectarea lor le face disponibile agentului. Dacă AI-ul (pe baza LLM-ului și promptului principal) decide că are nevoie să caute pe web sau să aducă conținut de la o adresă URL pentru a răspunde cererii, poate folosi aceste unelte. Pentru cereri simple precum „fă un joc pong”, probabil nu va avea nevoie de ele. Nu este necesară configurare suplimentară aici decât dacă ai chei API pentru Google Search.

Pasul 3: Conectează componentele

Leagă nodurile exact cum este prezentat în diagramă. Acest lucru asigură fluxul corect al datelor.

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 – Atenție la asterisc, de obicei indică inputul principal al utilizatorului/promptului)
5. URL Retriever (Documents As Tool output) → Tool Calling Agent (Tools * input – Acest input acceptă conexiuni multiple de unelte)
6. Google Search (Google Search as Tool output) → Tool Calling Agent (Tools * input)
7. Tool Calling Agent (Message output) → Chat Output (Text * input)

Pasul 4: Generează mini-jocul tău JavaScript

Să aducem la viață ideile tale de joc!

1. Salvează flow-ul, apoi apasă pe butonul AI (▶️).

2. În panoul de chat, tastează cererea pentru joc (ex: Fă Tetris).

   [Imagine: Captură de ecran a interfeței de chat cu un utilizator care introduce un prompt de joc]

3. Apasă Enter. Nodul Prompt va formata cererea, iar Tool Calling Agent, folosind LLM Anthropic AI, va genera codul jocului.

Pasul 5: Joacă jocul generat de AI

1. Copiază întregul bloc de cod din Chat Output.
2. Lipește-l într-un editor de text simplu (Notepad, TextEdit, VS Code).
3. Salvează fișierul cu extensia .html (ex: ai_tetris.html).
4. Dublu-click pe fișierul salvat pentru a-l deschide în browser și a te juca!

Concluzie: Construirea de fluxuri AI specifice cu FlowHunt

Urmând această diagramă de flux, ai construit un generator AI puternic de jocuri JavaScript folosind FlowHunt. Acest exemplu demonstrează cum poți combina noduri dedicate LLM și Prompt cu versatilul Tool Calling Agent, făcând chiar și unelte externe, precum căutarea web, disponibile dacă este necesar. Interfața vizuală FlowHunt face ca realizarea și înțelegerea acestor fluxuri AI, chiar și puțin mai complexe, să fie simplă și eficientă. Spor la generat jocuri!

Începe cu primul tău flow

Echipa Flowhunt are ingineri de flux AI gata să te ajute cu automatizarea AI.

• Încearcă Flowhunt
• Vorbește cu un expert