CodeGym /コース /ChatGPT Apps /Dev Mode と ChatGPT:...

Dev Mode と ChatGPT: ローカルアプリを接続する

ChatGPT Apps

レベル 2 , レッスン 3

使用可能

1. Developer Mode を「実務的に」理解する

Dev Mode については少し触れましたが、ここでは実践に基づいた全体像をしっかり掴むことが大切です。

ChatGPT の Developer Mode は、プラットフォームがあなたのアプリを Store 公開なしに直接接続できる特別なモードです。あなたが ChatGPT に「これが私の MCP サーバーの URL です」と伝えると、ChatGPT はそれを UI を持つ外部ツールとして扱い、ツールを呼び出したりウィジェットを読み込んだりできます—しかも通常のチャットの流れの中で行われます。

アーキテクチャの観点では、Dev Mode では ChatGPT が MCP クライアント、あなたの Next.js テンプレートが MCP サーバーとして振る舞います。ChatGPT は /mcp に接続し、「何ができるの？」（tools と resources の一覧）を問い合わせ、以降の対話の中でそれらのツールを呼び出し、あなたのウィジェットを iframe に表示できます。

Dev Mode と Store を区別するのが重要です:

Dev Mode — あなた専用の小さな「ガレージ」。壊しても実験しても、ツールのスキーマを5分おきに変えても OK。ユーザーのことを気にする必要はありません。
Store — ショーケース。レビューを通り、ポリシーや説明を整えた安定版が載ります。コースの最後にここを目指しますが、今はガレージで遊びます。

2025 年末時点で、Apps SDK を伴う Dev Mode は ChatGPT のすべてのプランで利用できますが、エンタープライズアカウントでは管理者がワークスペース単位で有効化する必要がある場合があります。設定に Developer Mode のトグルが見当たらない場合、まずここを確認してください。

2. 講義開始時点で既に用意できているもの

ChatGPT の UI で操作する前に、ローカル側の準備が整っているか確認します。

まずは Next.js の dev サーバー。プロジェクトのルートで以下を起動しましたね:

npm run dev

デフォルトで Next.js 16 はポート 3000 を待ち受けます。つまり UI は http://localhost:3000 でアクセス可能です。

次に MCP ルート。CodeGym Labs のテンプレートでは、MCP サーバーは route-handler の app/mcp/route.ts として実装されています。ちょうどこのファイルでツールとリソースを登録します。Dev Mode でアプリを接続するとき、ChatGPT からの最初のリクエストもここに届きます。

アーキテクチャ的には現状は次のようになっています:

あなたのブラウザ ──> http://localhost:3000 (Next.js dev, UI)
                           │
                           └── /mcp (Next.js 内の MCP サーバー)

現時点では ChatGPT との接続はありません—ChatGPT はクラウド上で動作し、あなたの localhost は見えません。トンネル設定の詳細は次回講義のテーマです。ここでは簡単のため、すでに /mcp へ到達できる公開の HTTPS URL（たとえば ngrok や Cloudflare Tunnel をテンプレートの README に沿って設定）があると仮定します。

まだトンネルを立ち上げていなくても問題ありません。ここでは Dev Mode の一連の流れを俯瞰し、HTTPS URL が用意できたら何をすべきかを理解することが目的です。

すでに /mcp の HTTPS URL があるなら、以下の手順をそのまま手で再現してください。
まだなければ、「インターフェイスの見学ツアー」として読み進めてください。手順の鎖を理解するのが大切で、実際の起動はトンネルを設定する次回に行います。

3. インターフェイスで ChatGPT の Developer Mode を有効化

最初のステップは、ChatGPT に必要な設定を表示させることです。次を行ってください。

開発に使うアカウントで ChatGPT の Web 版にログインします。左下（または右上—UI は継続的に変化します）のプロフィールアイコンをクリックし、Settings（設定）を選びます。

設定の中でアプリ関連のセクション、通常は Apps & Connectors または Connected apps と名付けられた項目を探して開きます。ページの下部（または Advanced / 詳細設定タブ）に Developer Mode のトグルが表示されます。これを有効にします。

Dev Mode を有効化すると、ChatGPT は通常、開発者モードがオンになった旨の通知を出します。同じセクションに Create、Create connector、New app といったボタンが現れます—表現は多少変わっても意味は同じで、自分の接続アプリを作成できるようになります。

設定に Apps & Connectors も Developer Mode のトグルも見当たらない場合は次を確認してください:

