MCP Appsを作ってみよう

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分で