Pokémon AI Demo

Pokémon AI Demo

Pokémon のデータを調べたり、Pokémon 同士を比較したり、対抗策を提案したり、AI を使用してチームを生成したりできるフルスタックアプリケーションです。Django REST API バックエンドと React/MUI フロントエンドを備えています。

---

目次

• システムのセットアップとデプロイ
• 利用可能なモジュールとその使い方
• チームビルダーの使い方
• Web インターフェースの概要
• エージェント連携の手順

---

システムのセットアップとデプロイ

前提条件

• Python 3.8+（バックエンド用）
• Node.js 16+ & npm（フロントエンド用）
• pip（Python パッケージマネージャー）

バックエンドのセットアップ（Django/DRF）

1. バックエンドディレクトリに移動します：

   cd mcp_server
   

2. 依存関係をインストールします：

   pip install -r requirements.txt
   

3. マイグレーションを実行します：

   python manage.py migrate
   

4. バックエンドサーバーを起動します：

   python manage.py runserver
   

   API は http://127.0.0.1:8000/api/ で利用できます。

フロントエンドのセットアップ（React/MUI）

1. フロントエンドディレクトリに移動します：

   cd mcp_frontend
   

2. 依存関係をインストールします：

   npm install
   npm install @mui/material @emotion/react @emotion/styled
   npm install @mui/icons-material
   
   
   

3. フロントエンドサーバーを起動します：

   npm start
   

   アプリは http://localhost:5173/ で利用できます。

4. アプリを自動的に起動するには -

ターミナルで Windows の場合はコマンド start.bat を実行します

Linux ディストリビューションの場合は start.sh を実行します

環境変数

• デフォルトでは、フロントエンドはバックエンドが http://127.0.0.1:8000/api/agent/ にあることを想定しています。必要に応じて、mcp_frontend/src/App.jsx の API_BASE を調整してください。

---

dotenv の構成（.env）

• mcpserver フォルダー内に .env ファイルを作成します
• 内容 - " POKE_API_URL = "https://pokeapi.co/api/v2/" GOOGLE_API_KEY = "your api key" "

---

利用可能なモジュールとその使い方

バックエンドでは、次の 4 つの主要なエンドポイントを公開しています：

1. Pokémon 情報（POST /api/agent/pokemon-info/）

   • 入力：{ "name": "pikachu" }
   • 出力：基本情報、ステータス、特性、わざ、進化、フレーバーテキスト。

2. Pokémon の比較（POST /api/agent/compare/）

   • 入力：{ "pokemon1": "pikachu", "pokemon2": "bulbasaur" }
   • 出力：ステータスごとの比較、タイプ相性、共通および固有の特性。

3. 対抗策の提案（POST /api/agent/strategy/）

   • 入力：{ "name": "charizard" }
   • 出力：弱点と、対抗策として推奨される Pokémon。

4. チームビルダー（POST /api/agent/team/）

   • 入力：{ "description": "balanced team with fire and water types" }
   • 出力：役割と画像を含む、AI が生成したチーム。

---

チームビルダーの使い方

• **目的：**自然言語の説明（例：「タイプの補完に優れた攻撃的なチーム」）に基づいて Pokémon チームを生成します。
• 使い方：
  1. Web UI の「Generate Team」セクションに移動します。
  2. 入力欄にチームの説明を入力します。
  3. 「Generate」をクリックします。
  4. AI が、それぞれに名前、役割、画像を含む Pokémon のチームを返します。
• API の使用方法：
  • { "description": "your team idea" } を指定して /api/agent/team/ に POST リクエストを送信します。
  • レスポンスで、構造化されたチームの提案を受け取ります。

---

Web インターフェースの概要

Web アプリは、次の 4 つのメインカードで構成されています：

1. Pokémon を検索
   • Pokémon の名前を入力すると、ステータス、タイプ、特性、わざ、進化系統、フレーバーテキストを確認できます。
2. 2 匹の Pokémon を比較
   • 2 匹の Pokémon の名前を入力すると、ステータス、タイプ相性、特性を並べて比較できます。
3. 対抗策を提案
   • Pokémon の名前を入力すると、弱点と推奨される対抗策を確認できます。
4. チームを生成
   • 希望するチームを説明すると、役割と画像を含む AI 生成チームを取得できます。

各セクションでは、スムーズに利用できるよう、即時のフィードバック、読み込みインジケーター、エラーメッセージが表示されます。

---

エージェント連携の手順

バックエンド API と外部エージェントやスクリプトを連携できます。使用例：

• Python の例：

  import requests
  response = requests.post('http://127.0.0.1:8000/api/agent/pokemon-info/', json={"name": "pikachu"})
  print(response.json())
  

• エンドポイント：
  • /api/agent/pokemon-info/（POST）
  • /api/agent/compare/（POST）
  • /api/agent/strategy/（POST）
  • /api/agent/team/（POST）
• リクエスト／レスポンス形式： すべてのエンドポイントで JSON を受け取り、返します。

---

ライセンス

このプロジェクトは教育／デモ目的であり、Nintendo、Game Freak、The Pokémon Company とは提携していません。