はじめに
前回の記事
で紹介したApps SDKを使用してChatGPTでサンプルを実行してみました。
ローカルでサンプルを実行する
ローカルでcloneして
cd openai-apps-sdk-examples
ビルドファイルを作成する
pnpm install
pnpm run build
コードではCDNを使用しているため上記ビルドファイルを使用する場合はassers/以下のファイルを指定してあげる必要がある。（今回は動作確認が目的のためCDNのまま実行する）
今回はローカルでなくDockerでローカルサーバーを起動します。（ローカルでの手順はReadmeを参考にして下さい）
touch docker-compose.yml
cd pizzaz_server_node
touch Dockerfile
pizzaz_server_nodeを使用します。
services:
pizzaz-node:
build:
context: .
dockerfile: pizzaz_server_node/Dockerfile
environment:
- PORT=8000
ports:
- "8000:8000"
FROM node:20-alpine
WORKDIR /app
COPY pizzaz_server_node/package.json ./package.json
COPY pizzaz_server_node/tsconfig.json ./tsconfig.json
RUN corepack enable && npm install
COPY pizzaz_server_node/src ./src
ENV PORT=8000
EXPOSE 8000
CMD ["npm", "start"]
dockerをビルドして起動
docker compose build pizzaz-node
docker compose up -d pizzaz-node
Readmeにも記載がありますがngrokを使用してローカルサーバーをインターネットに公開します。
ngrokについては上記事に詳しく記載あります。ngrokサイトでユーザー登録して使用できるようにして下さい。
ngrok http 8000
を実行してローカルサーバのポートへ外部からアクセスできるようにします。
ChatGPTで開発者モードでアプリ登録する
設定 ＞ アプリとコネクター ＞ 高度な設定
から開発者モードをONにして下さい
アプリコネスター 作成するを押下して
アプリ名とMCPサーバーのURL（ローカルでngrok実行後に表示されるURL）、認証はなしで大丈夫です。
作成すると
アプリ一覧に先ほど登録したアプリが表示されます。
ローカルのngrokを実行しているコンソールでアプリからのアクセスがあることを確認できるはずです。
ChatGPTでアプリを実行してみる
ChatGPTの入力欄の＋を押すと
先ほど追加したアプリが表示されるので選択します
これでアプリ使用可能状態となりチャット内容から検索できるようになります
pizza-map と入力する
許可を求めるダイアログが表示されるので確認するを押します
設定されているMapとPizzaのロケーションデータが表示されます。
pizza-list と入力する
リスト表示のUIが表示されました。
まとめ
今回はnode版を使用しましたが、Python版もサンプルがあるのでPythonで試してみたい方はそちらを使用してみて下さい。
ngrokを使用して簡単にサンプル実行できました。
通信はMCP経由で初回はモデルから呼ばれ、ボタン押下時もwindow.openai.callTool()を実行し、安全に通信できるようです。
次はサンプルコードを参考に自分のアプリを実装して実行してみようと思います。