MCP Joke Button App

このプロジェクトは、1つのMCP App UI(単一のボタン)を公開する小さなMCPサーバーです。ボタンがクリックされると、アプリはホストにメッセージを送信し、アシスタントが短くて家族向けのジョークを1つ答えるよう要求します。

意図的にNode.jsの組み込みモジュールのみを使用しています。実行時のパッケージ依存関係はありません。

デモ内容

• MCPコアプロトコルバージョン 2026-07-28

• 単一エンドポイント /mcp でのステートレスStreamable HTTP

• server/discover、tools/list、tools/call、resources/list、resources/read

• _meta.ui.resourceUri を使用したMCP Apps UIリソースメタデータ

• サンドボックス対応の text/html;profile=mcp-app ウィジェット

• postMessage を介した ui/initialize と ui/message

Related MCP server: Jokes MCP Server

必要条件

nodejs.org からNode.js 20以降をインストールしてください。LTSダウンロードで問題ありません。

npm install を実行する必要はありません。このプロジェクトにはサードパーティのライブラリはありません。

サーバーの起動

このフォルダーでターミナルを開き、以下を実行します:

npm start

次のように表示されるはずです:

MCP Joke Button server listening on http://127.0.0.1:8787/mcp
Preview the widget shell at http://127.0.0.1:8787/preview

テスト中はそのターミナルを開いたままにしてください。

サーバー実行中、MCPリクエストはメソッドごとにログに記録されます。インタラクティブなアプリのレンダリングでは、ログに次のようなUIリソースの読み取り成功が含まれるはずです:

[mcp] request method=resources/read name=ui://joke-button/app.html
[mcp] response method=resources/read status=200

これらの開発ログを無効にするには、MCP_LOG_REQUESTS=false を設定してください。

Herokuへのデプロイ

joke-button Herokuアプリは次の場所にデプロイされています:

https://joke-button-31cddc4bc964.herokuapp.com

そのMCPエンドポイントは次のとおりです:

https://joke-button-31cddc4bc964.herokuapp.com/mcp

現在のブランチをデプロイするには:

git push heroku HEAD:main

クイックローカルチェック

ブラウザで次のアドレスを開いてください:

http://127.0.0.1:8787/preview

これはボタンの外観をプレビューするだけです。ボタンがChatGPTなどのMCP Apps互換ホスト内でレンダリングされた場合にのみ、AIにジョークを要求できます。

ChatGPT DesktopまたはChatGPT Webでの使用

開発中、ChatGPTはリモートMCPサーバー用のHTTPS URLを必要とします。npm start を実行したまま、ngrokやCloudflare Tunnelなどのトンネルツールでポート 8787 を公開してください。

ngrokの例:

ngrok http 8787

HTTPS転送URLをコピーし、末尾に /mcp を追加します。例:

https://example.ngrok.app/mcp

次にChatGPTで接続します:

1. ChatGPTを開きます。

2. 設定を開きます。

3. セキュリティとログインを開きます。

4. 開発者モードがまだ有効でない場合は有効にします。

5. プラグインを開きます。デスクトップアプリを使用していてサイドバーに表示されない場合は、同じアカウントでサインインした状態でブラウザで https://chatgpt.com/plugins を開きます。

6. プラスボタンを選択して、開発者MCPサーバー接続を追加します。

7. /mcp で終わるHTTPS URLを貼り付けます。

8. 名前を Joke Button にします。

9. 新しいチャットを開始し、Moreメニューからプラグインを選択して、Show the joke button. と尋ねます。

10. Tell a joke をクリックします。

このChatGPT UIテストでは、MCP servers という名前の設定は必要ありません。その設定はCodexのローカルMCPホスト構成用であり、ChatGPT開発者プラグイン接続を追加するためのものではありません。

開発者モードまたはプラスボタンがない場合は、デスクトップアプリが最新であることと、アカウントまたはワークスペースでプラグイン開発が許可されていることを確認してください。

アプリが機能している場合、ChatGPTはボタンのメッセージを受信し、短いジョークで応答するはずです。

ChatGPT DesktopアプリでのCodexとの使用

Codexは共有MCP設定からStreamable HTTP MCPサーバーに接続できます。

MCP servers 設定はCodex対応のローカルクライアントにのみ表示され、通常のChatGPTチャット設定ビューには表示されない場合があります。利用可能な場合:

1. npm start を実行したままにします。

2. ChatGPTデスクトップアプリを開きます。

3. 設定を開き、次にMCP serversを開きます。

4. Add serverを選択します。

5. Streamable HTTPを選択します。

6. サーバー名を joke_button にします。

7. 次のURLを使用します:

http://127.0.0.1:8787/mcp

8. 保存し、プロンプトが表示されたら再起動します。

9. Codexタスクで /mcp と入力して、サーバーが接続されていることを確認します。

10. Codexに Use the Joke Button MCP server. と依頼します。

Codex MCPツールサポートは、サーフェスによってはiframe UIをレンダリングせず、テキストのフォールバックを表示する場合があります。実際のワンボタンUIを使用するには、MCP Apps UIサポートのあるChatGPTを使用してください。

設定が表示されない場合は、codex-config.example.toml からサンプル構成を信頼できるプロジェクトの .codex/config.toml またはユーザーの ~/.codex/config.toml にコピーし、ChatGPTデスクトップアプリまたはCodexクライアントを再起動してください。

便利なURL

• ヘルスチェック: http://127.0.0.1:8787/health

• MCPエンドポイント: http://127.0.0.1:8787/mcp

• ウィジェットプレビュー: http://127.0.0.1:8787/preview

セキュリティに関する注意事項

サーバーは、2026-07-28 Streamable HTTPトランスポートで必要なMCPプロトコルバージョンとミラーリングされたMCPヘッダーを検証します。

ローカル開発では、Origin ヘッダーのないリクエスト、ループバックブラウザオリジン、一般的なOpenAIホストオリジンが受け入れられます。別のホストオリジンの場合は、次のコマンドでサーバーを起動します:

$env:MCP_ALLOWED_ORIGINS="https://your-host.example"
npm start

プライベートデータにアクセスしたりアクションを実行したりできる実際のMCPサーバーを公開する前に、認証を使用してください。このサンプルはどちらも行いません。

プロジェクトファイル

• server.js: 依存関係のないMCPサーバー

• public/joke-button.html: MCP App UIウィジェット

• codex-config.example.toml: Codex MCP構成のサンプル