0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

MCPにボタンが出せる時代へ|MCP Apps・進捗表示・承認フローを徹底解説

0
Last updated at Posted at 2026-08-27

MCPにボタンが出せる時代へ|MCP Apps・進捗表示・承認フローを徹底解説|グラレコ要約

📺 この記事は YouTube チャンネル きなこもっちーのテック深掘り の動画解説記事です。
▶️ 動画はこちら → MCPにボタンが出せる時代へ|MCP Apps・進捗表示・承認フローを徹底解説

🐹🦜 この記事に登場する2匹

  • 🐹 もっちー (ハムスター)… AI はまだ勉強中。「それどういうこと?」と素朴に質問する生徒役
  • 🦜 きなこ (セキセイインコ)… AI で調べものをこなす解説役。やさしく深掘りして教える先生役

この記事は2匹の掛け合いを書き起こした形式です。発言の先頭にいる絵文字+名前が話者です。

はじめに

🐹 もっちー「ねえきなこ、AIって結局さ、返事はぜんぶ文章で返ってくるものでしょ?」

🦜 きなこ「その前提ね、今年の1月に静かに崩れたの。チャットの中に、押せるボタンがそのまま出せるようになった。」

🐹 もっちー「え、ボタン? AIの返事の中に、ほんとに押せるボタンが出るってこと?」

Timeline card: 2026-01-26, first official MCP extension released

🦜 きなこ「しかもボタンだけじゃないの。入力フォームや、確認のダイアログまで、返事の中に置けるようになった。」

🐹 もっちー「それってもう、返事っていうより小さいアプリじゃない?」

Timeline card: 2026-01-26, first official MCP extension released

🦜 きなこ「そう。2026年1月26日にMCPの最初の公式拡張が出て、UIを描く仕組みが標準に入ったの。」

🐹 もっちー「それめっちゃ便利やん! もう文章読んで自分で操作せんでええってことやろ?」

Spec page excerpt highlighting a response split into three fields

🦜 きなこ「便利なんだけどね、仕様書を読むと変なことが書いてあるの。ツールの戻り値を、わざわざ三つに割って返せって。」

🦜 きなこ「そこが今日の入口なの。返事の形が変わったんじゃなくて、返事の中身を誰に向けて書くかが変わったんだよ。」

🐹 もっちー「つまり今までは、AIがぜんぶ文章に直してから渡してくれてたわけだ。」

🐹 もっちー「三つに割る? 一個にまとめて返した方がラクじゃないの? なんでわざわざ分けるの。」

Three feature icons appearing: UI, streaming progress, human approval

🦜 きなこ「その理由がわかると、今年MCPに増えた三つの機能が、ぜんぶ同じ方向を向いてることも見えてくるんだよ。」

Agenda card with three numbered items

🦜 きなこ「今日は、なぜ三つに割るのか、進捗と承認の仕組みが同時に入った理由、そして今のサーバーを壊さず対応する方法まで順番に見ていくね。」

MCPはもう実験じゃない(18か月で何が起きたか)

Simple diagram: AI assistant connected to a local tool via MCP

🐹 もっちー「そもそもMCPって、AIに自分のツールをつなぐやつだよね。うちの周りだと、まだ趣味で試してる人が多い印象だけど。」

Line chart: 2 million (Nov 2024) rising to 97 million (Mar 2026) monthly SDK downloads

🦜 きなこ「その印象、2024年で止まってるかも。SDKの月間ダウンロードが、2024年11月の約200万回から、2026年3月時点で9,700万回まで伸びてるの。」

🐹 もっちー「9,700万!? 桁がおかしいやん。もう趣味の道具ちゃうやんそれ。」

Governance handover card: Anthropic to Linux Foundation / AAIF, Dec 2025

🦜 きなこ「しかも2025年12月に、MCPはLinux Foundation傘下のAAIFという団体に寄贈されたの。特定の一社のものじゃなくなった。」

