Tok, který postavíme

Zde je struktura, kterou budeme realizovat – přehledně navržená a využívající konkrétní komponenty FlowHunt:

Krok 1: Vytvoření nového toku a přidání komponent

Začněme nastavením plátna a přidáním všech stavebních bloků dle schématu.

• Na svém FlowHunt dashboardu přejděte do Moje toky a klikněte na Vytvořit tok. Pojmenujte ho například „AI JS Game Generator v2“.

• Přetáhněte na plátno tyto komponenty z knihovny komponent:
  • Chat Input
  • Chat History (s použitím InMemoryChatMessageHistory)
  • LLM Anthropic AI (nebo jiný uzel LLM, např. LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Krok 2: Nastavení klíčových komponent

Nyní nastavíme uzly, které zajišťují logiku.

1. Uzel Prompt

   • Klikněte na uzel Prompt.

   • Tento uzel formátuje instrukce pro AI. Do pole Template zadejte detailní instrukce, případně použijte proměnné šablony (například {{$input}} pro odkaz na zprávu z Chat Input).

   • Vložte následující šablonu promptu:

     Uživatel vám zadá název hry a vy musíte vytvořit videohru v jediném javascriptovém souboru podle NÁSLEDUJÍCÍHO PŘÍKLADU. ALE MĚJTE NA PAMĚTI, ŽE UŽ MÁME HTML SOUBOR A HRY BY MĚLY BÝT STAVĚNY NA JEHO ZÁKLADĚ, SOUBOR JE UVEDEN NÍŽE.
     —HRA K VYGENEROVÁNÍ—
     {input}
     —PŘÍKLAD JAVASCRIPT SOUBORU—
     *java file*—
     —JIŽ VYTVOŘENÝ HTML SOUBOR—
     *HTML file*—
     

2. Přidání nástrojů do Tool Calling Agenta (URL Retriever, Google Search):

   • Tyto nástroje jsou ve schématu zahrnuty a připojeny k Tool Calling Agentovi, ale pro základní úkol generace hry dle popisu nejsou nezbytné.
   • Jejich propojením je agent může využít. Pokud AI (dle svého LLM a promptu) usoudí, že potřebuje vyhledat něco na webu nebo stáhnout obsah z URL, může tyto nástroje použít. Pro jednoduché požadavky typu „udělej pong hru“ je obvykle nepotřebuje. Zde není nutné žádné speciální nastavení, pokud nemáte API klíče pro Google Search.

Krok 3: Propojení komponent

Propojte uzly přesně dle schématu, aby data správně plynula.

1. Chat History (výstup InMemoryChatMessageHistory) → Tool Calling Agent (vstup Chat History)
2. LLM Anthropic AI (výstup LLM) → Tool Calling Agent (vstup LLM)
3. Chat Input (výstup Message) → Prompt (vstup Input)
4. Prompt (výstup Message) → Tool Calling Agent (vstup Inputs * poznámka: hvězdička často značí hlavní uživatelský/prompt input)
5. URL Retriever (výstup Documents As Tool) → Tool Calling Agent (vstup Tools * tento vstup přijímá více připojených nástrojů)
6. Google Search (výstup Google Search as Tool) → Tool Calling Agent (vstup Tools * )
7. Tool Calling Agent (výstup Message) → Chat Output (vstup Text *)

Krok 4: Vygenerujte si svou JavaScript minihru

Pojďme vaše herní nápady oživit!

1. Uložte svůj tok, poté klikněte na tlačítko AI (▶️).

2. Do chat panelu napište požadavek na hru (např. Udělej Tetris).

   [Obrázek: Screenshot chatového rozhraní s uživatelem zadávajícím herní prompt]

3. Stiskněte Enter. Uzel Prompt váš požadavek naformátuje a Tool Calling Agent s využitím LLM Anthropic AI vygeneruje kód hry.

Krok 5: Zahrajte si vygenerovanou AI hru

1. Zkopírujte celý blok kódu z Chat Output.
2. Vložte jej do prostého textového editoru (Notepad, TextEdit, VS Code).
3. Uložte soubor s příponou .html (např. ai_tetris.html).
4. Dvojklikem soubor otevřete v prohlížeči a hrajte!

Závěr: Stavba specifických AI toků ve FlowHunt

Podle tohoto konkrétního schématu jste postavili výkonný AI generátor JavaScript her pomocí FlowHunt. Tento příklad ukazuje, jak kombinovat samostatné uzly LLM a Prompt s univerzálním Tool Calling Agentem a případně zpřístupnit externí nástroje jako webové vyhledávání. Vizuální rozhraní FlowHunt umožňuje stavět a chápat i tyto složitější AI workflow jednoduše a efektivně. Přejeme hodně zábavy při generování her!

Začněte s prvním tokem

Flowhunt má tým AI flow inženýrů, kteří vám rádi pomohou s AI automatizací.

• Vyzkoušet Flowhunt
• Promluvte si s expertem