開発に使う予定の ChatGPT アカウントで正しくログインしていること;
企業アカウントでは、このモードはワークスペース管理者によって有効化されることがあること。

単に一度サインアウトして再ログインするだけで解決することもあります（Dev Mode 版「ネットをつなぎ直してみて」）。

4. アプリ／コネクタを作成し、MCP URL を指定する

Dev Mode が有効になったら、ChatGPT にあなたの GiftGenius を登録しましょう。以下は「実際にやるときの流れ」です。まだ HTTPS URL が準備できていない場合は、先取りの見学として読み、トンネルが用意できたら実際に手を動かしてください。

操作はすべて、先ほど開いた ChatGPT の設定セクションから行います。おおよその手順は次のとおりです。

再び Settings → Apps & Connectors を開きます。中に、すでに接続済みのアプリ一覧（おそらくまだ空）と、Create / Add connector といったボタンが見えます。これをクリックすると、アプリ作成フォームが開きます。

フォームは通常、3 つの主要項目から成ります:

名前 (Name)。あなたと ChatGPT の双方に見える、人間が読める名前です。本講義では GiftGenius (dev) のように付けると、ローカルの開発版であることが一目でわかって便利です。
説明 (Description)。アプリが何をし、どんな時に使うべきかを簡潔に説明します。例: 「人の興味に基づいてギフトのアイデアを提案します」。この一文は後のディスカバリに影響します—モデルはこれを使って、チャット内でいつあなたの App を提案するかを判断します。
MCP サーバーの URL（Connector URL、MCP endpoint、App URL などと表記されることも）。ここが最重要です。/mcp に到達する公開の HTTPS URL を貼り付けます。

例:

https://my-giftgenius-dev.ngrok.app/mcp

または

https://giftgenius-dev.trycloudflare.com/mcp

このフィールドの要点:

必ず https:// を使うこと。そうでないと ChatGPT は接続を拒否します;
必ず末尾に /mcp のパスを付けること。テンプレート内の MCP サーバーはそこに存在し、Apps SDK の公式ドキュメントでもそのパスが記載されています。

この URL の取得方法（トンネル、Cloudflare、ngrok）は次回詳しく説明します。ここで重要なのは考え方です。ローカルの http://localhost:3000/mcp を、何らかの方法で公開の https://…/mcp に変換し、その公開アドレスをフォームに貼り付ける、ということです。

項目を入力したら Create / 保存を押します。この瞬間、ChatGPT はあなたのサーバーと「ハンドシェイク」を行います。指定した URL に HTTP リクエストを送り、機能のマニフェスト（tools/resources の一覧、メタデータ）を受け取り、サーバーが MCP プロトコルで応答することを確認します。問題なければコネクタが一覧に現れ、ChatGPT が検出したツールが見えるようになります。次の章で、このハンドシェイクで具体的に何が起こっているのか、そしてログでどう確認するかを見ていきます。

まだトンネルを用意しておらず、ダミーの URL を入れた場合は、ChatGPT はサーバーに到達できなかった旨を正直に教えてくれます。これも有益な経験です—どこでエラーが表示されるかを把握できます。

5. 「裏側」で起きていること: MCP ハンドシェイクを直感的に

外から見ると「URL でアプリを追加する」だけに見えますが、中身は少し面白く、今理解しておくと後のデバッグが楽になります。

コネクタ作成時、ChatGPT はあなたの /mcp にアクセスしてマニフェストを期待します。ここを少し掘り下げましょう—デバッグで大きく役立ちます。

Create ボタンを押すと、ChatGPT はいくつかのステップを踏みます。

まず指定した /mcp 付きの URL に、MCP クライアントとしてアクセスします。MCP プロトコルでは、該当 HTTP エンドポイントに、基本機能を実装したサーバーがいることを期待します。すなわち、ツールの列挙（list tools）、リソース（ウィジェット）の提供、ツール呼び出しの処理です。

サーバーはそれに対し、次のような内容の JSON 構造で応答します:

サーバー名とバージョン;
ツール一覧: name、title、description、inputSchema など;
リソース一覧: ウィジェットの HTML の取得場所、MIME タイプ、レンダリング方法。

CodeGym の Next.js テンプレートでは、これらはすでに app/mcp/route.ts に実装済みです。SDK を使って server.registerTool(...) や server.registerResource(...) のように登録します。

このハンドシェイクを実際に見てみたいなら、app/mcp/route.ts に簡単なログを足せます。これはより開発者向けのデバッグ小技なので、今は読み飛ばして、深掘りしたくなったときに戻ってきても構いません:

