💬

Apps SDK を触ってみる

に公開
TypeScript
ChatGPT
appssdk
tech

1. Apps SDK / Apps in ChatGPTとは

Apps in ChatGPTは、ChatGPTの中で他のサービスやアプリを直接使える新機能です。

できること:

  • ChatGPTと会話しながら、SpotifyやCanva、Zillow、Expediaなどのアプリを操作できる
    例えば「SpotifyでJazzを流して」「Canvaでプレゼン資料を作って」とお願いするだけで、ChatGPTを離れずに作業が完了
  • アプリはChatGPTの会話の文脈を理解しているので、スムーズに連携

詳しくはこちらで解説しています↓
https://zenn.dev/kamite/articles/c8ff07f0253ff1

2. 今回動かすサンプル「Pizzaz」の紹介

Pizzazとは

Pizzazは、OpenAI公式が提供するデモアプリケーションです。架空のピザ屋さんを検索・表示するアプリで、Apps SDKの主要機能を体験できます。

Pizzazには5種類のUIコンポーネントが含まれています:

  1. Pizza Map: Mapboxを使った地図表示
  2. Pizza List: ランキング形式のリスト表示
  3. Pizza Carousel: 横スクロールカルーセル
  4. Pizza Album: 詳細情報を表示するギャラリー
  5. Pizza Video: ビデオプレイヤー

完成イメージ

ChatGPT内でこんな感じでピザマップが表示されます:

3. 事前準備

必要な環境

Apps SDKを動かすには、以下の環境が必要です:

必須

  • Node.js 18以上
  • pnpm (推奨) または npm/yarn
  • ngrok 入れてない方はこちら
  • ChatGPTアカウント (Plus/Pro/Go)
    • 注意: 無料プランは開発者モードにできないため使用できません

4. 実際に動かしてみる

実際にPizzazアプリを動かしていきます

ステップ1: リポジトリのクローン

まず、公式のサンプルリポジトリをクローンします:

git clone https://github.com/openai/openai-apps-sdk-examples.git
cd openai-apps-sdk-examples

ステップ2: 依存関係のインストール

プロジェクトに必要なパッケージをインストールします:

pnpm install

これにより以下がインストールされます:

  • React/TypeScript関連パッケージ
  • MCPサーバーSDK (@modelcontextprotocol/sdk)
  • ビルドツール (Vite, esbuild)
  • UIライブラリ (Mapbox, Lucide Reactなど)

インストールには数分かかる場合があります。

ステップ3: MCPサーバーの起動

以下を実行します:

cd openai-apps-sdk-examples/pizzaz_server_node
pnpm start

何が起こっているか:

  • Node.jsでMCPサーバーが起動します
  • ポート8000でHTTPサーバーがリッスンを開始します

ターミナルに表示されるログ:

Pizzaz MCP server listening on http://localhost:8000
  SSE stream: GET http://localhost:8000/mcp
  Message post endpoint: POST http://localhost:8000/message

動作確認

ブラウザで http://localhost:8000/mcp にアクセスしてみてください。
何かしらのレスポンスが返ってくればサーバーが正常に動作しています。

ステップ5: ngrokで外部公開

ChatGPTからローカルサーバーにアクセスできるよう、ngrokで公開します。

2つ目のターミナルウィンドウを開いて、以下を実行:

ngrok http 8000

表示される画面:

ngrok

Session Status                online
Account                       your@email.com
Version                       3.x.x
Region                        Japan (jp)
Latency                       -
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://xxxx-xxxx-xxxx.ngrok-free.app -> http://localhost:8000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

重要: https://xxxx-xxxx-xxxx.ngrok-free.app の部分をコピーしておいてください!

5. ChatGPTに接続する

サーバーの準備ができたので、ChatGPTと連携させます。

開発者モードの有効化

  1. ChatGPTにアクセス
  2. 左下のプロフィールアイコンをクリック
  3. 設定 を開く
  4. アプリとコネクター タブを選択
  5. 一番下にある 高度な設定 をクリック
  6. 開発者モード をオンに切り替え

コネクターの追加

  1. 設定から アプリとコネクター タブを選択
  2. 作成する ボタンをクリック
  3. 以下の情報を入力:
