🖼️

Apps in ChatGPT の Gallery を動かしてみる

MESON Tech Blog

2025/10/17に公開

 はじめにApps in ChatGPT とは、OpenAI が発表した新しい機能です。その名の通り、ChatGPT の中でアプリが使えるようになる機能です。
https://openai.com/ja-JP/index/introducing-apps-in-chatgpt/
今までも規定のアプリは使用できていました。例えば Google カレンダーとか。あるいは人によっては MCP を使って機能を接続して ChatGPT が適宜、それら機能を呼び出すという体験をしている人もいるでしょう。
今回はある意味、その機能をサードパーティ向けに拡張しつつ、ユーザ目線でもとても使いやすくしてくれた機能と考えることができます。MCP での機能追加と比べて大きく異なる点として、Apps SDK を使ったリッチな体験構築が可能という点です。

MCP のレスポンスの中に Widget と呼ばれるテンプレートを返すことで HTML / CSS / JS を使ったコンテンツを提供することができます。コンテンツは ChatGPT の会話の中に iframe として挿入され、その画面を通してユーザはインタラクティブなコンテンツとして体験することができます。
以下は、今回のアプリの実行結果です。

表示されているカルーセルはこちらで用意したコンテンツです。JavaScript も動作するのでインタラクティブなコンテンツを提供することができます。
これは言ってみれば ChatGPT がプラットフォームとなった新しいアプリ市場と見ることができるでしょう。
今回はそんな期待大なアプリ開発で、OpenAI が公開してくれているサンプルを動かしながらどんなことができるのかをまとめていきたいと思います。
ちなみに公開されているものをそのままやるだけだとうまく動かない点などもあったのでそのあたりも解説しつつ、自身の手で動かせる状態までをゴールに解説していきます。

 環境構築想定環境は以下です。
Node.js 18+
pnpm (recommended) or npm/yarn
もし pnpm がインストールされていない場合は以下のコマンドでインストールします。
npm install -g pnpm
まずは OpenAI のサンプルアプリのリポジトリをクローンします。
https://github.com/openai/openai-apps-sdk-examples
git clone https://github.com/openai/openai-apps-sdk-examples.git
クローンしたらサンプルアプリのフォルダに移動し、モジュールをインストールします。
cd openai-apps-sdk-examples
pnpm install

 アセットのビルドユーザに表示する HTML や JS などは事前にビルドしておく必要があります。
!リポジトリの README に書かれた手順のまま進めていくと、生成されるファイル名にハッシュが付与されてうまく動かなかったので build-all.mts ファイルの 151 行目あたりにある以下の部分をコメントアウトしておきます。
console.group("Hashing outputs");
for (const out of outputs) {
  const dir = path.dirname(out);
  const ext = path.extname(out);
  const base = path.basename(out, ext);
  const newName = path.join(dir, `${base}-${h}${ext}`);

  fs.renameSync(out, newName);
  console.log(`${out} -> ${newName}`);
}
console.groupEnd();
以下のコマンドでアセットを生成します。
pnpm run build
しばらく待つと assets フォルダ以下に HTML / CSS / JS ファイルが生成されます。
assets
├── pizzaz-2d2b.html
├── pizzaz-albums-2d2b.html
├── pizzaz-albums.css
├── pizzaz-albums.html
├── pizzaz-albums.js
├── pizzaz-albums.js.map
├── pizzaz-carousel-2d2b.html
├── pizzaz-carousel.css
├── pizzaz-carousel.html
├── pizzaz-carousel.js
.
.
└── todo.js.map

 スタティックアセットの提供README には以下のように「Previewしたいなら」というふうに書かれていますが、これは 実際にアプリを動かす際にも必要 な手順となります。
If you want to preview the generated bundles without the MCP servers, start the static file server after running a build:
以下のコマンドを実行し、スタティックアセットが localhost:4444 で読み込める状態にしておく必要がある、ということです。
pnpm run serve
起動後、http://localhost:4444 にアクセスするとファイル一覧を見ることができます。


