MCP-UI - AIアプリケーションにリッチなUIを届けるプロトコル＆SDK

はじめに

正直なところ、AIアプリケーションのUIって、どうしてもテキストベースになりがちですよね。

ChatGPTやClaudeと会話していて、「ここ、ボタンで選べたら楽なのに」「フォームで入力したい」と思ったことはありませんか。個人的にはかなりあります。

MCP-UIは、そんな課題を解決してくれるプロジェクトです。Model Context Protocol（MCP）上で、リッチでダイナミックなUIコンポーネントをサーバーからクライアントに直接配信できる。これ、意外と革命的な話なんですよ。

GitHubで3,700スター以上を獲得しており、コミュニティ主導で活発に開発が進んでいます。

MCP-UIとは

MCP-UIは、MCPサーバーからクライアントにインタラクティブなUIリソースを配信するためのオープンプロトコル＆SDKです。

「UI over MCP」というコンセプトで、AIとのやり取りにWebベースのUIを組み込めます。HTMLページ、外部URL、Remote-DOMなど、複数のコンテンツタイプに対応しているのが特徴ですね。

30代になって思うのは、テキストだけでは限界があるということ。グラフを見たい、フォームに入力したい、ボタンをクリックしたい。そういったインタラクションがAIチャットの中で完結するのは、QOL的にかなり上がります。

公式サイト: https://mcpui.dev GitHub: https://github.com/MCP-UI-Org/mcp-ui

特徴・メリット

1. マルチ言語SDK対応

サーバーサイドはTypeScript、Python、Rubyの3言語に対応しています。

# TypeScript
npm install @mcp-ui/server @mcp-ui/client

# Python
pip install mcp-ui-server

# Ruby
gem install mcp_ui_server

好きな言語で実装できるのは嬉しいですね。既存のプロジェクトに組み込みやすい。

2. 3種類のコンテンツタイプ

配信できるUIリソースは3種類あります：

タイプ	MIME Type	用途
HTML	text/html	インラインHTMLをiframeで表示
外部URL	text/uri-list	外部Webページを埋め込み
Remote-DOM	application/vnd.mcp-ui.remote-dom	ホストアプリのスタイルに馴染むUI

Remote-DOMはShopifyのremote-domライブラリを活用していて、iframeの分離なしでより柔軟なUI表現が可能です。

3. サンドボックスによるセキュア実行

すべてのリモートコードはサンドボックス化されたiframe内で実行されます。

これ、地味に重要なポイントです。外部からUIを受け取るということは、潜在的なセキュリティリスクがあるわけですが、MCP-UIはそこをしっかり対策しています。ホストアプリケーションとユーザーのセキュリティが確保されているのは安心感があります。

4. 双方向通信（UI Actions）

UIからホストアプリケーションへのアクション送信が可能です：

• ツール呼び出し: UIのボタンクリックでMCPツールを実行
• プロンプト送信: フォーム入力をAIへ送信
• インテント: 特定のアクションをトリガー
• 通知: ユーザーへのフィードバック表示
• リンク: 外部URLへの遷移

postMessageプロトコルで通信するので、iframe間でも安全にやり取りできます。

5. プラットフォームアダプター

ChatGPT Apps SDKなど、各プラットフォーム固有のAPIに対応するアダプターが用意されています。

対応ホスト：

• Nanobot（フルサポート）
• ChatGPT（レンダリング＋部分的なアクション）
• Postman
• Goose
• LibreChat
• MCPJam
• VS Code（対応予定）

インストール方法

TypeScript（サーバー＆クライアント）

npm install @mcp-ui/server @mcp-ui/client

Python（サーバーのみ）

pip install mcp-ui-server

Ruby（サーバーのみ）

gem install mcp_ui_server

クライアント側のレンダリングはReactコンポーネントまたはWeb Componentsで行います。

基本的な使い方

サーバー側（TypeScript）

import { createUIResource } from '@mcp-ui/server'

// HTMLコンテンツを配信
const formResource = createUIResource({
  uri: 'ui://contact-form/1',
  content: {
    type: 'html',
    html: `
      <form id="contact">
        <input type="text" name="name" placeholder="お名前" />
        <input type="email" name="email" placeholder="メールアドレス" />
        <textarea name="message" placeholder="メッセージ"></textarea>
        <button type="submit">送信</button>
      </form>
    `
  },
  encoding: 'text'
})

// 外部URLを配信
const dashboardResource = createUIResource({
  uri: 'ui://dashboard/1',
  content: {
    type: 'externalUrl',
    iframeUrl: 'https://your-dashboard.example.com'
  },
  encoding: 'text'
})

uriでリソースを識別し、contentに表示したい内容を設定します。シンプルですね。

クライアント側（React）

import { UIResourceRenderer } from '@mcp-ui/client'

function App() {
  const handleUIAction = (action) => {
    console.log('UIアクション:', action)
    // ツール呼び出しやプロンプト送信を処理
  }

  return (
    <UIResourceRenderer
      resource={mcpResponse}
      onUIAction={handleUIAction}
    />
  )
}

UIResourceRendererコンポーネントにリソースを渡すだけで、適切なUIが表示されます。

Web Components版

フレームワークに依存しない場合は、Web Componentsも使えます：

<ui-resource-renderer></ui-resource-renderer>

