対話型UIをLLMチャットに取り込む — 開発者だけでなく、誰もがエージェント型AIを体験できるように。
現在のバージョン: 0.2.11 | プロトコル: mup/2026-03-17
Claudeがチャート、テーブル、テーマを備えた完全なスライドデッキを、すべて関数呼び出しを通じて作成します。
ClaudeがPDFからAlexNet論文を読み、Markdownでメモを取り、人間とAIの協働で図をキャプチャし、チャートとテーブルを備えた19枚のスライドを作成して、新しいパネル内リーディングモードでスライドごとに発表します — すべてライブでナレーション付きです。
ブラウザ合成による16種類の楽器、サンプルはゼロ。Claudeがエレクトロスウィングのトラックをレイヤーごとに作曲し、各セクションの切り替えに同期したイベント駆動のナレーションを付けます。
Related MCP server: mcp-interactive-ui-server
MUP は、LLMチャットインターフェース内に存在する対話型UIコンポーネントです。
視覚的なインターフェースと呼び出し可能な関数を一体化したものです。ユーザーはボタンをクリックして操作し、LLMは関数呼び出しを通じて操作します。両者はお互いの操作をリアルタイムで確認できます。
最もシンプルなMUPは単一の .html ファイルです — ビルドステップも、フレームワークも、SDKも不要です。
エージェント型AIは強力ですが、現在はテキストコマンドと開発者向けツールの背後に閉じ込められています。ほとんどの人がその体験を得ることはありません。
MUPはこれを変えます。クリック可能で視覚的なUIをチャット内に直接配置するため、誰もがプロンプトを1つも書かずにエージェント機能を利用できます。
従来のチャット | MUPを使った場合 | |
ユーザーの操作 | テキストコマンドを入力 | ボタンをクリック、スライダーをドラッグ、ライブなビジュアルを確認 |
ツールの結果 | ユーザーからは隠され、LLMだけが見られる | 両者にとって可視かつ対話可能 |
利用できる人 | 適切なプロンプトを知っているパワーユーザー | 誰でも |
共有関数。 関数はLLM（ツールとして）またはユーザー（UI経由で）のどちらからでも呼び出せます。両者は同じコードを通じて同じ状態を操作します。
LLMがオーケストレーター。 MUP同士は通信しません。LLMが出力を読み取り、次に何をするかを決定します。
HTMLだけ。 マニフェストを書き、関数を登録すれば完了です。単一のファイルを配布できます。
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ブリッジ、チャネルプッシュといった配管のみを提供します。カタログも、グリッドも、追加機能もありません。
npm install -g mup-mcp-serverまたは直接実行:
npx mup-mcp-server --mups-dir ./my-mupsMCP Server Registry でも利用できます。
git clone https://github.com/Ricky610329/mup.git
cd mup/mup-mcp-server
npm install && npm run buildclaude mcp add --transport stdio --scope user mup -- npx mup-mcp-serverClaude Codeを再起動します。ブラウザウィンドウが http://localhost:3200 で開きます。MUPsパネルを使用してMUP .html ファイルのフォルダをロードするか、組み込みのChatウィジェットから始めてください。
MUPはチャネル通知を通じて、操作をClaudeの会話に直接プッシュできます。有効にするには:
claude --dangerously-load-development-channels server:mupこれにより、MUPはユーザーの操作をリアルタイムでClaudeに届けられます。このフラグがない場合でも、すべてのMUP機能は動作します — 操作はプッシュではなくポーリングで配信されるだけです。
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) │
└─────────────────────────────┘This server cannot be deployed
Turn any LLM multimodal; generate images, voices, videos, 3D models, music, and more.
Generate, inspect, and manage Flowstep UI designs directly from your AI assistant.
Publish AND operate micro-apps from your AI. No account, no API key. Stable URL, EU-hosted.
Give any MCP-compatible AI assistant a builder for live, hosted web tools and workflows.
