MCP AppsでChatGPTのタスク結果をUIで表示させてみた

Last updated at 2026-09-23Posted at 2026-09-22

AIに作業を依頼したあと、長い文章で結果が返ってきて、内容を把握するのが少し面倒だと感じることはないでしょうか。

特に、調査や実装、確認など複数の工程を任せた場合、「何をしたのか」「どんな判断をしたのか」「何を確認したのか」が文章の中に埋もれてしまいます。

そこで、ChatGPTが行った1つの作業を構造化し、作業レポートとして表示するMCP Appを作りました。

公開コード

MCP Appsは、MCPツールの結果をテキストや構造化データとして返すだけでなく、対話するチャットの中にインタラクティブなUIとして表示できる仕組みです。

MCPサーバー側でUIのレイアウトや操作を用意できるため、文章だけでは把握しづらい情報を、用途に合わせた画面として見せることができます。

今回の作業レポートでは、この仕組みを使って、ChatGPTがタスクを行った後に、

を1つの画面で確認できるようにしました。

MCP Appsの詳細
MCP Appsの詳細については、公式ドキュメントを参照してください。
https://modelcontextprotocol.io/extensions/apps/overview

今回作成したMCP Appを利用すると、以下のようにChatGPT上で画面を表示できます。

通常の文章として結果を並べるのではなく、ChatGPTが行った作業を、あらかじめ決めた作業レポートの構造に合わせて表示しています。

作業レポートを表示するときの流れは、次のとおりです。

ChatGPTがユーザーに依頼された作業を進め、最終結果を返す段階で、実施した作業や判断、確認結果を整理します。その情報を、show_work_reportの引数としてMCPサーバーへ渡します。
MCPサーバーでは、入力サイズやZodによるスキーマ検証、機密情報のチェックを行います。問題がなければ、受け取ったレポートの内容を、基本的にはそのままstructuredContentとして返します。
ChatGPT側のホストは、ツールに紐づいたUIリソースを読み込み、UIへツールの結果を渡します。そのUI内でReactがデータを受け取り、作業レポートを描画します。

今回の実装では、ChatGPTが画面のレイアウトを毎回生成するわけではありません。ChatGPTが作業内容を構造化し、あらかじめ用意したReactのUIが、そのデータを表示する構成です。

役割を大きく分けると、次のようになります。

また、MCPのTool descriptionに以下の内容を記述することで、ChatGPTがこのToolを呼び出す条件や、MCP Serverへ渡す情報の範囲を指示しています。

項目	Tool descriptionで指定している内容
対象	直前に依頼された1つの作業だけをレポートにする
呼び出すタイミング	複数の作業を行い、最終結果を返す段階で使用する
会話の範囲	過去の依頼や会話全体の内容を混ぜない
情報の整理	実施内容・判断・確認結果をそれぞれ決められた項目に分ける
事実性	実際に行っていない作業や確認結果を作らない
秘密情報	API KeyやToken、Passwordなどを含めない
個人情報	ユーザーを特定できる情報をそのまま送らない
詳細データ	ファイル本文やToolの生ログは送らず、作業内容の要約だけを送る
ファイルパス	PC上の絶対パスは送らず、リポジトリ内の相対パスだけを使う

メリット
ChatGPTに画面としてレスポンスを表示できるため、文章だけで結果を返す場合よりも、内容を直感的に把握しやすいと感じました。ChatGPTでも、地図などのUIが会話の中に表示される体験はすでに身近になっています。

MCP Appsを使うことで、用途に合わせたより良いUIを追求したり、ユーザーが使いやすいUIを考えたりできる点も面白いと感じました。

セキュリティ面
一方で、セキュリティ面では注意が必要だと感じました。

MCPツールでは、LLMが会話の内容をもとにToolへ渡すデータを生成します。
そのため、ユーザー自身は外部のMCP Serverへ送ることを意識していなかった情報が、AIによってToolの入力に含まれる可能性があります。

今回の実装では、必要以上の情報をToolへ渡さないようTool descriptionで入力する情報の範囲を指示し、通信はHTTPSで保護しています。また、Server側ではSchemaや機密情報のチェックも行っています。