項目 入力内容 説明
名前 Pizzaz Demo 任意の名前 (後でChatGPTで選択する際に表示されます)
MCP サーバーの URL https://xxxx.ngrok-free.app/mcp ngrokで取得したURL + /mcp パス
認証 認証なし 今回は認証なし
Trust ✓ わたしはこのアプリケーションを信頼します チェックを入れる

  1. 作成する をクリック

動作確認

実際に動かしてみます

1. 新しいチャットを開始

ChatGPTで新しいチャットを開きます。

2. アプリを選択

  • メッセージ入力欄の左にある 「+」アイコン をクリック
  • さらに表示 メニューを開く
  • 先ほど作成した 「Pizzaz Demo」 を選択

3. プロンプトを入力

以下のようなプロンプトを試してみてください:

Show me a pizza map
or
ピザのマップを見せて

または

Give me a list of pizza places
or
ピザのリストが欲しい

または

Show me a pizza carousel
or
ピザの

期待される動作

ChatGPTの応答として、以下のようなインタラクティブなUIが表示されるはずです:

  • Pizza Map: 地図上にピンが表示され、クリックすると詳細情報が見られる
  • Pizza List: ランキング形式でピザ屋が並び、お気に入りボタンなどが押せる
  • Pizza Carousel: 横にスワイプして複数のピザ屋を閲覧できる

🎉 初めてのApps SDKアプリが動きました

6. うまく動かないとき

トラブルが発生した場合の対処法をまとめます。

❌ MCPサーバーに接続できない

症状:

  • ChatGPTで「Connection failed」などのエラー
  • アプリが選択できない

確認ポイント:

  1. ngrokのURLが正しいか

    • /mcpパスを忘れていないか確認
    • 例: https://xxxx.ngrok-free.app/mcp ✅
    • 例: https://xxxx.ngrok-free.app ❌

  2. MCPサーバーが起動しているか

    # 別ターミナルで確認
curl http://localhost:8000/mcp

  3. ngrokが正常に動作しているか

    • http://127.0.0.1:4040でngrokのWeb UIを確認
    • リクエストが届いているか確認

❌ "App not found"エラー

症状:

  • ChatGPTでアプリが表示されない
  • 「+」メニューに出てこない

確認ポイント:

  1. Developer Modeが有効になっているか

    • Settings > Features > Developer mode

  2. Connectorが正しく追加されているか

    • Settings > Connectors で確認

  3. ChatGPTを一度リロードしてみる

❌ ngrokのセッションが切れる

症状:

  • しばらく使っていると突然接続できなくなる

原因と対処:

  • ngrok無料プランは2時間のセッション制限があります
  • 対処法:
    1. ngrokを再起動
      # Ctrl+Cで停止して再度実行
ngrok http 8000
    2. ChatGPTのConnector設定で新しいURLに更新
    3. または ngrok Pro にアップグレード(有料)

7. まとめ

Apps SDKの基本から実際の動作まで体験できたと思います。

Apps SDKの可能性

Apps SDKは、ChatGPTを単なる会話AIからアプリケーションプラットフォームへと変貌させる技術です。

  • 🌍 800万人以上のユーザーベース: 巨大な市場へのアクセス
  • 🔧 柔軟な開発: Web技術で自由にUIを構築
  • 🔌 標準化: MCPという オープンスタンダード
  • 💰 収益化: 年内にマネタイズ機能も提供予定

ChatGPTがプラットフォームになる未来

WeChatがアプリの「スーパーアプリ」となったように、ChatGPTも様々なアプリが動作するプラットフォームになる可能性があります。

ChatGPT = 新しいOS?

- 会話がインターフェース
- アプリがシームレスに統合
- 自然言語で操作

今がチャンス!

現在Apps SDKはプレビュー版で、誰でも開発・テストができます。年内には正式なアプリ提出が可能になる予定です。

早めに触っておくメリット:

  • ✅ ノウハウを蓄積できる
  • ✅ コミュニティで先行者になれる
  • ✅ リリース時にすぐ公開できる
  • ✅ マーケットで優位に立てる

Happy Coding! 🍕✨

参考リンク

この記事は2025年10月時点の情報に基づいています。Apps SDKはプレビュー版のため、仕様が変更される可能性があります。

Discussion