Tworzenie mini-gier AI za pomocą generatora gier AI w FlowHunt

Przepływ, który zbudujemy

Oto struktura, którą wdrożymy – zaprojektowana dla przejrzystości i wykorzystania konkretnych komponentów FlowHunt:

Krok 1: Utwórz nowy przepływ i dodaj komponenty

Zacznijmy od przygotowania naszego obszaru roboczego i dodania wszystkich niezbędnych bloków budulcowych pokazanych na diagramie.

• Na pulpicie FlowHunt przejdź do Moje przepływy i kliknij Utwórz przepływ. Nazwij go np. „AI JS Game Generator v2”.

• Przeciągnij następujące komponenty na swój obszar roboczy z biblioteki komponentów:
  • Chat Input
  • Chat History (z wykorzystaniem InMemoryChatMessageHistory)
  • LLM Anthropic AI (lub preferowany węzeł LLM, np. LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Krok 2: Skonfiguruj kluczowe komponenty

Teraz skonfigurujmy główne węzły odpowiedzialne za logikę.

1. Węzeł Prompt

   • Kliknij węzeł Prompt.

   • Ten węzeł formatuje instrukcje dla AI. W polu Template wpisz szczegółowe instrukcje, używając zmiennych szablonu w razie potrzeby (np. {{$input}}, aby odwołać się do wiadomości z Chat Input).

   • Wklej poniższy szablon prompta:

     Użytkownik poda nazwę gry i musisz stworzyć grę wideo w jednym pliku javascript, tak jak pokazano w PRZYKŁADZIE poniżej. PAMIĘTAJ, ŻE MAMY JUŻ PLIK HTML I GRY POWINNY BYĆ BUDOWANE NA JEGO PODSTAWIE – PLIK ZOSTAŁ PODANY PONIŻEJ.
     —GRA DO WYGENEROWANIA—
     {input}
     —PRZYKŁAD PLIKU JAVASCRIPT—
     *java file*—
     —JUŻ ISTNIEJĄCY PLIK HTML—
     *HTML file*—
     

2. Dodanie narzędzi do Tool Calling Agent (URL Retriever, Google Search):

   • Chociaż są uwzględnione na tym diagramie przepływu i połączone z Tool Calling Agent, te narzędzia mogą nie być bezwzględnie konieczne do podstawowego zadania generowania gry z opisu.
   • Połączenie ich sprawia, że są dostępne dla agenta. Jeśli AI (na podstawie swojego LLM i prompta) uzna, że musi przeszukać internet lub pobrać treści z URL, aby spełnić żądanie, może użyć tych narzędzi. Dla prostych zapytań, takich jak „zrób grę w ping-ponga”, prawdopodobnie nie będą potrzebne. Nie jest tu wymagana szczególna konfiguracja, chyba że posiadasz klucze API do Google Search.

Krok 3: Połącz komponenty

Połącz węzły dokładnie tak, jak pokazano na diagramie. Dzięki temu dane będą przepływać prawidłowo.

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 – gwiazdka często oznacza główne wejście użytkownika/prompta)
5. URL Retriever (Documents As Tool output) → Tool Calling Agent (Tools * input – to wejście akceptuje wiele połączeń narzędzi)
6. Google Search (Google Search as Tool output) → Tool Calling Agent (Tools * input)
7. Tool Calling Agent (Message output) → Chat Output (Text * input)

Krok 4: Wygeneruj swoją mini-grę JavaScript

Czas ożywić Twoje pomysły na gry!

1. Zapisz swój przepływ, a następnie kliknij przycisk AI (▶️).

2. W panelu czatu wpisz swoją prośbę o grę (np. Stwórz Tetrisa).

   [Obraz: Zrzut ekranu interfejsu czatu z użytkownikiem wpisującym prompt gry]

3. Naciśnij Enter. Węzeł Prompt sformatuje Twoją prośbę, a Tool Calling Agent, korzystając z LLM Anthropic AI, wygeneruje kod gry.

Krok 5: Zagraj w wygenerowaną przez AI grę

1. Skopiuj cały blok kodu z Chat Output.
2. Wklej go do edytora tekstu (Notatnik, TextEdit, VS Code).
3. Zapisz plik z rozszerzeniem .html (np. ai_tetris.html).
4. Kliknij dwukrotnie zapisany plik, aby otworzyć go w przeglądarce i zagrać!

Podsumowanie: Budowanie dedykowanych przepływów AI w FlowHunt

Podążając za tym konkretnym schematem przepływu, stworzyłeś potężny generator gier JavaScript oparty o AI w FlowHunt. Ten przykład pokazuje, jak połączyć dedykowane węzły LLM i Prompt z wszechstronnym Tool Calling Agent, udostępniając w razie potrzeby nawet zewnętrzne narzędzia, takie jak wyszukiwarka internetowa. Wizualny interfejs FlowHunt sprawia, że nawet te nieco bardziej złożone przepływy AI są łatwe do zbudowania i zrozumienia. Powodzenia w generowaniu gier!

Zacznij od swojego pierwszego przepływu

Zespół inżynierów przepływów AI w Flowhunt jest gotowy, aby pomóc Ci w automatyzacji AI.

• Wypróbuj Flowhunt
• Porozmawiaj z ekspertem