// app/mcp/route.ts
import { NextRequest, NextResponse } from "next/server";
// 既存の server / buildManifest をインポートする

export async function GET(req: NextRequest) {
  console.log("[MCP] Handshake from ChatGPT:", req.headers.get("user-agent"));
  const manifest = buildManifestSomehow(); // これはテンプレートにすでに用意されています
  return NextResponse.json(manifest);
}

この関数はやや擬似的です（テンプレートの構成は異なる場合があります）が、要点は単純です。app/mcp/route.ts は通常の Next.js の route-handler なので、受信リクエストをログに出せます。Dev Mode の接続が成功すると、npm run dev を動かしているターミナルにこのログが出るはずです。

プロトコルの観点では、小さなダイアグラムで描くと次のようになります:

sequenceDiagram
    participant ChatGPT
    participant Tunnel as HTTPS URL (/mcp)
    participant NextDev as Next.js dev + MCP

    ChatGPT->>Tunnel: HTTPS リクエスト https://.../mcp
    Tunnel->>NextDev: http://localhost:3000/mcp にプロキシ
    NextDev-->>Tunnel: ツールとリソースの JSON
    Tunnel-->>ChatGPT: 応答をリレー
    ChatGPT->>ChatGPT: tools/resources のリストをキャッシュ

Dev Mode のフォームに入力した「ただの URL」が、実際にはプロトコル上の会話を起動しているわけです。

6. 接続後に ChatGPT からアプリがどう見えるか

ハンドシェイクが無事に終わったとしましょう。その後はどうなるでしょうか。

まず、設定の Apps & Connectors セクションで、GiftGenius (dev) が接続済みアプリ一覧に現れます。カード内には、名前・説明・検出されたツール一覧が表示され、Refresh、Delete といったボタンもあるはずです。ツールスキーマを変更した際には Refresh を使います。

次に、チャット内でそのアプリが使えるようになります。新しいチャットを開き、入力欄の横にある「+」を押します。UI のバージョンにより「More」「Apps」「Tools」といったメニューがあります。あなたの GiftGenius (dev) がリストに現れ、当該会話用に明示的に選択できます。

選択すると、そのチャットに「接続」されます。体感としては次のようになります:

自然文でリクエストを書きます。例: 「宇宙が好きなファン向けに 50$ の予算でギフトを選んで」;
ChatGPT は（説明や会話履歴に基づいて）GiftGenius を使えると判断し、あなたの MCP ツールの一つを呼び出します;
その結果に HTML ウィジェットが含まれていれば、チャット内にカード／パネルとしてレンダリングされます。

Dev Mode では、まずはメニューから明示的にアプリを選ぶ、あるいは名前を明示して呼ぶ、という使い方をすることが多いでしょう。ただし本番では、ChatGPT が説明やツールのメタデータを踏まえて自発的にあなたの App を提案することがあります。

イメージを掴むために、次の表も参考にしてください:

今どこにいるか	何が見えるか	何を意味するか
Settings	アプリ一覧に GiftGenius (dev)	コネクタが作成され、MCP が稼働中
Chat → “+”	Apps/Tools の一覧に GiftGenius (dev)	現在のチャットに接続できる
対話	テキスト + GiftGenius のウィジェット／カード	MCP 経由でツール呼び出しが行われた

7. 開発サイクル: コードを直す → ChatGPT に反映させる

App を接続できたら半分達成です。残り半分は、日常の開発で Dev Mode とどう付き合うかを理解することです。

大きく 2 種類の変更があります。UI（ウィジェット）の変更と、MCP ロジック／ツールの変更です。

UI だけを変更する場合、例えば app/page.tsx の見出しやスタイルを直すだけなら、Next.js にとっては普通のフロントエンド開発です。dev サーバーがモジュールをリロードし、ブラウザではホットリロードが効きます。ChatGPT では UI が iframe に読み込まれますが、挙動は似ています。そのウィジェットをレンダリングするツールを次に呼び出す時点で、ChatGPT は更新後の HTML を読み込みます。HMR が iframe に直接届くこともありますし、チャットでツールをもう一度呼び出すだけで十分なこともあります。キャッシュ

試しにウィジェットを少し変更してみましょう。例えば app/page.tsx に次のようなコードがあるとします:

export default function GiftGeniusWidget() {
  return (
    <main style={{ padding: 16 }}>
      <h1>GiftGenius</h1>
      <p>ここにギフト候補の提案が表示されます。</p>
    </main>
  );
}

見出しとテキストを変更してみます:

