webmcp-org/mcp-ui-webmcp

AIアシスタントと埋め込まれたWebアプリケーション間の双方向統合

クイックスタート•アーキテクチャ•パッケージ•Docs

お問い合わせ

生きてみる

ライブチャットUI: mcp-ui.mcp-b.ai フルアプリのデモ: Beattheclankers.com

Beattheclankers.comにアクセスして、埋め込まれたiframeでフルアプリケーションを見ることができます。 MCP-B Chromeエクステンションを使用してツールを自分でテストします。

お問い合わせ

これは、

インタラクティブなWebアプリをレンダリングするAIアシスタントの呼び込みツール。 これらのアプリはAIに戻って新しいツールを登録することができます。 MCP UI リソースを WebMCP 双方向ツール登録と組み合わせます。

流れ:

1. AIコール showTicTacToeGame
2. MCP サーバーは iframe で UI リソースを返す
3. ゲーム負荷とレジスタ[tictactoe_move]、[tictactoe_reset]]など 4。 AIは、動的に登録されたツールを使用してゲームを再生できるようになりました

このパターンは、フォーム、ビジュアライゼーション、インタラクティブなデモ、設定 UI のいずれかの組み込みアプリケーションで動作します。

クイックスタート

##新規アプリの作成(推奨)

インタラクティブな CLI を使用して、新しいプロジェクトをスキャフォールドします。

選択する:

• Vanilla - 純粋なHTML / CSS / JavaScript(ビルドステップなし)
• React - React + TypeScript + Vite(フル機能)

それから:

またはデモを実行

---

Try It Live

Live Chat UI: mcp-ui.mcp-b.ai Full App Demo: beattheclankers.com

Visit beattheclankers.com to see the full application with embedded iframe. Test the tools yourself using the MCP-B Chrome Extension.

---

What This Does

AI assistants invoke tools that render interactive web apps. Those apps can register new tools back to the AI. This combines MCP UI resources with WebMCP bidirectional tool registration.

Flow:

1. AI calls showTicTacToeGame
2. MCP server returns UI resource with iframe
3. Game loads and registers tictactoe_move, tictactoe_reset, etc.
4. AI can now play the game using dynamically registered tools

This pattern works for any embedded application: forms, visualizations, interactive demos, configuration UIs.

Quick Start

Create a New App (Recommended)

Use our interactive CLI to scaffold a new project:

npx @mcp-b/create-webmcp-app

Choose between:

• Vanilla - Pure HTML/CSS/JavaScript (no build step!)
• React - React + TypeScript + Vite (full-featured)

Then:

cd your-project
pnpm dev

Or Run the Demo

# Install dependencies
pnpm install

# Run both apps (MCP server + Chat UI)
pnpm dev

Open http://localhost:5173 and ask the AI to show you a TicTacToe game.

Requirements

• Node.js 24.3.0+ (see .nvmrc)
• pnpm 10.14.0+

Architecture

Key Principle: Decoupled Architecture

The chat UI and embedded apps have no custom knowledge of each other. They communicate exclusively through standard protocols:

• Chat UI discovers tools via the MCP protocol (HTTP/SSE)
• Embedded apps register tools via the WebMCP protocol (postMessage)
• Prompts and tools declared in the MCP server are automatically discovered and available in the UI

No hardcoding, no configuration files. Just standards-based protocols enabling dynamic composition.

WebMCP vs MCP-B