🐹 もっちー「中立の団体が持つようになったってことか。それって開発してる側から見ると、何が変わるの?」

Flow: proposal, working group review, spec update

🦜 きなこ「仕様が「思いつきで変わらない」ようになったの。提案して議論して決める手続きができて、企業も安心して乗れるようになった。」

🐹 もっちー「じゃあ、もう完成形ってこと? これだけ広まってるなら、あとは使うだけな気がするけど。」

Audit log entries and an SSO login screen shown side by side

🦜 きなこ「変わったのはそこだけじゃないの。監査ログの形をそろえたり、会社のログイン基盤とつなぐ認証を標準にしたり。」

🐹 もっちー「それって、情シスの人が首を縦に振るかどうかの話だよね。」

Shift diagram: hobby setup on the left, enterprise setup on the right

🦜 きなこ「まさにそこ。個人が趣味で動かす前提から、会社が業務で動かす前提へ、要求水準ごと引き上げられたの。」

Checklist of enterprise requirements appearing one by one

🐹 もっちー「要求水準が上がるって、具体的には何を求められるようになったの?」

Audit trail table with user, time, and action columns

🦜 きなこ「誰がいつ何を実行したかを後から追える記録と、社員のアカウントでそのままログインできる認証。この二つは特に強く求められるの。」

🐹 もっちー「だから仕様がここまで細かくなってきたのか。」

Three question marks appearing over the MCP diagram

🦜 きなこ「ううん、逆なの。この規模で使われて初めて、見えてこなかった不便が三つ、はっきり形になってきた。」

🐹 もっちー「不便って、たとえばどんな? つながってるなら十分な気がしちゃうんだけど。」

Three pain point cards: text only, no progress, no approval

🦜 きなこ「返事が文章しかない。長い処理の途中がわからない。危ない操作を勝手に実行してしまう。この三つね。」

Roadmap arrows pointing from three pain points to three new features

🦜 きなこ「2026年の仕様は、この三つを一個ずつ潰しにきてる。まずは一つ目、返事が文章しかない問題から。」

①インタラクティブコンポーネント(返り値を3つに割る理由)

🐹 もっちー「でもさ、文章で返ってくるのがそんなに困る? 表でも箇条書きでも、読めば分かるじゃん。」

A huge plain-text table filling the model context window

🦜 きなこ「その反応わかる。じゃあ想像してみて。顧客データを100件取ってきて、それを全部テキストの表に直してAIに読ませたとするね。」

🐹 もっちー「……あ。その表、AIが読む分だけまるまる料金かかるってこと?」

Cost meter rising as the text table grows

🦜 きなこ「そう。しかも表示するだけのデータなのに、AIの読む枠を丸ごと食い潰す。返事も遅くなる。ここがずっと無駄だったの。」

Python tool function returning a dict with three labeled keys

🦜 きなこ「サーバー側のコードで言うと、返り値の辞書に三つの欄を用意して、それぞれ別の相手に向けて詰めるイメージなの。」

🐹 もっちー「書く量は増えるけど、書き方自体はふつうの関数のままなんだ。」

🐹 もっちー「画面に出したいだけのデータを、いちいちAIに読ませてたのが無駄だったってことか。」

Response object split into three labeled fields

🦜 きなこ「だから戻り値を三つに割るの。この分け方、名前がついてて、コンテントとストラクチャードコンテント、それとアンダースコアメタ。」

🐹 もっちー「えっ、いきなり横文字が三つ来た。それぞれ誰が読むやつなの?」

Delivery slip and parcel shown as an analogy for content and structured data

🐹 もっちー「つまり、AIには目次だけ渡して、中身は別の窓に流すって感じやな。宅配の伝票と荷物みたいなもんや。」

Field 1 highlighted: short summary text for the LLM

🦜 きなこ「コンテントはAIが読む一言。ダッシュボードを出したよ、くらいの短い文で十分なの。」

