webmcp-org/mcp-ui-webmcp

AI助手与嵌入式网页应用之间的双向集成

快速入门 • 架构 • 软件包 • 文档

---

现场试试

实时聊天界面： mcp-ui.mcp-b.ai 完整应用演示： beattheclankers.com

访问 beattheclankers.com 查看包含嵌入iframe的完整应用。使用MCP-B Chrome扩展自行测试这些工具。

---

这会带来什么

AI助手调用渲染交互式网页应用的工具。这些应用可以将新工具注册回AI。这结合了MCP的UI资源与WebMCP的双向工具注册。

流畅：

1. AI呼叫showTicTacToeGame
2. MCP 服务器返回 UI 资源 iframe
3. 游戏加载并注册 tictactoe_move、tictactoe_reset 等。
4. AI现在可以使用动态注册工具来玩游戏

该模式适用于任何嵌入式应用：表单、可视化、交互式演示、配置界面。

快速启动

创建一个新应用（推荐）

使用我们的互动CLI来搭建新项目：

请选择：

• 原版 - 纯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