export default function GiftGeniusWidget() {
  return (
    <main style={{ padding: 16 }}>
      <h1>GiftGenius (dev)</h1>
      <p>このバージョンは Dev Mode 上で動作します。プロダクション用途ではありません。</p>
    </main>
  );
}

ファイルを保存し、GiftGenius を接続したチャットに戻って、もう一度アプリを呼び出します（たとえば同じギフトのリクエストを送る）。ウィジェット内の見出しが更新されていれば、Next.js → トンネル → ChatGPT の連携が正常である良いサインです。

一方で、MCP 側を変更する—新しいツールの追加、inputSchema のスキーマ変更、ツール名の変更—といった場合は、ChatGPT のキャッシュが関わってきます。Dev Mode の初回接続時、ChatGPT はツール一覧を記憶し、変更を自動で拾わないことがあります。そのときは Apps & Connectors セクションに戻り、GiftGenius (dev) を選んで Refresh schema / Refresh を押してください。これで ChatGPT が再び /mcp を問い合わせ、ツール一覧を更新します。

些細なことに見えますが、これを忘れると「コードは直したのに ChatGPT が新しいパラメータを認識しない」という状況に陥りがちです。

8. ミニ実践: Dev Mode での GiftGenius 初シナリオ

ここまでを 1 つの実践シナリオにまとめましょう。ここでは /mcp に対する何らかの公開 HTTPS URL（トンネルまたはデプロイ）があると仮定します。まだなければ読み物として進め、次回実際の URL を用意したときに手順を再現してください。

npm run dev が動作しており、ログにエラーが出ていないことを確認します。テンプレートがログ出力する場合は、ターミナルに「MCP server running at http://localhost:3000/mcp」のような表示が出ていると気持ちが良いですね。
ChatGPT を開き、Settings → Apps & Connectors → Advanced settings から Developer Mode を有効にします。
新しいコネクタ GiftGenius (dev) を作成し、短い説明（「Helper for choosing gifts」）と https://<your-domain>/mcp 形式の URL を指定します。
ChatGPT が接続できたことを確認します。アプリ一覧に新しい項目が見えます。接続できない場合は dev サーバーとトンネルのログを確認しましょう。これ自体が学びになります。
新しいチャットを開き、「+」を押して、あなたの GiftGenius (dev) を選び、次のようにリクエストします。「開発者向けで、宇宙とコーヒーが好きな人へのギフトを、予算 40$ で提案して」。
現在のテンプレートが何をするかを観察します。初期状態ではシンプルなカード／ウィジェットを表示するだけかもしれません。まだ「賢いギフト選定」ではなくても、あなたのコード由来の何かがチャットに現れた時点で大きな一歩です。

追加の練習として、Dev Mode の確認専用のテストツールを MCP サーバーに用意してもよいでしょう。例（今すぐ実装は不要。アイデアを眺めるだけで OK）:

// app/mcp/route.ts の中、他の tools と並べて
server.registerTool(
  "ping_dev",
  {
    title: "Ping GiftGenius dev",
    description: "Dev サーバーが稼働しているかを確認します。",
    inputSchema: { type: "object", properties: {} },
  },
  async () => ({
    content: [{ type: "text", text: "GiftGenius dev is alive ✅" }],
    structuredContent: {},
  })
);

server.registerTool の詳細はツールのモジュールで扱います。今は、MCP で「あなたの App が何をできるか」を記述し、Dev Mode は ChatGPT にそれらの能力が定義されている URL を教えるための仕組みだ、という理解で十分です。

9. どこでエラーを見るか、そして「自分側の問題」か「ChatGPT 側の問題」かを見分ける方法

誰だって「反対側の不具合」を 30 分も探し回るのは避けたいもの。最初から正しい場所を見る習慣をつけましょう。

コネクタ作成時にエラーが出る場合。コネクタ作成時に ChatGPT が App を接続できないと表示する場合、まずはあなたの dev サーバーとトンネルのログを確認します。npm run dev を実行しているターミナルに、/mcp への受信リクエストが全く来ていないなら、問題は ChatGPT → トンネルの経路にあります。リクエストは来ているのにサーバーが 500 を返す、またはコンソールで例外が出るなら、MCP コード側の問題です。

コネクタ作成後、チャット中で壊れる場合。コネクタが作成済みで、チャット中に「App unavailable / App broken」のバナーが時折出るのは、たいてい次のいずれかです:

dev サーバーが落ちている（Next.js がポート 3000 を listen していない）;
トンネルが止まっている、または URL が変わった;
MCP エンドポイントがエラー、タイムアウト、もしくは非常に遅い。