Field 2 highlighted: typed data flowing to a chart, hidden from the LLM

🦜 きなこ「ストラクチャードコンテントはUIが読む生データ。グラフを描くための数字が入ってて、AIからは見えないの。」

Field 3 highlighted: metadata pointing to a UI resource URI

🦜 きなこ「アンダースコアメタは描画の指示書。どのUIを読み込むかの場所を書いておく欄なんだよ。」

Before and after comparison of token usage

🐹 もっちー「なるほどな! さっき言うてた「料金かかる表」が、AIに見えへんとこ通るようになるんやな。」

🦜 きなこ「しかも表示用のデータはAIから隠れてるから、うっかり長い個人情報をモデルに読ませてしまう事故も減るの。」

🐹 もっちー「節約のためだけじゃなくて、見せない設計にもなってるんだ。」

🦜 きなこ「そう。トークンの節約と、余計なものを渡さない安全性。この二つを一度に取りにいってる分け方なんだよ。」

🐹 もっちー「でもその画面って、どこに置いてあるの? 勝手に他所のページを読み込むの、危なくない?」

Sandboxed iframe exchanging messages with the host application

🦜 きなこ「そこは隔離された枠、アイフレームの中で読み込むの。データのやり取りはポストメッセージという昔からあるWebの仕組みを使う。」

🐹 もっちー「新しい魔法じゃなくて、Webの標準の組み合わせなんだ。……ところでこのUI、どのAIアプリでも出るの?」

②Streaming と MRTR(切れても最初からにならない)

🦜 きなこ「その質問は大事だから、あとでちゃんと答えるね。先に白状すると、わたしが一番困ってたのは実は別のところなの。」

🐹 もっちー「きなこが困ってた? めずらしいね。どこでつまずいてたの。」

Spinner frozen on screen with no progress information

🦜 きなこ「重い処理を頼むと、終わるまで画面が沈黙するの。動いてるのか死んでるのか、こっちからは区別がつかない。」

🐹 もっちー「あー、それ苦手。待たされてる間って、押し直したくなっちゃうんだよね。」

🦜 きなこ「実務でつらいのは、通信そのものに時間制限があること。よくある構成だと数十秒で切られるし、関数を動かす基盤にも実行時間の上限があるの。」

🐹 もっちー「じゃあ、何時間もかかる仕事はそもそも頼めなかったってこと?」

🦜 きなこ「頼めても、途中で切れたら結果が受け取れなかったの。だから長い処理は最初から諦められがちだった。」

Restaurant pager buzzing while the customer waits at a table

🦜 きなこ「だから途中経過を流せるようになったの。混んでるレストランの呼び出しベル、あるでしょ。あれと同じ考え方。」

Progress events arriving one by one on the pager

🐹 もっちー「注文したらベル渡されて、席で待ってるやつね。厨房の進み具合がベルで届くイメージか。」

Progress bar filling from 0 to 80 percent

🐹 もっちー「待たされてる側からすると、あと何割で終わるのかが見えるだけで、体感がぜんぜん違うもんね。」

🦜 きなこ「そうなの。しかも途中で明らかに違う方向へ進んでたら、早めに止められる。これも進捗が見える効用なんだよ。」

Broken connection icon between pager and kitchen

🐹 もっちー「でもさ、途中でWi-Fiが切れたらどうなるの? ベルの電池切れたら、また最初から並び直し?」

🦜 きなこ「そこが今回いちばん面白いところなの。切れても、並び直しにはならないんだよ。」

Receipt showing request ID and last received event ID

🦜 きなこ「レシートを持ってカウンターに行けばいいの。注文番号と、最後に受け取った通知の番号。この二つで続きから再開できる。」

🐹 もっちー「続きからいけるんか! それ地味やけど、長い処理ほどありがたいやつやん。」

Load balancer distributing requests across stateless server instances

