MCP Appsを作ってみよう

MCP Appsを作ってみよう @iwamot Agentic Tokyo #1, 2026-06-16

発表中にコメントぜひ

自己紹介岩本隆史 / @iwamot 某企業でAI系SaaSのSRE兼SWE 『［入門］LLMアプリ開発』（共著）

MCP Appsって？

MCP Apps = MCP + UI

ツールの結果をUIで表現 https://github.com/modelcontextprotocol/ext-apps > System Monitor App

LLMの出力をUIで表現 https://github.com/tubone24/preview-cloud-diagram-mcp-apps

MCP + UIのメリット複雑な情報をわかりやすく表現できる操作もできる（更新ボタンなど）使い回せる（つどのUI生成が不要）

実は、この発表もMCP Apps

MCPJam Inspectorで表示

ツールでコメントを取得

MCP Apps、どう作る？

おすすめの作り方 1. create-mcp-appスキルを導入 2. 作成を指示～サーバー起動 3. MCPJam Inspectorで確認

create-mcp-appスキルを導入 # Claude Codeプラグインでの導入例 /plugin marketplace add modelcontextprotocol/ext-apps /plugin install
mcp-apps@modelcontextprotocol-ext-apps # gh skillでの導入例 gh skill install \ modelcontextprotocol/ext-apps create-mcp-app

作成を指示～サーバー起動ランダムに犬の画像を表示するMCP App作って ↓（10分弱） MCP App を作成し、動作確認まで完了しました ↓
ポート3001で起動して

MCPJam Inspectorで確認 npx @mcpjam/inspector@latest

1つ作ったら、次は？

できることを増やそう対応クライアントで動かす仕様を眺め、未体験の機能を試す例：全画面表示、UIからチャットに発言

作れそう？

MCP Appsを作ってみよう！スキルで作成、MCPJam Inspectorで確認まずは1つ、10分で

MCP Appsを作ってみよう

MCP Appsを作ってみよう

iwamot PRO

More Decks by iwamot

Other Decks in Technology

Featured

Transcript