最初のChatGPTアプリを作る方法

• OpenAIが発表したChatGPT Appsは、開発者が自分のアプリをChatGPTの会話内に直接埋め込めるようにし、8億人を超える週間アクティブユーザーを新たな配布チャネルとして活用できる
• ChatGPTは従来のテキスト応答を超えてUIコンポーネントを直接レンダリングでき、これにより予約・ショッピング・データ参照のような実際の作業を会話の流れの中で処理できる
• この構造の中核は**Model Context Protocol(MCP)**で、LLMが外部ツールとUIリソースを選択的に呼び出す方式で動作する
• ChatGPTアプリはバックエンド(MCPサーバー)とフロントエンド(UIコンポーネント)を明確に分離した構造を持ち、Reactベースのミニアプリを安全なサンドボックスで実行する
• MCPとChatGPT Appsのパターンは今後Claudeなど他のエージェントにも拡張される予定で、対話型AIと既存のSaaSをつなぐ新しいインターフェース層として定着しつつある

---

ChatGPT Appsの概要

• ChatGPT Appsは、開発者やプロダクトチームがChatGPTの会話内にアプリを直接挿入できるようにする機能
• ユーザーは会話中にホテル予約、不動産検索、オンラインショッピングなどの作業をChatGPT内でそのまま実行できる
• 週間アクティブユーザー8億人以上を抱えるプラットフォームとして、次世代の配布チャネルになる可能性がある

ChatGPT Appsの動作原理

• すべてのLLM(ChatGPT、Claude、Gemini)は、Web検索、ファイル読み取り、コード実行、アーティファクト生成など限られたツールしか使えない
• ChatGPT Appsでは、開発者がMCPツールを通じて新しいツールをLLMに公開し、ユーザーが簡単にインストール・利用できるようにする
• アプリなしで短期滞在を予約しようとすると、写真や規約情報だけが返され、実際の予約はできない
• アプリがインストールされていれば、リクエストに合ったAirbnbの宿泊先一覧を受け取り、そのまま予約できる

アプリの3つの構成要素

• MCPサーバー (バックエンド)

  • ChatGPTが通信するサーバーで、PythonまたはNode.jsで記述する
  • APIのように動作し、ChatGPTが呼び出せる「ツール」(関数)を定義する
    • 例: search_restaurants, book_ticket

• コンポーネント (フロントエンド)

  • ユーザーが目にするインタラクティブUI
  • 一般的にReactで構築され、ChatGPT内部の安全なサンドボックスで実行される
  • ChatGPTの会話内で動くミニWebアプリというイメージ

• ChatGPT (ホスト)

  • アプリはChatGPT内の埋め込みビューに表示される
  • ChatGPTはユーザーの会話内容と有効化されたアプリに基づき、いつアプリを呼び出すかを判断する

動作フロー

• ユーザーが短期滞在の支援を求めると、ChatGPTは自動的に複数のステップを実行する:
  1. アプリが役立つかどうかを判断
  2. アプリに連絡して利用可能なツールを確認 (例: Book Listing, Browse Listing)
  3. Browse Listingツールを呼び出して上位5件の宿泊先を返す
  4. ユーザーに上位5件の宿泊先を返答
• このワークフローが**MCP(Model Context Protocol)**の基盤
• AIエージェント(ChatGPT)は目標達成を助けるツールへのアクセス権を与えられ、ユーザーの要求時にそれらのツールを選択的に使う
• ツールは、2つの数字を足す計算機のように単純なものから、画像生成のような複雑なバックエンドプロセスまであり得る

表示モード

• ChatGPT Appsは3つのUI表示モードをサポートする

• インラインモード

  • 適した用途: リスト、カード、小さな可視化
  • すべてのアプリのデフォルトモードで、必要に応じて他のモードに切り替える
  • 例: 商品カルーセル、レストラン一覧

• 全画面モード

  • 適した用途: 地図、複雑なフォーム、データ集約型ダッシュボード
  • コンポーネントがChatGPTウィンドウ全体を占有する
  • より広いスペースが必要なときや、複雑な作業に集中する必要があるときに使う
  • 例: 不動産のインタラクティブ地図、スプレッドシートエディタ