🦜 きなこ「この再開の仕組みをMRTRって呼ぶの。サーバー側が状態を抱え込まずに済むから、負荷分散の裏側に置いても壊れない。」

🐹 もっちー「……でも進捗が見えるのはいいけど、勝手に最後まで走られたら怖い処理もあるよね。消しちゃう系とか。」

🦜 きなこ「進捗のお知らせは決まった形で飛んでくるから、受け取る側は進捗バーを出すだけで済むの。」

③Elicitation(AIが人間にハンコをもらいに来る)

Secretary at a bank counter holding a transfer slip

🦜 きなこ「その怖さ、まさに三つ目の話なの。秘書に振り込みを頼む場面を思い浮かべてみて。」

🐹 もっちー「秘書が銀行に行って、お金を動かす感じね。金額が大きかったら、さすがに勝手にはやらせないよね。」

Bank pauses the transaction and hands over a signature form

🦜 きなこ「そう。銀行が「これは社長の署名が要ります」って手を止めて、用紙を渡す。秘書は署名をもらってから戻る。」

🐹 もっちー「その「手を止めて聞きに来る」のを、AIの世界でもできるようにしたってこと?」

🦜 きなこ「止まらない仕組みのままだと、権限を持たせるのが怖くて、結局読み取り専用でしか使えなかったの。」

Read-only badge on an assistant icon

🐹 もっちー「見るだけのAI秘書か。それだと確かに、できることは限られちゃうね。」

Term card: Elicitation, human-in-the-loop mechanism

🦜 きなこ「うん、それに名前がついてるの。エリシテーション。人間の判断を途中に挟むための、標準の仕組み。」

🐹 もっちー「エリシテーション。……で、実際どうやって止めるの? サーバーがこっちの画面を出せるわけじゃないよね。」

Server returns an input-required status instead of a result

🦜 きなこ「サーバーは「入力が要る」という返事を返すだけなの。画面を出すのはクライアント側の仕事。」

Sequence diagram: pause, user input, resend with same request ID, resume

🦜 きなこ「ユーザーがフォームに答えたら、クライアントが同じ注文番号に答えを添えて、もう一度投げ直す。それで処理が続きから走るの。」

Dangerous delete operation blocked by an approval dialog

🐹 もっちー「ええやん! 消す前に一回止まってくれるんやったら、安心して任せられるわ。」

🦜 きなこ「しかも、これがあると認証もきれいに書けるの。途中でログインしてもらって、その結果を持って続きを進められる。」

Three features converging into one theme: keep the human in the loop

🐹 もっちー「UIが出せて、進捗が見えて、危ないところで止まる。三つとも、人間を置いてけぼりにしないための機能なんだね。」

🐹 もっちー「承認のハンコがあるだけで、任せられる範囲が一気に広がるやん。免許取ったみたいなもんやな。」

🐹 もっちー「……ただ、ここまで増えると心配になってきた。今動いてるサーバー、壊れたりしない?」

🦜 きなこ「承認の形が標準になると、危ない操作にだけ確認を挟む、という設計が自然に書けるようになるの。」

Approval dialog appearing only for a destructive action

🐹 もっちー「全部に確認が出たらうるさいもんね。ここぞという時だけ止まってほしい。」

既存サーバーは壊れるのか(Graceful Degradation の作法)

🦜 きなこ「その心配、さっきの「どのアプリでもUIが出るの?」と同じ根っこなの。ここでまとめて答えるね。」

🐹 もっちー「そうそう、それ気になってた。全部のAIアプリが画面を描けるわけじゃないよね。」

Optional extension badge attached to the UI feature

🦜 きなこ「描けないよ。だからUIの仕組みは、必須じゃなくて追加のオプションという位置づけになってるの。」

Empty response shown in a terminal client

🐹 もっちー「オプションなのはいいとして、対応してないアプリで使われたらどうなるの? 真っ白になったりしない?」

🦜 きなこ「実装をサボると本当に真っ白になるの。だから作る側に手順が決められてる。ここは守ってほしいところ。」

