目的

今回は ChatGPT Apps SDK を使って、ChatGPT の画面内に 自作の React UI を組み込む ということを行った。

OpenAI が公開している pizzaz サンプルをベースにしつつ、「健康ピザ🍕を作るためのレシピ機能」を追加して「自分だけのウィジェット」を ChatGPT に表示させる。

目次

1. Apps SDK の概要
2. プロジェクトセットアップ
3. UI（pizzaz-healthy）の作成
4. markers.json に健康レシピを追加
5. build-all.mts のカスタマイズ
6. server.ts のウィジェット追加
7. 開発サーバーの起動とアセット配信
8. ngrok で MCP サーバーを外部公開
9. ChatGPT への登録
10. Chrome の Local Network Access Checks を無効化
11. 動作確認
12. まとめ

1. Apps SDK の概要

Apps SDK は、ChatGPT の中に独自の UI コンポーネントやアプリケーションを直接組み込める 新しい仕組みである。

通常の Web アプリとは異なり、ChatGPT の応答の一部として React で作ったインタラクティブな UI を表示できる。

Apps SDK のポイントは次の通り：

• UI は React / HTML で自由に作成できる
• MCP サーバーが ChatGPT と UI をつなぐ役割を持つ
• ChatGPT のレスポンス中に “Widget” として表示される

今回は OpenAI の pizzaz サンプルをベースに、自作ウィジェット 「pizzaz-healthy」 を追加し、ChatGPT 内で動作する “健康ピザレシピ” UI を作成する。

2. プロジェクトセットアップ

まずは、Apps SDK のサンプルをローカルにクローンし、依存関係をインストール：

cd ~/dev
git clone https://github.com/openai/openai-apps-sdk-examples.git
cd openai-apps-sdk-examples
pnpm install

3. UI（pizzaz-healthy）の作成

openai-apps-sdk-examples/src 内に新フォルダpizzaz-healthyを作成：

pizzaz-healthy/
  ├─ index.jsx
  └─ style.css

index.jsx と style.css に簡単なUIを実装する。

4. markers.json に健康レシピを追加

pizzaz サンプルの markers.json に、新たに health_recipes を追加：

"health_recipes": [
  {
    "id": "low-carb",
    "name": "低糖質ピザ",
    "image": "https://persistent.oaistatic.com/pizzaz/pizzaz-1.png",
    "difficulty": "簡単",
    "prepTime": "20分",
    "cookTime": "15分",
    "totalTime": "35分",
    "servings": 1,
    "calories": 180,
    "ingredients": [...],
    "steps": [...],
    "tips": [...]
  },
  ...
]

5. build-all.mts をカスタマイズ

ビルド対象に pizzaz-healthy を追加：

const targets = [
  "todo",
  "solar-system",
  "pizzaz",
  "pizzaz-carousel",
  "pizzaz-list",
  "pizzaz-albums",
  "pizzaz-shop",
  "pizzaz-healthy",   // ← ★これを追加
];

これにより、pizzaz-healthy/index.jsx が React ウィジェットとしてビルドされる。

6. server.ts に pizzaz-healthy ウィジェットを追加

openai-apps-sdk-examples/pizzaz_server_node/src 内のserver.tsにウィジェットを追加：

{
  id: "pizza-healthy",
  title: "Show Healthy Pizza",
  templateUri: "ui://widget/pizza-healthy.html",
  invoking: "Preparing healthy pizza plan",
  invoked: "Served a healthy recipe plan",
  html: `
    <div id="pizzaz-healthy-root"></div>
    <link rel="stylesheet" href="http://localhost:4444/assets/pizzaz-healthy-××××.css">
    <script type="module" src="http://localhost:4444/assets/pizzaz-healthy-××××.js"></script>
  `.trim(),
  responseText: "Rendered a healthy pizza recipe!"
}

××××はビルド時に要確認。

これで ChatGPT に「健康ピザレシピ」というウィジェットを認識させることができる。

7. 開発サーバーを起動してアセットを配信

ローカル開発サーバーを起動：

pnpm run dev

ローカルで以下が開けることを確認：

http://localhost:4444

ここに pizzaz-healthy.html も含めてアセットが一覧表示される。

8. ngrok で MCP サーバーを外部公開

ChatGPT は localhost に直接アクセスできないため、公開が必要：

ngrok http 8000

出力された以下のURLは次の章で使用：

Forwarding  https://xxxx.ngrok-free.app  -> http://localhost:8000

9. ChatGPT へ MCP サーバーを登録

「設定」 → 「アプリとコネクター」 → 「作成」 の順でアプリをMCPサーバーを登録する。

※開発者モードに切り替える必要あり。

また、「MCPサーバーのURL 」には、以下を登録：

https://xxxx.ngrok-free.app/mcp

※/mcpの付け忘れに注意

10. Chrome の Local Network Access Checks を無効化

React UI の CSS / JS を localhost:4444 から読み込むためには Chrome の設定が必要：

設定方法

1. アドレスバーに以下を入力：

chrome://flags/#local-network-access-check

2. Local Network Access Checks → Disabled
3. Chrome 再起動

この設定をしないと ChatGPT から localhost のアセットがブロックされる。

11. 動作確認

ChatGPT の入力欄に「pizza-healthy」と入力する。

すると……

✨ ChatGPT 内に React で作った「pizzaz-healthy」ウィジェットが出現！

12. おわりに

今回は Apps SDK を使って、ChatGPTに自作のReact UI（健康ピザレシピ）を実際に組み込むところまで試した。

pizzaz サンプルをベースにしつつ、自分のウィジェットを追加して動作させることで、ChatGPT をアプリの実行環境として拡張できることを強く実感できた。

ChatGPT 内にオリジナル UI が動く体験は非常に新鮮で、これからのアプリ開発の形が大きく変わっていく可能性がある。

Apps SDK の可能性を感じつつ、今後も最新の情報をキャッチアップしていこうと思う。