UI／ウィジェットについて。 UI の問題（ウィジェットが描画されない、真っ白、スタイルが崩れる）では、ブラウザの DevTools も参照してください。ウィジェットは iframe に読み込まれるため、その iframe のコンソールには通常の Web アプリと同様に JavaScript/React のエラーが表示されます。

慣れてくると、エラーの見た目だけで「トンネルの匂い」か「Next.js の匂い」かを嗅ぎ分けられるようになります。今のところは、潜在的な故障点が 3 つ—あなたのコード、トンネル、そして ChatGPT—であり、ChatGPT 側に問題がある確率は通常もっとも低い、ということを覚えておけば十分です。

Insight

この文章を読んでいて、有料のトンネルをまだ契約していないなら、今すぐ購入してしまって構いません。遅かれ早かれ、数日以内にそうすることになるでしょう。先に済ませて、無用なストレスを減らしましょう。

10. Dev Mode でよくあるミス

ミス №1: Developer Mode を有効にし忘れ、Create ボタンを延々探す。
開発者が ChatGPT を開いて Apps & Connectors の設定に入っても、何も見つからないことがあります。Developer Mode を有効にしていないと、コネクタ作成のボタン自体が表示されないことがあります。特に新しいアカウントや別ブラウザでは、まず Advanced settings で Dev Mode がオンか確認するのを習慣にしましょう。

ミス №2: /mcp のない URL、または MCP エンドポイントですらない URL を貼る。
定番の誤りです。URL に /mcp のパスを付け忘れて https://myapp-dev.ngrok.app のように入れてしまう、あるいはランディングページ／別サービスの URL を入れてしまう。ChatGPT は丁寧に MCP プロトコルでそこにアクセスしますが、期待するインターフェイスが見つからず接続エラーになります。Next.js スターターのテンプレートは、「/mcp に対して接続する」ことを明示しています。Dev Mode でも必ずそれを指定してください。

ミス №3: http://localhost:3000/mcp をそのまま使おうとする。
dev サーバーのログに見える http://localhost:3000/mcp を、そのまま URL フィールドに入れたくなるものです。しかし ChatGPT はクラウド上で動作しており、あなたの localhost にはアクセスできません。さらに ChatGPT は HTTPS を要求します。したがって、トンネルやリモートデプロイなしには動きません。これは ChatGPT のバグではなく、通常のネットワーク分離です。

ミス №4: MCP スキーマ変更後の Refresh を忘れる。
初回のハンドシェイク後、ChatGPT はツール一覧やメタデータをキャッシュし、毎回サーバーに問い合わせないようにします。新しい tool を追加したり inputSchema を変更したのに、ChatGPT が昔の挙動のままなら、ほぼ確実に Apps & Connectors でのコネクタの Refresh が必要です。これをしないと、モデルは変更を知り得ません。

ミス №5: dev サーバーが動いていないのに Dev Mode をデバッグしようとする。
当たり前に聞こえますが、よく起きます。ターミナルで npm run dev が動いていない、あるいは構文エラーでプロジェクトがビルドされていないのに、Dev Mode とトンネルの設定に時間を費やしてしまうケースです。ローカルの dev サーバーが止まっている間は、Dev Mode のエラーを追いかけても意味がありません。まずは http://localhost:3000 があなたのブラウザで動く状態にし、その後で ChatGPT を接続してください。

ミス №6: Dev Mode が「すべてを理解する別のモデル」だと思い込む。
Dev Mode をオンにしたからといって、モデルがあなたのアプリのすべてを「知っている」わけではありません。Dev Mode はモデル自体を変えるのではなく、あなたの MCP サーバーとツールにアクセスさせるだけです。ツールの記述が曖昧だったり、App の説明が不鮮明だったり、サーバーのロジックが奇妙なら、モデルもまた、ドキュメントが不十分な API を開いた開発者と同じように混乱します。良いメタデータとツール設計は次のモジュールのテーマですが、今から意識しておきましょう。

ミス №7: Dev Mode をプロダクションの代わりに使う。
「Dev Mode で十分動くし、この URL をユーザーにも渡そう」となりがちです。しかし、Dev Mode は大規模利用向けではありません。トンネルは不安定で、設定は壊れやすく、ChatGPT 自体も Dev Mode の挙動を後方互換なしに変更する可能性があります。実際のユーザーには Store と本番デプロイがあります。Dev Mode はあくまであなたの実験室です。

前へ前のレッスン

次へ次のレッスン

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION