MUP — Model UI Protocol

繁體中文

対話型UIをLLMチャットに取り込む — 開発者だけでなく、誰もがエージェント型AIを体験できるように。

現在のバージョン: 0.2.11 | プロトコル: mup/2026-03-17

デモ

Slides — AIがライブでプレゼンテーションを作成

Claudeがチャート、テーブル、テーマを備えた完全なスライドデッキを、すべて関数呼び出しを通じて作成します。

PDF to Presentation — AIが論文を読んで発表する

ClaudeがPDFからAlexNet論文を読み、Markdownでメモを取り、人間とAIの協働で図をキャプチャし、チャートとテーブルを備えた19枚のスライドを作成して、新しいパネル内リーディングモードでスライドごとに発表します — すべてライブでナレーション付きです。

Sound Pad — AIがゼロからトラックを作曲

ブラウザ合成による16種類の楽器、サンプルはゼロ。Claudeがエレクトロスウィングのトラックをレイヤーごとに作曲し、各セクションの切り替えに同期したイベント駆動のナレーションを付けます。

Related MCP server: MCP Kkebi

MUPとは？

MUP は、LLMチャットインターフェース内に存在する対話型UIコンポーネントです。

視覚的なインターフェースと呼び出し可能な関数を一体化したものです。ユーザーはボタンをクリックして操作し、LLMは関数呼び出しを通じて操作します。両者はお互いの操作をリアルタイムで確認できます。

最もシンプルなMUPは単一の .html ファイルです — ビルドステップも、フレームワークも、SDKも不要です。

なぜ？

エージェント型AIは強力ですが、現在はテキストコマンドと開発者向けツールの背後に閉じ込められています。ほとんどの人がその体験を得ることはありません。

MUPはこれを変えます。クリック可能で視覚的なUIをチャット内に直接配置するため、誰もがプロンプトを1つも書かずにエージェント機能を利用できます。

主要なアイデア

• 共有関数。 関数はLLM（ツールとして）またはユーザー（UI経由で）のどちらからでも呼び出せます。両者は同じコードを通じて同じ状態を操作します。

• LLMがオーケストレーター。 MUP同士は通信しません。LLMが出力を読み取り、次に何をするかを決定します。

• HTMLだけ。 マニフェストを書き、関数を登録すれば完了です。単一のファイルを配布できます。

利用可能なMUP

• Chat — 組み込み、常に利用可能

• Slides — チャート、テーブル、テーマ、リーディングモード、エクスポートを備えたプレゼンテーションエディタ（デモ）

• PDF Reader — ページテキスト抽出と領域選択/キャプチャ機能を備えたPDFビューア

• Markdown — 注釈とドキュメント管理を備えたMarkdownワークスペース

• Sound Pad — シーケンサー、トラックごとの音量、イベントシステムを備えた16パッドシンセサイザー（デモ）

• Chord Pad — 5つのシンセボイス、コード進行、メロディ再生を備えた音楽理論キーボード

• Diagram — 自動レイアウトのノードとエッジによる図（フローチャート、マインドマップ、アーキテクチャ図）と複数のレイアウトアルゴリズム

• Star Map — 星座、黄道、天の川を備えた位置ベースの対話型星空マップ

• Voice — 音声合成と音声認識（Jarvisモード）

• Notes — グループ、スタイル、エクスポートを備えた付箋ワークスペース

• Pixel Art — 図形、ASCIIパターン、塗りつぶし、PNGエクスポートを備えたピクセルキャンバス

• Timer — イベント駆動の完了通知付きカウントダウンタイマー / ストップウォッチ

• Progress — タスク進捗の追跡

• その他の例は archive/examples/ にあります（ゲーム、生産性ツールなど）

集中的な開発

Claudeを使って単一のMUPを反復的に構築する場合（.html の編集 → Chromeのホットリロード → ユーザーの操作 → チャネルがClaudeにフィードバック → 繰り返し）、mup-mini-mcp-server を参照してください。これはスキャフォールディング型の兄弟プロジェクトで、正確に1つのMUPをロードし、ホットリロード、WebSocketブリッジ、チャネルプッシュといった配管のみを提供します。カタログも、グリッドも、追加機能もありません。

ドキュメント

• 仕様 — プロトコル定義: マニフェスト、関数、ライフサイクル、エラーハンドリング

• 設計思想 — MUPがこのように設計された理由と、意図的に省いたもの

• 例 — ウォークスルー付きのMUPの例

インストール

npm（推奨）

npm install -g mup-mcp-server

または直接実行:

npx mup-mcp-server --mups-dir ./my-mups

MCP Server Registry でも利用できます。

ソースから

git clone https://github.com/Ricky610329/mup.git
cd mup/mup-mcp-server
npm install && npm run build

はじめに

Claude Codeを使う場合（推奨）

claude mcp add --transport stdio --scope user mup -- npx mup-mcp-server

Claude Codeを再起動します。ブラウザウィンドウが http://localhost:3200 で開きます。MUPsパネルを使用してMUP .html ファイルのフォルダをロードするか、組み込みのChatウィジェットから始めてください。

リアルタイムチャネルモード

MUPはチャネル通知を通じて、操作をClaudeの会話に直接プッシュできます。有効にするには:

claude --dangerously-load-development-channels server:mup

これにより、MUPはユーザーの操作をリアルタイムでClaudeに届けられます。このフラグがない場合でも、すべてのMUP機能は動作します — 操作はプッシュではなくポーリングで配信されるだけです。

Claude Desktopを使う場合

claude_desktop_config.json に追加:

{
  "mcpServers": {
    "mup": {
      "command": "npx",
      "args": ["mup-mcp-server"]
    }
  }
}

クイック例

<script type="application/mup-manifest">
{
  "name": "Counter",
  "description": "A counter. User clicks +/-, LLM can set or read the value.",
  "functions": [
    {
      "name": "setCount",
      "description": "Set the counter to a specific value",
      "inputSchema": {
        "type": "object",
        "properties": { "value": { "type": "number" } },
        "required": ["value"]
      }
    },
    {
      "name": "getCount",
      "description": "Get the current counter value",
      "inputSchema": { "type": "object", "properties": {} }
    }
  ]
}
</script>

これをMUP互換ホストにドロップするだけで動作します。

アーキテクチャ

┌──────────────────────────────────────────┐
│             MUP (.html file)             │
│        manifest + UI + functions         │
└──────────────────┬───────────────────────┘
                   │ loaded by
                   ▼
            ┌──────────────┐
            │  MCP Server  │
            │ (Claude Code │
            │  / Desktop)  │
            └──────┬───────┘
                   │ WebSocket
                   ▼
      ┌─────────────────────────────┐
      │        Browser Panel        │
      │  (MUP grid + Chat widget   │
      │   + workspace manager)     │
      └─────────────────────────────┘

スター履歴

ライセンス

MIT