FlowHuntでAIゲームジェネレーターを使ってAIミニゲームを作成する

作成するフロー

ここでは、分かりやすく設計された構成と、特定のFlowHuntコンポーネントを活用した実装構成を紹介します。

ステップ1: 新しいフローの作成とコンポーネントの追加

まずはキャンバスを準備し、ダイアグラムに表示されている必要なビルディングブロックをすべて追加しましょう。

• FlowHuntのダッシュボードで、My Flowsに移動し、Create Flowをクリックします。例えば「AI JS Game Generator v2」などの名前を付けてください。

• コンポーネントライブラリから、以下のコンポーネントをキャンバスにドラッグします:
  • チャット入力
  • チャット履歴（InMemoryChatMessageHistoryを使用）
  • LLM Anthropic AI（またはお好みのLLMノード：LLM OpenAI、LLM Geminiなど）
  • プロンプト
  • URLリトリーバー
  • Google検索
  • ツールコーリングエージェント
  • チャット出力

ステップ2: コアコンポーネントの設定

次に、ロジックを担当する重要なノードを設定します。

1. プロンプトノード

   • プロンプトノードをクリックします。

   • このノードはAIへの指示をフォーマットします。Templateフィールドに詳細な指示を書き込み、必要に応じてテンプレート変数（例：{{$input}}でチャット入力のメッセージを参照）を使います。

   • 以下のプロンプトテンプレートを貼り付けてください：

     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. ツールのツールコーリングエージェントへの追加（URLリトリーバー、Google検索）

   • このフローダイアグラムに含まれ、ツールコーリングエージェントに接続されているこれらのツールは、基本的なゲーム生成タスクには必ずしも必要ありません。
   • これらを接続しておくことで、エージェントが使用可能になります。AIがリクエストを満たすためにウェブ検索やURLからのコンテンツ取得が必要だと判断した場合、これらのツールを利用できます。例えば「ポンゲームを作って」のような単純なリクエストでは必要ないことが多いです。Google検索用のAPIキーがある場合を除き、特別な設定は不要です。

ステップ3: コンポーネントの接続

ノード同士をダイアグラム通り正確につなぎます。これによりデータが正しく流れます。

1. チャット履歴（InMemoryChatMessageHistoryの出力）→ ツールコーリングエージェント（Chat History入力）
2. LLM Anthropic AI（LLM出力）→ ツールコーリングエージェント（LLM入力）
3. チャット入力（Message出力）→ プロンプト（Input入力）
4. プロンプト（Message出力）→ ツールコーリングエージェント（Inputs *入力 – アスタリスクは主なユーザー/プロンプト入力を示すことが多いです）
5. URLリトリーバー（Documents As Tool出力）→ ツールコーリングエージェント（Tools *入力 – この入力は複数のツール接続を受け付けます）
6. Google検索（Google Search as Tool出力）→ ツールコーリングエージェント（Tools *入力）
7. ツールコーリングエージェント（Message出力）→ チャット出力（Text *入力）

ステップ4: あなたのJavaScriptミニゲームを生成

あなたのゲームアイデアを形にしましょう！

1. フローを保存し、AIボタン（▶️）をクリックします。

2. チャットパネルで、作りたいゲームのリクエストを入力します（例：Make Tetris）。

   [画像: ゲームプロンプトを入力するユーザーのチャットインターフェースのスクリーンショット]

3. Enterキーを押します。プロンプトノードがリクエストをフォーマットし、ツールコーリングエージェントがLLM Anthropic AIを使ってゲームコードを生成します。

ステップ5: AIが生成したゲームで遊ぶ

1. チャット出力からコードブロック全体をコピーします。
2. プレーンテキストエディタ（Notepad、TextEdit、VS Codeなど）に貼り付けます。
3. ファイルを.html拡張子（例：ai_tetris.html）で保存します。
4. 保存したファイルをダブルクリックしてブラウザで開けば、プレイできます！

まとめ：FlowHuntで特定のAIフローを構築する

この特定のフローダイアグラムに従うことで、FlowHuntを使った強力なAI JavaScriptゲームジェネレーターを構築できました。この例は、専用のLLMやプロンプトノードを多用途なツールコーリングエージェントと組み合わせ、必要に応じてウェブ検索などの外部ツールも利用可能にする方法を示しています。FlowHuntのビジュアルインターフェースなら、このような少し複雑なAIワークフローでも簡単に構築・理解できます。ゲーム生成を楽しんでください！

はじめてのフローを作ってみましょう

Flowhuntには、AI自動化をサポートするAIフローエンジニアのチームがいます。

• Flowhuntを試す
• 専門家に相談