はじめに
こちらの登壇で、MCP Apps が凄く良さそうだったので早速触ってみました。
Claude Code の MCP App を作るスキル（create-mcp-app） で、「いい感じの MCP App 作って」とほぼ丸投げしてみました。出てきたのは、データを表とグラフで見せて、検索・並べ替えができて、ボタンで保存もできる小さなダッシュボードです。
この記事は「自分で一から作成した」話ではなく、頼んだら何ができて、どう作られたかの記録です。非エンジニアの方でも、流れとイメージだけ掴んでいただければと思います。
まだ開発中で場所を移動する可能性もあり、ローカル版ですがコードは以下にあります。
MCP App とは
ふだん AI チャットのツールは「文字で答える」だけです。MCP App を使うと、チャットの中に“触れる画面”が出てくるようになります。
ひとことで言うと、チャットの返事が「読むもの」から「使うもの」に変わる、という感じで、画面の中のボタンを押すと裏でサーバーが動いて、データを保存したり、さらに別のツールを呼び出したりすることもできます。
何ができたか
頼んでできたダッシュボードは、こんな画面です。
- 値の大きさで伸びる 棒グラフ と、件数・合計・平均などの集計
- ラベル検索 と 並べ替え、カテゴリの表示オン/オフ
- 保存形式（JSON / CSV / HTML）を選んで、ボタンひとつでファイルに保存
この UI 自体は GitHub Copilot Chat からの画面です。
どうやって作ったか
やったことは、ほぼ「プラグインを入れて」「お願いして」「動かしてちょっと修正して動かして確認した」だけです。
Claude Code のプラグインマーケットプレイスで modelcontextprotocol/ext-app を追加して、mcp-apps プラグインをインストールして、この中にあるスキルを使います。というか使われるだけです。
/plugin marketplace add modelcontextprotocol/ext-app
/plugin install mcp-apps@mcp-apps
/reload-plugins
あとは「いい感じの MCP App 作って」と頼むだけ。スキルが題材の候補（ダッシュボード／タイマー等）を出してくれたのでダッシュボードを選ぶと、サンプルを下敷きにコード一式を生成し、必要なものの導入から動作確認までやってくれました。
MCP App の仕組み
MCP App の中身は、「データを返す係（ツール）」と「画面を出す係（UI）」のセットです。AI がツールを呼ぶと、ホスト（Claude Desktop や GitHub Copilot Chat など）が画面を表示してデータを流し込みます。
ポイントは、画面の中身（HTML）は AI の頭（コンテキスト）を通らないこと。なので画面そのものは何度使ってもやり取りされるのは「データ」だけです。
ボタンひとつでサーバーが動くのが肝
検索や並べ替えは画面の中だけで完結する操作です。これだけなら AI に HTML を作らせても似たことはできるかと思います。 MCP App が本当に効くのは、画面のボタンが裏のサーバーを動かすところです。今回は「保存」ボタンがそれにあたります。
今回は単なるローカル保存にしていますが、保存形式は 3 つ用意されていて、用途に合わせて選べるようにしています。
| 形式 | 何から作る | 用途 |
|---|---|---|
| JSON | データそのもの | あとで読み込み・加工する |
| CSV | データを表に変換 | Excel などで開く |
| HTML | 画面の見た目を写し取る | ブラウザで開いて共有する |
普通のツール・AI 生成 HTML・MCP App の棲み分け
「文字で足りる → 普通のツール」
「一度見せるだけ → AI 生成 HTML」
「触らせたい・操作が裏で動く → MCP App」
といったところでしょうか。
まとめ
-
mcp-appsプラグインのcreate-mcp-appスキルを使えば、簡単に誰でも始められる - MCP App は「データを返すツール ＋ 画面を出す UI」のセット
- 画面は AI のコンテキスト外なので、トークンを増やさない