Fluduro | ChatGPT アプリプロジェクト

Fluduro は、性格から花を診断するシンプルなクイズアプリケーションです。このプロジェクトは、ChatGPT 内で直接インタラクティブなウィジェットを作成することで、OpenAI Apps SDK と Model Context Protocol (MCP) を探求するために構築されました。

🛠️ プロジェクト概要

このプロジェクトの目標は、以下の方法を学ぶことでした。

1. MCPサーバーを構築し、ツールとUIリソースを公開する。

2. OpenAI Apps SDK を使用して、ChatGPT 内でカスタム HTML/CSS ウィジェットをレンダリングする。

3. ngrok を使用してローカルサーバーを ChatGPT に接続する。

4. LLM (Groq) を使用してクイズの質問を動的に生成する。

ツールとリソース:

• ツール: say_hello、start、submit_answers、show_results、get_quiz_state。

• UIウィジェット: ウェルカム画面、クイズ画面、結果画面。

Related MCP server: Hello Widget Example

📸 ビジュアル

![Welcome Screen (Light Mode)](./screenshots/welcome-light.png)
<!-- slide -->
![Welcome Screen (Dark Mode)](screenshots/welcome-dark.png)
<!-- slide -->
![Quiz Screen](screenshots/quiz.png)
<!-- slide -->
![Results Screen](screenshots/result.png)

⚡ ローカルセットアップ

1. インストール

リポジトリをクローンして依存関係をインストールします:

git clone <repository-url>
cd plantora
npm install

2. 設定

APIキー用の .env ファイルを作成します:

cp .env.example .env

Groq APIキー を API_KEY フィールドに追加してください。無料のキーは console.groq.com で取得できます。

3. 実行とトンネリング

HTTPモードでサーバーを起動し、ngrok を使用して公開HTTPSトンネルを作成します（ChatGPTで必要）:

# Terminal 1: Start the server
npm run start:http

# Terminal 2: Start ngrok on the same port
ngrok http 3553

ngrok によって提供される公開URLをメモしておいてください（例: https://xyz.ngrok-free.dev）。

🔗 ChatGPT への接続方法

ChatGPT でこのアプリをテストするには、次の手順に従ってください:

1. ChatGPT で 開発者モード を有効にします（設定 → アプリとコネクタ → 詳細設定）。

2. 設定 → コネクタ で、作成 をクリックします。

3. Streamable HTTP を選択し、ngrok URL を /mcp パスとともに貼り付けます: https://your-id.ngrok-free.dev/mcp

4. 「Fluduro」という名前を付けて、作成 をクリックします。

5. 新しいチャットにコネクタを追加し、"Start the quiz." と入力します。

🤖 技術スタック

• バックエンド: @modelcontextprotocol/sdk を使用した Node.js。

• LLM: 質問の生成と特性の分析を行う Groq (Llama 3.3 70B)。

• フロントエンド: Tailwind CSS (CDN) と Google Fonts を使用した Vanilla HTML/CSS。

• トンネリング: ngrok。

📖 SDK から得た主な学び

• window.openai ブリッジ: ウィジェットの iframe とホスト間で通信する方法を学びました。

• テーマ同期: openai:set_globals を使用して、UI を ChatGPT のダーク/ライトモードに適応させました。

• ツール駆動UI: structuredContent を使用して、モデルのツール出力から UI 変更をトリガーする方法を学びました。

結論

このプロジェクトは、ChatGPT エコシステム向けのネイティブ感覚のアプリを構築するための実践的な入門編となりました。OpenAI Apps フレームワーク内でのツール登録、リソース処理、状態管理の基礎に焦点を当てています。

📸 ビジュアル - 参考スクリーンショット

ウェルカム画面 - ライトモード

ウェルカム画面 - ダークモード

クイズ画面

結果画面