Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MCP Appsを作ってみよう
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
iwamot
PRO
June 16, 2026
Technology
83
3
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
MCP Appsを作ってみよう
2026-06-16
Agentic Tokyo #1
https://aibuilders.connpass.com/event/394175/
iwamot
PRO
June 16, 2026
More Decks by iwamot
See All by iwamot
自己紹介
iwamot
PRO
1
64
パワポ作るマンをMCP Apps化してみた
iwamot
PRO
0
480
8万デプロイ
iwamot
PRO
2
360
AIエージェント・マイクロサービス時代。AWSでの手軽な構築法を考えて試してみた
iwamot
PRO
1
100
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
10
2.7k
Developer Certificate of Origin、よさそう
iwamot
PRO
0
94
復号できなくなると怖いので、AWS KMSキーの削除を「面倒」にしてみた CODT 2025 クロージングイベント版
iwamot
PRO
1
200
復号できなくなると怖いので、AWS KMSキーの削除を「面倒」にしてみた
iwamot
PRO
3
160
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
14
12k
Other Decks in Technology
See All in Technology
OCI Oracle AI Database Services新機能アップデート(2026/03-2026/05)
oracle4engineer
PRO
0
290
protovalidate-es を導入してみた
bengo4com
0
150
Socrates × Looker 〜セマンティックレイヤーで進化するデータ分析エージェント〜
hanon52_
1
450
Agentic Defenseとともにセキュリティエンジニアが輝き続けるには / How Security Engineers Can Keep Excelling with Agentic Defense
yuj1osm
0
130
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
5
1.8k
ポケモンの型をTypeScriptの型システムで表現してみた
subroh0508
0
350
AI-DLCを活用した高品質・安全なAI駆動開発実践 / AI Driven Development
yoshidashingo
1
380
Building applications in the Gemini API family.
line_developers_tw
PRO
0
2.2k
EventBridge Connection
_kensh
5
650
生成 AI × MCP で切り拓く次世代 SRE!自律型運用への挑戦と開発者体験の進化
_awache
0
170
Djangoユーザが知っ得なPostgreSQL機能 - 設計の選択肢を増やす / Djang-use-PostgreSQL
soudai
PRO
0
210
AI駆動開発が変える、大規模開発の前提 ーHuman in the Loop から Human on the Loop へ / AIE2026
visional_engineering_and_design
28
19k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.4k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
200
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.3k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.1k
RailsConf 2023
tenderlove
30
1.5k
Speed Design
sergeychernyshev
33
1.8k
Docker and Python
trallard
47
3.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.5k
KATA
mclloyd
PRO
35
15k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.3k
Test your architecture with Archunit
thirion
1
2.3k
Paper Plane (Part 1)
katiecoart
PRO
0
8.6k
Transcript
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分で