Creare Mini Giochi AI con un Generatore di Giochi AI in FlowHunt

Il flusso che costruiremo

Ecco la struttura che implementeremo, progettata per chiarezza e utilizzando specifici componenti di FlowHunt:

Passo 1: Crea un nuovo flusso e aggiungi i componenti

Iniziamo impostando la canvas e aggiungendo tutti i blocchi necessari mostrati nel diagramma.

• Nel tuo dashboard di FlowHunt, vai su I miei Flussi e clicca su Crea Flusso. Dagli un nome come “AI JS Game Generator v2”.

• Trascina i seguenti componenti sulla canvas dalla libreria componenti:
  • Chat Input
  • Chat History (utilizzando InMemoryChatMessageHistory)
  • LLM Anthropic AI (o il tuo nodo LLM preferito come LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Passo 2: Configura i componenti principali

Ora impostiamo i nodi chiave che gestiscono la logica.

1. Nodo Prompt

   • Clicca sul nodo Prompt.

   • Questo nodo formatta le istruzioni per l’AI. Nel campo Template, inserisci le istruzioni dettagliate, usando le variabili di template se necessario (come {{$input}} per fare riferimento al messaggio proveniente da Chat Input).

   • Incolla il seguente template di prompt:

     L'utente ti darà un nome di gioco e tu dovrai creare il videogioco in un unico file javascript come mostrato nell'ESEMPIO qui sotto. MA RICORDA CHE ABBIAMO GIÀ UN FILE HTML E I GIOCHI DEVONO ESSERE COSTRUITI BASANDOSI SU QUEL FILE, CHE È RIPORTATO DI SEGUITO.
     —GIOCO DA GENERARE—
     {input}
     —ESEMPIO DI FILE JAVASCRIPT—
     *file java*—
     —FILE HTML GIÀ CREATO—
     *file HTML*—
     

2. Aggiunta strumenti al Tool Calling Agent (URL Retriever, Google Search):

   • Anche se inclusi in questo diagramma di flusso e collegati al Tool Calling Agent, questi strumenti potrebbero non essere strettamente necessari per il compito base di generare un gioco da una descrizione.
   • Collegarli li rende disponibili all’agente. Se l’AI (in base al suo LLM e prompt principale) decide che ha bisogno di cercare sul web o recuperare contenuti da un URL per soddisfare la richiesta, può utilizzare questi strumenti. Per richieste semplici come “crea un gioco pong”, probabilmente non li userà. Non è necessaria una configurazione specifica a meno che tu non abbia chiavi API per Google Search.

Passo 3: Collega i componenti

Collega i nodi esattamente come mostrato nel diagramma. Questo assicura che i dati fluiscano correttamente.

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 – Nota l’asterisco, che spesso indica l’input utente/principale del prompt)
5. URL Retriever (Documents As Tool output) → Tool Calling Agent (Tools * input – Questo input accetta più connessioni di strumenti)
6. Google Search (Google Search as Tool output) → Tool Calling Agent (Tools * input)
7. Tool Calling Agent (Message output) → Chat Output (Text * input)

Passo 4: Genera il tuo mini-gioco JavaScript

Diamo vita alle tue idee di gioco!

1. Salva il flusso, poi clicca sul pulsante AI (▶️).

2. Nel pannello chat, digita la tua richiesta di gioco (es. Crea Tetris).

   [Immagine: Screenshot dell’interfaccia chat con un utente che inserisce un prompt di gioco]

3. Premi Invio. Il nodo Prompt formatterà la tua richiesta, e il Tool Calling Agent, utilizzando LLM Anthropic AI, genererà il codice del gioco.

Passo 5: Gioca al tuo gioco creato dall’AI

1. Copia l’intero blocco di codice dal Chat Output.
2. Incollalo in un editor di testo semplice (Notepad, TextEdit, VS Code).
3. Salva il file con estensione .html (es. ai_tetris.html).
4. Fai doppio clic sul file salvato per aprirlo nel browser e giocare!

Conclusione: Costruire flussi AI specifici con FlowHunt

Seguendo questo specifico diagramma di flusso, hai costruito un potente generatore di giochi JavaScript AI usando FlowHunt. Questo esempio mostra come combinare nodi dedicati LLM e Prompt con il versatile Tool Calling Agent, rendendo disponibili anche strumenti esterni come la ricerca web se necessario. L’interfaccia visiva di FlowHunt rende semplice e intuitiva la creazione e la comprensione anche di questi flussi AI leggermente più complessi. Buona generazione di giochi!

Inizia con il tuo primo flusso

Flowhunt ha un team di ingegneri di flussi AI pronto ad aiutarti con l’Automazione AI.

• Prova Flowhunt
• Parla con un Esperto