!より厳密に言えば、生成されるアセット内の記述が localhost を指定しているためです。これを書き換えて、実際にホストする先に変更すればここのセクションは無視しても大丈夫です。
pizzaz-carousel.html
<!doctype html>
<html>
<head>
  <script type="module" src="http://localhost:4444/pizzaz-carousel.js"></script>
  <link rel="stylesheet" href="http://localhost:4444/pizzaz-carousel.css">
</head>
<body>
  <div id="pizzaz-carousel-root"></div>
</body>
</html>
なお、この URL の指定は build-all.mts に以下のように記述されているので、コマンド実行時に与えてやることで書き換えが可能です。
build-all.mts
const defaultBaseUrl = "http://localhost:4444";
const baseUrlCandidate = process.env.BASE_URL?.trim() ?? "";
const baseUrlRaw = baseUrlCandidate.length > 0 ? baseUrlCandidate : defaultBaseUrl;
ビルドコマンドを以下のように実行することでベース URL を変更することができます。
ベース URL を与える
BASE_URL=https://hoge.com pnpm run build
以上でアプリで利用するコンテンツの準備は完了です。

 MCP サーバを起動する次に MCP サーバを起動します。今回は Node.js 版を使うので pizzaz_server_node フォルダに移動してコマンドを実行します。
Pizzaz Node サーバを起動
cd pizzaz_server_node
pnpm start

 起動を確認する!以下の説明は MCP サーバが正常に起動しているか、内容がどんなものが提供されているかを確認するためのものです。そのためこのセクションはスキップしても大丈夫です。

ただ、このツールの利用方法を知っておくと他の MCP サーバの開発時にも役立つと思います。

 MCP 公式のインスペクタを起動する以下のコマンドを実行してインスペクタを起動します。インスペクタはブラウザベースのツールです。
インスペクタの起動
npx @modelcontextprotocol/inspector
起動に成功すると以下のようなログが表示され、自動的にブラウザで該当ツールが開きます。
起動ログ
Starting MCP inspector...
⚙️ Proxy server listening on localhost:6277
🔑 Session token: xxxxxxxxxxxxxxxxxxxxx
   Use this token to authenticate requests or set DANGEROUSLY_OMIT_AUTH=true to disable auth

🚀 MCP Inspector is up and running at:
   http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=xxxxxxxxxxxxxxxxxxxxx

🌐 Opening browser...
起動したら左ペインにある URL に、MCP サーバの URL を入力します。（なにもしていなければ localhost:8000 で起動しているはずです）

デフォルトでは http://localhost:8000/mcp と入力してください。
そして下にある「Connect」ボタンを押すことで MCP サーバに接続し、提供しているツールやリソースの情報を確認することができます。
MCP サーバの起動が確認できました。

 外部からアクセスできるように ngrok を利用する当然ですが、現在起動したサーバはローカルで立ち上がっているだけなので、ChatGPT からアクセスすることができません。ただ、開発時に外部サーバを用意して、というのは手間がかかりすぎるので ngrok という便利なサービスを使います。
無料で使えるのでアカウントを作成し、CLI ツールをインストールしてください。
https://ngrok.com/
ログインすると手順が示されるのでそれに従えばすぐに使えるようになります。ここにも一応手順を示しておきます。

 ngrok CLI ツールをインストールngrok のインストール
brew install ngrok
ツールがインストールされたら認証情報を設定します。以下のコマンドはダミーですが、ログインすると TOP 画面にコピペするだけでいいコマンド例が表示されているので、実際にはそちらを実行してください。
認証情報の設定
ngrok config add-authtoken xxxxxx_yyyyyy

 ngrok を起動設定が完了したら ngrok を起動します。このサービスは、指定したポートに対して外部からアクセスできる URL を付与してくれるものです。