Handshake step: client capability check during initialization

🦜 きなこ「まず最初のつなぎ込みで、相手がUIに対応してるかを聞く。これが機能検知ね。」

Two client types calling the same server: GUI app and terminal

🦜 きなこ「実際、対応しているアプリと、文字だけのターミナルから使う人が、同じサーバーを同時に叩くことになるの。」

🐹 もっちー「両方のお客さんがいるってことか。片方だけ見て作ると事故るね。」

Two branches: UI-capable client renders a panel, CLI client receives text

🦜 きなこ「対応してなければ、UI前提のツールは出さない。出すなら、文章だけで完結する返事を必ず用意しておく。」

🐹 もっちー「スマホ向けの画面とガラケー向けの画面、両方用意しとくみたいな話だね。」

🐹 もっちー「つまり、豪華な画面はおまけで、文章だけでも用が足りる状態を残しておくってことか。」

Ordered steps: text response first, UI layer second

🦜 きなこ「順番も大事なの。UIを作り込んでから文章の返事を足そうとすると、たいてい後回しになって忘れるから。」

🐹 もっちー「先に文章だけで動くものを作って、あとから画面を乗せる方がいいってことか。」

Graceful degradation ladder: rich UI, simplified UI, plain text

🦜 きなこ「その考え方を段階的機能縮小って呼ぶの。上から順に諦めていって、最後の一段は絶対に残す。」

🐹 もっちー「じゃあ今のサーバーは、慌てて全部書き直さなくていいんだ。ちょっと安心した。」

🦜 きなこ「確認の仕方も簡単なの。ターミナルから同じツールを呼んでみて、返事だけで意味が通るかを見ればいい。」

🐹 もっちー「それやったら今日試せるやん。うちのサーバーでもやってみるわ。」

Reusable pattern card for adding future optional features

🦜 きなこ「この作法を守っておくと、新しい機能が増えたときも同じやり方で足せるの。土台の考え方はもう変わらないから。」

🐹 もっちー「毎回ゼロから覚え直さなくていいのは助かるな。」

🐹 もっちー「ところでさ、エージェント同士をつなぐプロトコルも別にあったよね。あれとは喧嘩しないの?」

MCPとA2Aは競合しない(境界線の話)

Cluttered protocol logos being sorted into two lanes

🦜 きなこ「別にあるよ。でも喧嘩はしないの。担当してる区間が、そもそも違うから。」

🐹 もっちー「区間? どっちもAIをつなぐやつでしょ。何がどう違うの。」

Boundary diagram: agent to tool layer labeled MCP

🦜 きなこ「MCPはもともと、エージェントと道具のあいだをつなぐために作られたの。データベースやAPIに接続する側ね。」

Boundary diagram: cross-organization agent to agent layer labeled A2A

🦜 きなこ「A2Aが担当するのは、組織をまたいだエージェント同士のあいだ。よその会社のエージェントに仕事を頼む側。」

🐹 もっちー「道具につなぐのがMCPで、相手のエージェントに頼むのがA2A。線が引けると急に楽になるね。」

Question mark between a tool icon and an agent icon

🐹 もっちー「道具につなぐのと、相手に頼むの、そんなにきっぱり分かれるものなの?」

🦜 きなこ「分かれるの。境目は「相手が自分で判断するかどうか」。データベースは判断しないけど、エージェントは判断するから。」

🐹 もっちー「前にもう一個、社内のエージェント同士をつなぐやつも聞いた気がするんだけど。」

ACP shown as a dashed box merged into A2A, dated 2025-08

🦜 きなこ「ACPのことだね。ただ、あれは2025年8月にA2Aへ統合されて、今は単体では動いていないの。」

🦜 きなこ「具体的にすると分かりやすいよ。社内の顧客データベースから情報を取ってくる、これは道具につなぐ話だからMCP。」

