MCP Appsを作ってみよう

2026-06-16
Agentic Tokyo #1
https://aibuilders.connpass.com/event/394175/

Transcript

1. MCP Appsを作ってみよう @iwamot Agentic Tokyo #1, 2026-06-16
2. 発表中にコメントぜひ
3. 自己紹介 岩本 隆史 / @iwamot 某企業でAI系SaaSのSRE兼SWE 『 ［入門］LLMアプリ開発』 （共著）
4. MCP Appsって？
5. MCP Apps = MCP + UI
6. ツールの結果をUIで表現 https://github.com/modelcontextprotocol/ext-apps > System Monitor App
7. LLMの出力をUIで表現 https://github.com/tubone24/preview-cloud-diagram-mcp-apps
8. MCP + UIのメリット 複雑な情報をわかりやすく表現できる 操作もできる（更新ボタンなど） 使い回せる（つどのUI生成が不要）
9. 実は、この発表もMCP Apps
10. MCPJam Inspectorで表示
11. ツールでコメントを取得
12. MCP Apps、どう作る？
13. おすすめの作り方 1. create-mcp-appスキルを導入 2. 作成を指示 ～ サーバー起動 3. MCPJam Inspectorで確認
14. 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
15. 作成を指示 ～ サーバー起動 ランダムに犬の画像を表示するMCP App作って ↓（10分弱） MCP App を作成し、動作確認まで完了しました ↓ ポート3001で起動して
16. MCPJam Inspectorで確認 npx @mcpjam/inspector@latest
17. 1つ作ったら、次は？
18. できることを増やそう 対応クライアントで動かす 仕様を眺め、未体験の機能を試す 例：全画面表示、UIからチャットに発言
19. 作れそう？
20. MCP Appsを作ってみよう！ スキルで作成、MCPJam Inspectorで確認 まずは1つ、10分で