こんにちは、VポイントマーケティングAIエンジニアの三浦です。
先日ChatGPTやClaudeで動作するUI付きのアプリケーションが開発できるMCP Appsという仕組みについてご紹介しました。
この記事の後にもMCP Appsについて継続して調べていて、"ext-apps"というMCP Appsのデモアプリがまとめられたリポジトリも眺めたりしていました。
デモアプリの中で地図を表示させるものがあるのですが、この地図を表示できることを利用して何か自分でもアプリを作ってみたいな、と思いました。
考えてみた結果、ChatGPTで世界地図を見ながら世界中の国のことを知ることが出来る世界地図勉強アプリを作ってみることにしました。
世界地図勉強アプリ
ChatGPTの中で「地図の勉強をしたい」と発言すると、操作可能な世界地図を表示してくれます。
世界地図を眺めながら、「ここってどこの国なんだろう？」と気になった地点の国名や基本的な情報を調べることが出来ます。
その国の情報を詳しく知りたければそのままChatGPTに聞いて調べてもらうことが出来ます。
使ってみると意外と楽しくて、「地図のこのめっちゃギザギザしてるとこってこの国だったんだ！」とか「じゃあこの国の名物料理ってなんだろう？」みたいなことをたくさん知ることが出来ました。
ポイント
このアプリで特に大事なポイントはChatGPTとアプリの役割の切り分けです。以前Agent Skillsのベストプラクティスについて調べていた時に、「Claudeはすでに非常に賢い」というコア原則が書かれていたのを思い出し、念頭に置きました。
私も今は知らないことがあればChatGPTに教えてもらっています。Web検索機能も備わっているため、インターネットに公開されている情報であればかなり的確に情報を教えてくれると感じています。
この世界地図学習アプリのコンセプトは、「気になる国を見つけて、その国についてもっと詳しく調べる」が出来ることです。ユーザーが「気になる国」を世界地図を眺めながら見つけることが出来るようにすることがアプリの役目、そして「気になる国」について詳しく調べるのはChatGPTの役目にしたいと考えました。
- 気になる国を見つける仕組みを提供→アプリの役割
- 気になる国の詳細を調べる→ChatGPTの役割
開発の手順
仕様書の作成
今回の開発はOpenAIのCodex CLIを使って進めようと考えていました。作るアプリの仕様を固めてCodex CLIに出来るだけ正確に伝えるために、まずアプリの仕様書の作成に着手しました。
仕様書の作成にはChatGPTを利用しました。
# 世界地図で学ぶ地理学習 MCP App 仕様書 ## 1. 目的 学習者が世界地図を見ながら、気になった場所を調べて国に興味を持てる学習体験を提供する。 本アプリは OpenAI Apps SDK ベースの MCP App として実装する。MCP サーバーは主に「座標から国を特定すること」と「国の基本事実データを取得すること」を担い、やさしい説明文の生成は LLM 側で補助する。 ## 2. ゴール ### 必須ゴール - 世界地図を表示できること - 長押しで緯度経度を取得できること - 緯度経度から国名を特定できること - 国コードから国の基本情報を取得できること - 国名指定で地図上に該当国を表示できること - ChatGPT Apps として動作すること ### 体験ゴール - 地図を見ながら直感的に学習できること - 幅広い学習者が読みやすい情報量であること - 連続操作時も誤タップが起きにくいこと ## 3. 想定ユーザー - 主な対象: 地理に関心のある学習者 - 副次的対象: 保護者、教員 ## 4. MVP スコープ ### 含めるもの - 世界地図 UI 表示 - 長押しによる座標選択 - Reverse geocoding による国特定 ...
Codexに与えるインストラクションはプロジェクトフォルダのAGENTS.mdに含めることが出来ます。後ほど触れるように、MCP Appsをコーディングエージェントに開発させる時にはcreate-mcp-appというAgent Skillが有効で、このSkillを使って開発することをAGENTS.mdに明記しておきました。
# AGENTS.md ## プロジェクトの目的 このリポジトリは、世界地図を使って学習者が国に興味を持てる地理学習 MCP App を実装するためのものです。地図上の地点を長押しすると国を特定し、その国の基本事実データをもとに LLM がやさしく説明する体験を目指します。 ## 最重要方針 - まず MVP を完成させる - 事実データ取得と説明文生成の責務を分離する - UI と MCP サーバーの責務を分離する - 型安全性と JSON スキーマ定義を優先する - 学習者が理解しやすいことを常に意識する ## 実装ルール 1. 変更前に、これから何を実装するかを短く共有する 2. Agent Skill `create-mcp-app` を優先して使い、Apps SDK の標準的な構成に沿う 3. 過度な抽象化は避け、MVP に必要な範囲で疎結合に保つ 4. TypeScript の型エラーを残さない 5. ツール入力と出力の JSON スキーマを明示する 6. reverse geocoding と country profile の取得処理はサービス層に切り出す 7. 固定の食文化データベース前提で進めない 8. 国の事実データは API で取得し、説明は LLM に任せる 9. README は実装と同期して更新する 10. 文言は、やさしく、中立的で、断定しすぎない表現にする ...
create-mcp-appのインストール
MCP Appsのドキュメントにはコーディングエージェントを使ってMCP Appsを開発する方法としてcreate-mcp-appを使う方法が紹介されています。
私の今回の開発環境はCodexですが、その場合は以下のコマンドでSkillをインストールすることが出来ます。
npx skills add modelcontextprotocol/ext-apps
Codexに開発指示を出す直前のプロジェクトの構成は以下のようになりました。
geo-learning-mcp-app/ ├─ .agents/ │ └─ skills/ │ └─ create-mcp-app/ # Agent Skills ├─ docs/ │ └─ spec.md # 設計・仕様ドキュメント └─ AGENTS.md # カスタムインストラクション
あとはdocs/spec.mdの内容を元に開発を開始するよう指示を出して、開発を開始しました。
アプリをChatGPTからアクセスさせる方法は以前の記事にngrokを使った方法を紹介していますのでそちらを参考ください。
作ってみて感じたこと
開発自体は仕様書を作ってしまえばcreate-mcp-appSkillでさくっと進めることが出来ました。もちろん本番運用を考えると認証周りをちゃんと考えるなど、やるべきことはたくさんあると思います。
ChatGPTやClaude,Geminiなど最近のチャットエージェントはとても高性能です。これらの性能を活用しながら各プレイヤーが持っている独自のデータやサービスをどうやってユーザーに提供していくのかをデザインしていくのも今後の開発で必要なのかも、と感じました。
まとめ
ということで今回はMCP AppsでChatGPTで動作する世界地図勉強アプリを作ってみた話をご紹介しました。今度は架空のショッピングサイトなども作ってみたいな、と思いました。