ngrok の実行
ngrok http 8000
起動に成功すると以下のような画面になります。大事なのは Forwarding のところに書かれている ngrok ドメインの URL です。あとで使うのでメモしておきましょう。
矢印があることからも分かる通り、この URL にアクセスすると自動的にローカルのポートへリダイレクトしてくれるというわけです。
起動ログ
Session Status                online
Account                       hoge@example.com (Plan: Free)
Version                       3.30.0
Region                        Japan (jp)
Latency                       19ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://xxxx.ngrok-free.app -> http://localhost:8000

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

 ChatGPT 側でコネクトする準備が整いました。あとは今回起動したサービスを ChatGPT に接続するだけです。

 開発者モードをオンにする現状はまだプレビュー版のため、開発者モードをオンにする必要があります。以下の手順に従って設定してください。
左下のユーザ名をクリックして表示される「設定」から「アプリとコネクター」タブに行き、「高度な設定」を開きます。
そこで表示される「開発者モード（ベータ版）」を有効化します。

 アプリを登録する開発者モードをオンにすると「アプリとコネクター」タブ画面の右上に「作成する」ボタンが表示されるのでそれをクリックします。
そこで表示されるアプリ情報に、以下の情報を入力します。
アプリ名：Pizzaz
説明：Pizzazの情報取得
MCPサーバのURL： https://xxxx.ngrok-free.app/mcp（自身の環境の URL を入れてください）
認証：認証なし
I understand and want to continue のチェックをオン
入力したら「作成する」ボタンを押して登録します。
成功すると以下のような画面になります。

 アプリを使ってみる登録ができたら実際に使ってみましょう。基本的には ChatGPT が会話の中で必要と判断したら利用してくれるのですが、明示的に指定したほうがテストしやすいので指定して試してみます。
チャット欄の左側の「+」ボタンから Pizzaz ツールを選択します。
今回は「pizza-carousel」というツールを指定してカルーセル画面を呼び出してもらいます。
準備した画面が表示されました！　カルーセルの名の通り、左右にある矢印ボタンを押すことでスクロールさせることもできます。
JavaScript が動作するのでこうしたインタラクティブなコンテンツも提供できるのはとても嬉しいですね。

 最後にWeb サービスを展開している企業はすぐにでも対応したほうがいいでしょう。今後は Apple の App Store や Google の Google Play などと同様、大きなプラットフォームになることは想像に難くありません。Web サービスを展開していなくても、ChatGPT と会話しながら利用できるコンテンツなどは需要が出てきそうです。
今回は認証なしのアプリでしたが、認証させることでユーザ特有のデータにアクセスして利用することも可能になると思うのでますます AI と親和性の高いサービスを作っていく必要性が高まりますね。

 エンジニア絶賛募集中！MESONではUnityエンジニアを絶賛募集中です！ XR、空間コンピューティングのプロジェクトに関わってみたい！ 開発したい！ という方はぜひご応募ください！
MESONのメンバーページからご応募いただくか、TwitterのDMなどでご連絡ください。

 書いた人
比留間 和也（あだな：えど）
カヤック時代にWEBエンジニアとしてリーダーを務め、その後VRに出会いコロプラに転職。 コロプラでは仮想現実チームにてXRコンテンツ開発に携わる。 DAYDREAM向けゲーム「NYORO THE SNAKE & SEVEN ISLANDS」をリリース。その後、ARに惹かれてMESONに入社。 MESONではARエンジニアとして活躍中。

またプライベートでもAR/VRの開発をしており、インディー部門でTGSに出展など公私関わらずAR/VRコンテンツ制作に精を出す。プライベートな時間でも開発しているように、新しいことを学ぶことが趣味で、最近は英語を学んでいる。
GitHub / Twitter

 MESON WorksMESONの制作実績一覧もあります。ご興味ある方はぜひ見てみてください。
MESON Works