Erstellen von KI-Minigames mit einem KI-Spielgenerator in FlowHunt

Der Flow, den wir bauen werden

Hier ist die Struktur, die wir umsetzen werden – ausgelegt auf Klarheit und Nutzung spezifischer FlowHunt-Komponenten:

Schritt 1: Neuen Flow erstellen & Komponenten hinzufügen

Lassen Sie uns beginnen, indem wir unsere Arbeitsfläche aufsetzen und alle notwendigen Bausteine aus dem Diagramm hinzufügen.

• Navigieren Sie in Ihrem FlowHunt-Dashboard zu Meine Flows und klicken Sie auf Flow erstellen. Benennen Sie ihn z. B. „KI JS Spielgenerator v2“.

• Ziehen Sie folgende Komponenten aus der Komponentenbibliothek auf Ihre Arbeitsfläche:
  • Chat Input
  • Chat History (mit InMemoryChatMessageHistory)
  • LLM Anthropic AI (oder Ihren bevorzugten LLM-Knoten wie LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Schritt 2: Die Kernkomponenten konfigurieren

Jetzt richten wir die wichtigsten Knoten ein, die die Logik steuern.

1. Prompt-Knoten

   • Klicken Sie auf den Prompt-Knoten.

   • Dieser Knoten formatiert die Anweisungen für die KI. Geben Sie im Template-Feld die detaillierten Anweisungen ein und verwenden Sie bei Bedarf Template-Variablen (wie {{$input}} für die Nachricht aus Chat Input).

   • Fügen Sie die folgende Prompt-Vorlage ein:

     User will give you a game name and you must create the video game in a single javascript file like the EXAMPLE shown below. BUT KEEP IN MIND THAT WE ALREADY HAVE AN HTML FILE AND THE GAMES SHOULD BE BUILT BASED ON THAT THE FILE IS MENTIONED DOWN BELOW.
     —GAME TO BE GENERATED—
     {input}
     —EXAMPLE OF JAVASCRIPT FILE—
     *java file*—
     —ALREADY CREATED HTML FILE—
     *HTML file*—
     

2. Tools zum Tool Calling Agent hinzufügen (URL Retriever, Google Search):

   • Diese Tools sind in diesem Flussdiagramm enthalten und mit dem Tool Calling Agent verbunden, aber für die grundlegende Aufgabe, ein Spiel aus einer Beschreibung zu generieren, nicht zwingend notwendig.
   • Durch die Verbindung stehen sie dem Agenten zur Verfügung. Falls die KI (basierend auf LLM und Prompt) entscheidet, dass sie eine Websuche oder das Abrufen von Inhalten über eine URL benötigt, kann sie diese Tools nutzen. Für einfache Anfragen wie „mache ein Pong-Spiel“ sind sie meist nicht erforderlich. Eine spezifische Konfiguration ist hier nicht nötig, es sei denn, Sie haben API-Keys für die Google-Suche.

Schritt 3: Komponenten verbinden

Verbinden Sie die Knoten genau wie im Diagramm gezeigt. So ist der Datenfluss 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 – das Sternchen kennzeichnet meist die Haupteingabe durch Nutzer/Prompt)
5. URL Retriever (Documents As Tool output) → Tool Calling Agent (Tools * input – dieser Input akzeptiert mehrere Tool-Verbindungen)
6. Google Search (Google Search as Tool output) → Tool Calling Agent (Tools * input)
7. Tool Calling Agent (Message output) → Chat Output (Text * input)

Schritt 4: Ihr JavaScript-Minigame generieren

Jetzt bringen wir Ihre Spielideen zum Leben!

1. Speichern Sie Ihren Flow, dann klicken Sie auf die KI-Schaltfläche (▶️).

2. Geben Sie im Chatfeld Ihre Spielanfrage ein (z. B. Mache Tetris).

   [Bild: Screenshot der Chat-Oberfläche mit einer vom Nutzer eingegebenen Spielanfrage]

3. Drücken Sie Enter. Der Prompt-Knoten formatiert Ihre Anfrage, und der Tool Calling Agent generiert mithilfe des LLM Anthropic AI den Spielcode.

Schritt 5: Ihr KI-generiertes Spiel spielen

1. Kopieren Sie den gesamten Codeblock aus dem Chat Output.
2. Fügen Sie ihn in einen einfachen Texteditor (Notepad, TextEdit, VS Code) ein.
3. Speichern Sie die Datei mit der Endung .html (z. B. ai_tetris.html).
4. Doppelklicken Sie auf die gespeicherte Datei, um sie im Webbrowser zu öffnen und zu spielen!

Fazit: Spezifische KI-Flows mit FlowHunt bauen

Mit diesem spezifischen Flussdiagramm haben Sie einen leistungsfähigen KI-JavaScript-Spielgenerator mit FlowHunt gebaut. Dieses Beispiel zeigt, wie Sie dedizierte LLM- und Prompt-Knoten mit dem vielseitigen Tool Calling Agent kombinieren und bei Bedarf sogar externe Tools wie die Websuche einbinden können. Die visuelle Oberfläche von FlowHunt macht das Erstellen und Verstehen auch etwas komplexerer KI-Workflows einfach und effizient. Viel Spaß beim Spiele generieren!

Starten Sie mit Ihrem ersten Flow

Das Flowhunt-Team aus KI-Flow-Ingenieuren hilft Ihnen gerne bei der KI-Automatisierung.

• Flowhunt ausprobieren
• Mit einem Experten sprechen