• PiP(Picture-in-Picture)モード

  • 適した用途: 常駐ツール、ゲーム、リアルタイム更新
  • コンポーネントが画面上部に小さなウィンドウとして表示される
  • ユーザーがチャットを続けている間も表示し続ける必要があるものに適している
  • 例: タイマー、音楽プレーヤー、三目並べゲーム
  • 表示モード間の切り替えを計画する場合は、UXパターンをより慎重に検討する必要がある

制約事項

• 1ターンにつき1つのコンポーネント

  • ChatGPTがコンポーネントを返すツールを呼び出すと、そのターンは終了する
  • 複数のUI返却ツールを自動で連結することはできない
  • 例: 「レストランを予約してUberも呼んで」と依頼された場合、まずレストランのコンポーネントを表示し、予約後に後続トリガーでUberのコンポーネントを表示する

• コンポーネント状態のスコープ制限

  • 各コンポーネントインスタンスは、その特定のメッセージ内でのみ維持される独自の状態を持つ
  • ChatGPTがコンポーネント付きの新しいメッセージを生成すると、基本的には空の状態を持つ新しいインスタンスになる
  • バックエンドで永続化と参照を通じて状態管理する必要がある

• 直接DOMにアクセス不可

  • コンポーネントは**セキュアサンドボックス(iframe)**で実行されるため、上位のChatGPTページへのアクセスや任意スクリプトの実行はできない
  • すべての通信はwindow.openai APIを通じて行う

• パフォーマンスが重要

  • コンポーネントの状態は各リクエストごとにAIモデルへ送信される
  • 大きなペイロードは応答速度を遅くするため、必要なものだけ送信する

実際の活用事例

• EC & ショッピング

  • 価格フィルタリング、カート追加、決済(通常はメインアプリへ遷移)が可能なインタラクティブ商品カタログを構築

• ビジネスツール

  • ユーザーが列間でタスクをドラッグし、期限を指定し、状態を更新できるカンバンボードを作成
  • ChatGPTがプロジェクトに関する質問に答えつつ、同時にユーザーがアクションを起こせるようにする社内ツールで特に強力

• ブッキング & 予約

  • 空き状況、メニュー、レビューを表示するレストラン予約コンポーネントを構築
  • ユーザーはChatGPTにおすすめを尋ね、インターフェースを通じて直接予約できる

• データダッシュボード

  • インタラクティブチャートで売上分析を表示
  • 「Q4の売上はどう？」と尋ねると、特定の地域や製品にドリルダウンできるダッシュボードを提供

• 地図 & 位置情報

  • コーヒーショップ、不動産、または位置ベース検索向けのマーカー付きインタラクティブ地図を表示
  • 全画面モードで特に効果的

最初のアプリ構築ガイド (レストラン検索アプリの例)

• Step 1: コンポーネントを構築 (フロントエンド)

  • iframeコンポーネントとChatGPTの間で通信するため、window.openai.* APIとやり取りするReactコンポーネントを作成
  • OpenAIはAPIとのやり取りを助けるグローバルを提供している

• Step 2: ツールを定義 (バックエンド)

  • MCPサーバーがChatGPTとの**「契約」**を定義する
  • モデルに、何ができるのか、ツール呼び出し完了時にどのコンポーネントを表示すべきかを伝える

• Step 3: リソースを登録 (バックエンド)

  • ReactコンポーネントをHTMLとしてバンドルし、MCPサーバー上でリソースとしてホスティングする
  • ChatGPTは前のステップのoutputTemplate URIを取得し、iframe化されるコードを要求する

• Step 4: フローをテスト

  • サーバーをデプロイしたら:
    • ChatGPTを開き、Developer Modeを有効化
    • Settings → Connected Apps (または「My Apps」)へ移動
    • 「Connect new app」をクリック
    • サーバーURLを入力 (例: https://my-mcp-server.com)
    • OAuthなしで接続
  • ChatGPTがsearch_restaurantsツールを検出したら、「Find me Italian food in Brooklyn」と入力してテストする
  • ChatGPTがツールを呼び出してデータを取得し、テキストの代わりにインタラクティブなReact一覧をレンダリングする

今後の展望

• ChatGPTが先行して始めたが、まもなくMCP標準がMCP appsを通じて同じパターンをサポートする予定
• Claudeや他のエージェントでも、対話体験にミニアプリを注入できるようになる
• こうしたシステムアーキテクチャと、ユーザー向けに意味のある体験をどう構築するかを理解することは、AI製品と一般的なSaaSアプリケーションの間にある新しい通信方法を切り開く