Apps in ChatGPT（Apps SDK）のサンプルコードを動かしてみた
はじめに
こんにちは。リテールアプリ共創部のあんでぃです。
2025年10月7日に公開された「Apps in ChatGPT」と、その体験を構築するための「Apps SDK」について、OpenAI社からサンプルコードが公開されたので動かしてみました。いくつかハマった箇所などありましたので、動作させるまでのポイントを共有します。
Apps in ChatGPTとは
OpenAI社が2025年10月7日に公開したChatGPTにリッチな体験を追加する仕組みです。
ChatGPTのチャット画面の中で、会話の流れに応じて外部サービス（アプリ）を対話型で使えるようにする仕組みです。
- ChatGPT内でのやり取りは主にテキストベースでのインタラクションでしたが、リスト表示やカルーセル表示といった分かりやすいUIがチャット中に自然に登場する体験を実現できます。LINE公式アカウントのChatbotのようなUIと捉えると分かりやすいと思います。
- サービス提供者がガイドラインに沿ったアプリを提供することで、ChatGPTを起点としたサービスとの連携が実現できます。
- アプリストアが用意され、アプリ公開のための審査や、アプリのディレクトリ化、マネタイズ（収益化）オプションも導入予定です。
Apps SDKとは
Apps in ChatGPTはApps SDK（プレビュー版）を通じて開発可能です。
この SDK は Model Context Protocol（MCP） を基盤とするオープンな標準仕様で構築可能です。チャットとアプリの文脈（コンテキスト）をやり取りするプロトコルを拡張して、よくあるアプリのUIと統合できるようにしています。
Developerは、アプリのチャットロジックとインターフェース（UI 部分）をガイドラインに沿って独自に定義することが出来ます。自社バックエンドとの連携も可能です。既存ユーザーの認証とも統合できる設計になっています。
OpenAI社のサンプルコードを動かしてみた
サンプルコードはこちらです。
実行手順は基本的にReadme.mdの通りですが、私のような非エンジニアだと詰まってしまう部分が多少なりともあるので、動かすためのポイントを解説しています。
私の環境
- MacOS 15.7.1
- VS Code 1.104.3（基本的にVS Codeのターミナルを利用して実施しました）
- ChatGPT Plusプラン（2025年10月9日時点ではProかPlusでのみ実施可能です）
全体の流れ
- サンプルコードをダウンロードしてビルド
- MCPサーバーを起動
- MCPサーバーを外部に公開
- ChatGPTを開発者モードに変更して、コネクターを作成
サンプルコードをダウンロードしてビルド
サンプルコードをダウンロードしてローカルフォルダに展開します。私はGitHub Desktopを利用してCloneしました。
VS Codeで該当フォルダを開いて、ターミナルで下記のコマンドを実行してください。
pnpm install
pnpm run build
MCPサーバーを起動
MCPサーバーの起動は下記のコマンドを実行してください。
cd pizzaz_server_node
pnpm start
MCPサーバーを外部に公開
Readmeに記載のあるngrokを使いました。
ngrokのサイトでユーザー登録をして、インストールしてください。
ngrok config add-authtoken xxx まで実施すればOKです。
ngrokの起動はReadmeに記載がある通り以下のコマンドを実行してください。
ngrok http 8000
ChatGPTを開発者モードに変更して、コネクターを作成
こちらの手順は、2025年10月9日時点ではProかPlusでのみ実施可能です。
「設定」→「アプリとコネクター」→「高度な設定」→「開発者モード」をONにしてください。
次にコネクターを作成します。
「設定」→「アプリとコネクター」→「作成ボタン」をクリックしてください。
「新しいコネクター」の画面でMCPの設定を入力します。
- 名前：任意の分かりやすい名前（Pizzaz MCPなど）
- MCPサーバーのURL：ngrokのダッシュボード→「Endpoints & Traffic Policy」に表示されているURL +
/mcp- 例：
https://xxxxxx-xxxxxx-xxxxxx.ngrok-free.dev/mcp
- 例：
- 認証：認証なし
「信頼する」にチェックを入れて作成ボタンを押下します。
問題なければ少し待った後に「アプリとコネクター」の設定画面にMCPが表示されると思います。
私の場合は「検索には使用できません」と表示されていますが動作には影響なかったです。
動作確認
以下のプロンプトをChatGPTに投げることで動作確認することが可能です。
- ピザのトッピングを指定してマップ表示
- ピザのカルーセルを表示
- ピザのアルバムを表示
- ピザのリストを表示
- ピザ関連の動画を表示
実際に動かしてみた
ピザのトッピングを指定してマップ表示
このプロンプトを投げるとトッピングの種類が聞かれます。トッピングの種類を投げるとマップとカルーセルが表示されます。
右上の矢印をクリックすると全画面にすることが可能です。全画面にすることでリストをスクロールバーで動かせるようになるなど、アプリさながらのUIを体験することが出来ます。
ピザのカルーセルを表示
横スクロールで複数のピザを表示できます。LINE公式アカウントのカルーセルと同様の動きです。
ピザのアルバムを表示
カルーセルと似たUIで複数のピザを表示できます。
タップすると全画面表示になります。サムネイルと高解像度の写真表示で写真アプリのようなUIを提供することが可能です。
ピザのリストを表示
ピザを一覧表示することが可能です。この表示は項目の数で縦幅が拡張しますが、スクロールバーは表示されません（開発ドキュメントにも記載があります）
項目の数が多い場合はReactでリッチなUIを実装する判断になりそうです。
ピザ関連の動画を表示
オバマさんの動画が表示されます（謎）
まとめ
サンプルコードを動作させる上で困りそうなポイントを解説してみました。
ChatGPTを通して実際の動作を確認すると、ユーザーにどんな体験が提供できるかイメージが湧くと思いますので、非エンジニアの方々も是非ともこの記事を参考に実行してみて欲しいと思います。