<script type="module">
  import '@mcp-ui/client/web-component'

  const renderer = document.querySelector('ui-resource-renderer')
  renderer.resource = mcpResource
  renderer.addEventListener('ui-action', (e) => {
    console.log('UIアクション:', e.detail)
  })
</script>

Python版サーバー

from mcp_ui_server import create_ui_resource

resource = create_ui_resource(
    uri="ui://chart/1",
    content={
        "type": "html",
        "html": "<canvas id='chart'></canvas><script>/* Chart.js code */</script>"
    }
)

Pythonでも同じ感覚で使えます。

実践的なユースケース

1. インタラクティブなデータ可視化

AIが分析したデータを、グラフやチャートで表示する：

const chartResource = createUIResource({
  uri: 'ui://sales-chart/1',
  content: {
    type: 'html',
    html: `
      <div id="chart-container">
        <canvas id="salesChart"></canvas>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      <script>
        new Chart(document.getElementById('salesChart'), {
          type: 'line',
          data: ${JSON.stringify(salesData)},
          options: { responsive: true }
        })
      </script>
    `
  },
  encoding: 'text'
})

テキストで「前月比10%増です」と言われるより、グラフで見た方が一目瞭然ですよね。

2. フォーム入力の効率化

複数の項目を入力する場合、チャットで一つずつ聞かれるよりフォームの方が効率的：

const bookingForm = createUIResource({
  uri: 'ui://booking/1',
  content: {
    type: 'html',
    html: `
      <form id="booking" style="display: grid; gap: 12px;">
        <input type="date" name="date" required />
        <select name="time">
          <option value="10:00">10:00</option>
          <option value="11:00">11:00</option>
          <option value="14:00">14:00</option>
        </select>
        <input type="number" name="guests" min="1" max="10" placeholder="人数" />
        <button type="submit">予約する</button>
      </form>
    `
  },
  encoding: 'text'
})

時短になりますし、入力ミスも減ります。

3. 承認ワークフロー

ワンクリックで承認・却下できるUI：

const approvalUI = createUIResource({
  uri: 'ui://approval/123',
  content: {
    type: 'html',
    html: `
      <div style="padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px;">
        <h3>経費申請 #123</h3>
        <p>金額: ¥45,000</p>
        <p>申請者: 田中太郎</p>
        <p>用途: 出張交通費</p>
        <div style="display: flex; gap: 8px; margin-top: 16px;">
          <button onclick="approve()" style="background: #10b981; color: white; padding: 8px 16px; border: none; border-radius: 4px;">承認</button>
          <button onclick="reject()" style="background: #ef4444; color: white; padding: 8px 16px; border: none; border-radius: 4px;">却下</button>
        </div>
      </div>
    `
  },
  encoding: 'text'
})

業務システムとAIの連携が、こういった形でスムーズになります。

4. 外部ダッシュボードの埋め込み

既存のWebアプリをそのまま埋め込む：

const analyticsResource = createUIResource({
  uri: 'ui://analytics/1',
  content: {
    type: 'externalUrl',
    iframeUrl: 'https://analytics.example.com/embed/dashboard'
  },
  encoding: 'text'
})

新規開発なしで既存資産を活用できるのは、コスパ的に良いですね。

アーキテクチャの理解

MCP-UIは3層構造になっています：

┌─────────────────┐
│   Server SDKs   │  TypeScript / Python / Ruby
│  (UIResource生成) │
└────────┬────────┘
         │ MCP Protocol
         ▼
┌─────────────────┐
│  UIResource     │  uri, mimeType, content
│  (データ転送)    │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Client Renderer │  React / Web Components
│  (UI表示)        │
└─────────────────┘

1. サーバーSDK: UIResourceオブジェクトを生成
2. MCP転送: 標準プロトコルでクライアントへ送信
3. クライアントレンダラー: 受け取ったリソースをUIとして表示

この分離によって、サーバーとクライアントを独立して開発できます。

注意点と制限事項

セキュリティ考慮

サンドボックス化されているとはいえ、信頼できるソースからのUIのみを表示するべきです。外部URLを許可する場合は、ホワイトリスト方式を検討してください。

パフォーマンス

iframeの多用はパフォーマンスに影響します。必要な場面でのみUIリソースを使い、テキストで十分な場合はテキストで返すのが良いでしょう。

ホスト互換性

すべてのMCPクライアントがMCP-UIに対応しているわけではありません。現時点ではNanobotが最もフルサポートしており、ChatGPTは部分的な対応です。

まとめ

MCP-UIは、AIアプリケーションのUX改善において、かなり有望なアプローチだと思います。

個人的に良いと思うポイント：

• テキストの限界を超える: グラフ、フォーム、ボタンなどリッチなUIが使える
• マルチ言語対応: TypeScript、Python、Rubyから選べる
• セキュア設計: サンドボックス実行で安全性を確保
• 双方向通信: UIからのアクションをAIに伝えられる
• 既存資産の活用: 外部URLでWebアプリをそのまま埋め込める

AIとのインタラクションがテキストだけで完結する時代は、そろそろ終わりかもしれません。MCP-UIは、その次のステップを示してくれている。興味があれば、まずは公式ドキュメントを読んでみることをおすすめします。

GitHub: https://github.com/MCP-UI-Org/mcp-ui 公式ドキュメント: https://mcpui.dev Discord: https://discord.com/invite/rdctdFX2qR