Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

MCP Appsを作ってみよう

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for iwamot iwamot PRO
June 16, 2026
Technology
840
4

MCP Appsを作ってみよう

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

Avatar for iwamot

iwamot PRO

June 16, 2026

More Decks by iwamot

See All by iwamot
自己紹介
Avatar for iwamot iwamot
PRO
1
140
パワポ作るマンをMCP Apps化してみた
Avatar for iwamot iwamot
PRO
0
1.1k
8万デプロイ
Avatar for iwamot iwamot
PRO
2
460
AIエージェント・マイクロサービス時代。AWSでの手軽な構築法を考えて試してみた
Avatar for iwamot iwamot
PRO
1
150
これがLambdaレス時代のChatOpsだ！実例で学ぶAmazon Q Developerカスタムアクション活用法
Avatar for iwamot iwamot
PRO
10
3.1k
Developer Certificate of Origin、よさそう
Avatar for iwamot iwamot
PRO
0
130
復号できなくなると怖いので、AWS KMSキーの削除を「面倒」にしてみた CODT 2025 クロージングイベント版
Avatar for iwamot iwamot
PRO
1
230
復号できなくなると怖いので、AWS KMSキーの削除を「面倒」にしてみた
Avatar for iwamot iwamot
PRO
3
230
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
Avatar for iwamot iwamot
PRO
15
12k

Other Decks in Technology

See All in Technology
AI時代に必要な脅威モデリング― 変化の速度に負けない理解とリスク判断
Avatar for masakane55 masakane55
5
1.3k
ブラウザとサーバーから考えるAI時代のフロントエンド監視
Avatar for Shogo Fukami shogo4131
3
880
分析の民主化を支えるメタデータ整備の実践
Avatar for KAKEHASHI kakehashi
PRO
4
1.3k
AIは「聞けば答える」から「任せると自分で進める」へ - JACTIMペナン地域部会・ペナン三水会講演
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
0
110
スキマバイトという雇用形態は存在しないので、雇用期間1日のアルバイト契約を事業者とワーカーが結ぶ手続きを支えるのがタイミーなんです
Avatar for しが あきとし(akitoshiga) akitoshiga
0
150
OR学会2026年秋期大会_機械学習と数理最適化の融合による、配合レシピ最適化システム開発事例
Avatar for BrainPad brainpadpr
0
140
Persisting Massive Data with Rails ~Designing for 60 billion rows, and fighting the bottlenecks~ Railsで挑む大量データ永続化 〜600億件を永続化するための設計とボトルネックとの戦い〜
Avatar for Shoichi Ochi occhi
0
480
AI時代のPRレビューにどう向き合うか？
Avatar for KairiM kairim0
1
220
自作バイナリを動かす「入口」8選
Avatar for Takumi Sueda puhitaku
2
1.3k
10年後、Engineering 行為を剥奪されるとして、わたしたちは、どう、何を創ればいいだろうか。 / If Engineering Is Taken Away in 10 Years, How and What Should We Create?
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
140
LocalStack を使ったサーバーレスアプリケーション開発 / Serverless Development with LocalStack
Avatar for Yoshiaki Yoshida kakakakakku
1
420
SREでアラート疲れを 解決しよう！
Avatar for KairiM kairim0
1
230

Featured

See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
46k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
440
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
530
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
470
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
630
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7.1k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
2
2k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.2k

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