mup

MUP — Model UI Protocol

繁體中文

LLM チャットにインタラクティブな UI を取り入れ、開発者だけでなく、誰もがエージェント型 AI を体験できるようにします。

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

デモ

スライド — AI がプレゼンテーションをリアルタイムで作成

Claude が関数呼び出しだけで、グラフ、表、テーマを含むスライド一式を作成します。

PDF からプレゼンテーションへ — AI が論文を読み、発表

Claude が PDF から AlexNet の論文を読み、Markdown でメモを取り、人間と AI の協働で図をキャプチャし、グラフや表を含む 19 枚のスライドを作成します。その後、新しいパネル内閲覧モードでスライドごとに発表します。すべてリアルタイムでナレーションされます。

サウンドパッド — AI が一から楽曲を作曲

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

---

MUP とは？

MUP は、LLM チャットインターフェース内で動作するインタラクティブな UI コンポーネントです。

視覚的なインターフェースと、呼び出し可能な関数をひとまとめにします。ユーザーはボタンをクリックして操作し、LLM は関数呼び出しを通じて操作します。双方の操作はリアルタイムで相手に表示されます。

最もシンプルな MUP は単一の .html ファイルです。ビルド手順も、フレームワークも、SDK も必要ありません。

なぜ？

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

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

	従来のチャット	MUP を使う場合
ユーザー操作	テキストコマンドを入力	ボタンをクリックし、スライダーを動かし、リアルタイムのビジュアルを確認
ツールの結果	ユーザーには見えず、LLM だけが確認できる	双方に表示され、操作も可能
利用できる人	適切なプロンプトを知っている上級ユーザー	誰でも

主なアイデア

• 共有関数。 関数は 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 — タスクの進捗管理
• Chess — 基本的な移動ルールを備えたボードとマスコットのデモ（チェック／チェックメイト、アンパッサンは未実装）
• archive/examples/ にその他の例があります（ゲーム、生産性向上など）

集中的な開発

Claude で1つの MUP を反復的に開発する場合（.html を編集 → Chrome がホットリロード → ユーザーが操作 → チャネルが Claude にプッシュ → 繰り返し）は、mup-mini-mcp-server をご覧ください。これは、MUP を1つだけ読み込み、必要な仕組みのみを提供する、スキャフォールディング型の姉妹プロジェクトです。ホットリロード、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

開発

Node.js 22.13 以降が必要です。リポジトリのルートから実行します：

npm run setup  # install and build both servers from their lockfiles
npm test       # build, test both servers, and check MUP manifests/scripts

パス	用途
mup-mcp-server/	ダッシュボードホスト、ワークスペース、パイプライン、スケジューラー
mup-mini-mcp-server/	単一パネルホスト、ホットリロード、チャネルイベント
mups/	メンテナンス対象のパネルとデモ
spec/	プロトコル文書、スキーマ、例
scripts/	リポジトリの検証
archive/	過去の実装と例

どちらのパッケージも、個別にインストールできます。どちらかのパッケージ内で npm test を実行すると、最初にビルドされます。CI では Node.js 22 上で両方のパッケージをテストします。修正内容と検証範囲については、レビュー報告書をご覧ください。

どちらのホストも 127.0.0.1 にバインドし、ローカル UI のオリジンを受け入れます。信頼できる MUP を実行してください。同一オリジンの iframe 構成はブラウザーのストレージやメディア API に対応していますが、信頼できない HTML に対する分離境界ではありません。ダッシュボードでワークスペースを登録すると、作業ディレクトリへのアクセスが許可されます。

はじめに

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)     │
      └─────────────────────────────┘

Star History

License

MIT