🐹 もっちー「よその会社のエージェントに在庫を確認してもらうなら、そっちはA2Aってことね。」

Simple rule card: does the counterpart decide by itself

🐹 もっちー「判断するかしないかで見分けるのか。それなら迷ったときも自分で決められそう。」

🦜 きなこ「そう。境目さえ持っておけば、新しいプロトコルが出てきても、どこの区間の話かで整理できるの。」

🐹 もっちー「覚えるものが減ったのか。三つ並んでるって説明を見かけたら、ちょっと古い情報かもしれないんだね。」

🐹 もっちー「道具か、判断する相手か。荷物を運ぶトラックと、交渉する営業さんの違いみたいなもんやな。」

Two-layer summary card: MCP for tools, A2A across organizations

🦜 きなこ「そういうこと。今の実務で押さえるのは、道具側のMCPと、組織をまたぐA2A。この二本立てで考えれば十分なの。」

Decision tree: is the counterpart a tool or an agent

🦜 きなこ「設計で迷ったら、まず相手が道具かエージェントかを見るといいの。そこを間違えると、無理な作りになりがちだから。」

🐹 もっちー「道具にエージェントの仕事をさせようとして、こじれるパターンね。」

まとめ

Summary card with three icons: UI, progress, approval

🐹 もっちー「今日の三つ、言い直してみるね。画面が出せる、途中経過が見える、危ないところで止まる。」

🦜 きなこ「完璧。しかも三つとも追加のオプションだから、今のサーバーを止めずに順番に足していけるの。」

Three step roadmap card

🦜 きなこ「順番も思い出しておくね。まず戻り値を分ける、次に画面を足す、最後に危ない操作へ承認を挟む。」

🐹 もっちー「後ろに行くほど、影響が大きい変更になるってことか。」

Relaxed checklist with only the first item ticked

🐹 もっちー「三つ全部やらなきゃ、って身構えてたけど、そうじゃないんだね。ちょっと肩の力が抜けたよ。」

🐹 もっちー「じゃあ最初にやるなら、どれからがいい? 全部いっぺんは無理だよ。」

Arrow order: split the response, then add UI, then approval

🦜 きなこ「戻り値を分けるところからがおすすめ。表示用のデータをAIに読ませなくなるだけで、料金にも速さにも効くから。」

Single tool being upgraded first, then others following

🐹 もっちー「分けるだけやったら、今あるツール一個で試せるやん。うまくいったら横に広げたらええんやな。」

🦜 きなこ「順番に足せるのが今回の設計のいいところなの。全部そろえないと動かない、という作りにはなっていないから。」

🐹 もっちー「少しずつでいいなら、手が止まらなくて済むね。」

🦜 きなこ「一度に全部を片づけようとすると、たいてい途中で力尽きるの。小さく試して、動いたら次に行くのがおすすめ。」

🐹 もっちー「節約から入れるんやったら、飼い主にも言い訳が立つな。今日から一個ずつやってみるわ。」

Comment prompt overlay

🦜 きなこ「あなたのツールなら、画面と進捗と承認、どれが最初に要りそう? コメントで教えてほしいな。」

Teaser card hinting at the agent-to-agent protocol landscape

🦜 きなこ「実はさっき名前だけ出た、エージェント同士をつなぐ方の勢力図も、去年からけっこう動いてるんだよね。そっちは別の動画でゆっくり話すね。」


きなこもっちーのテック深掘り では、AI/LLM を中心としたテック全般をハムスター(🐹 もっちー)とセキセイインコ(🦜 きなこ)の掛け合いで楽しく解説しています。

▶️ 動画で観るMCPにボタンが出せる時代へ|MCP Apps・進捗表示・承認フローを徹底解説

👍 この記事が役に立ったら LGTM・ストックしてもらえると励みになります!

📺 チャンネル登録はこちらきなこもっちーのテック深掘り

🔗 他の解説動画も見るきなこもっちーのテック深掘り の動画一覧

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?