快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

命令预览

npx @mcp-b/create-webmcp-app

详细介绍

MCP UI + WebMCP

MCP用户界面+WebMCP

AI助手和嵌入式web应用程序之间的双向集成

![CI](https://github.com/WebMCP-org/mcp-ui-webmcp/actions/workflows/ci.yml) ![License: MIT](./LICENSE) ](https://nodejs.org) ![TypeScript](https://www.typescriptlang.org)

______________________________________________________________________

现场试用

在线聊天界面： mcp-ui.mcp-b.ai 完整应用程序演示： beatthelankers.com

访问 beatthelankers.com 查看带有嵌入式iframe的完整应用程序。使用 MCP-B Chrome扩展程序.

______________________________________________________________________

这有什么作用

流量：

AI呼叫 showTicTacToeGame
MCP服务器返回带有iframe的UI资源
游戏加载和注册 tictactoe_move, tictactoe_reset等等。
AI现在可以使用动态注册的工具玩游戏

此模式适用于任何嵌入式应用程序：表单、可视化、交互式演示、配置UI。

快速开始

创建新应用程序（推荐）

使用我们的交互式CLI构建新项目：

npx @mcp-b/create-webmcp-app

从以下选项中选择：

香草 -纯HTML/CSS/JavaScript（无构建步骤！）
反应 -React+TypeScript+Vite（功能齐全）

然后：

cd your-project
pnpm dev

或者运行演示

# Install dependencies
pnpm install

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

打开http://localhost:5173然后让人工智能给你看一个TicTacToe游戏。

需求

Node.js 24.3.0+（参见 .nvmrc)
pnpm 10.14.0+

建筑

关键原则：解耦架构

聊天UI和嵌入式应用程序之间没有自定义知识。 它们仅通过标准协议进行通信：

聊天界面 通过MCP协议（HTTP/SSE）发现工具
嵌入式应用程序 通过WebMCP协议注册工具（postMessage）
提示和工具 在MCP服务器中声明的内容会自动被发现，并在UI中可用

没有硬编码，没有配置文件。只是基于标准的协议，支持动态组合。

WebMCP与MCP-B

WebMCP 是浏览器中双向工具注册的W3C标准规范，定义了 navigator.modelContext API MCP-B 是使WebMCP今天可用的参考实现和polyfill。

WebMCP：基于标准的API规范（W3C网络机器学习社区小组）
MCP-B：参考实施情况，提供：

- Polyfill用于 navigator.modelContext 浏览器支持之前 - WebMCP协议与WebMCP协议之间的转换桥梁 - 用于测试的浏览器扩展

系统架构

flowchart TB
    subgraph ChatUI["Chat UI Browser Context"]
        UI[AI Chat Interface]
        HTTP_CLIENT["HTTP MCP Client
@modelcontextprotocol/sdk"]
        WEBMCP_MGR["WebMCP Integration
useWebMCPIntegration"]
        IFRAME["Iframe Container
Side Panel"]

        UI --> HTTP_CLIENT
        UI --> WEBMCP_MGR
        WEBMCP_MGR --> IFRAME
    end

    subgraph MCPServer["MCP Server - Cloudflare Worker"]
        TOOLS["Tool Registry
showTicTacToeGame, etc."]
        ASSETS["Static Asset Server
Serves mini-apps"]

        TOOLS -.->|Returns UI Resource| ASSETS
    end

    subgraph EmbeddedApp["Embedded App Iframe Context"]
        APP["Mini-App React
TicTacToe, etc."]
        WEBMCP_INIT["MCP-B Polyfill
@mcp-b/global"]
        HOOKS["useWebMCP Hooks
@mcp-b/react-webmcp"]
        TRANSPORT_CHILD["IframeChildTransport
@mcp-b/transports"]

        APP --> HOOKS
        HOOKS --> WEBMCP_INIT
        WEBMCP_INIT --> TRANSPORT_CHILD
    end

    HTTP_CLIENT |HTTP/SSE MCP Protocol| TOOLS
    ASSETS -->|iframe src| APP
    WEBMCP_MGR |IframeParentTransport postMessage| TRANSPORT_CHILD

    style WEBMCP_INIT fill:#e1f5ff
    style HOOKS fill:#e1f5ff
    style TRANSPORT_CHILD fill:#e1f5ff
    style WEBMCP_MGR fill:#e1f5ff

完整流程：双向沟通的工具调用

sequenceDiagram
    participant User
    participant AI as AI Assistant
    participant HTTP as HTTP MCP Client
    participant Server as MCP Server
    participant Iframe as Iframe Container
    participant App as Embedded App
    participant WebMCP as WebMCP Manager

    %% Initial tool call that returns UI
    User->>AI: "Show me TicTacToe"
    AI->>HTTP: callTool(showTicTacToeGame)
    HTTP->>Server: HTTP Request
    Server-->>HTTP: UI Resource (externalUrl)
    HTTP-->>AI: Tool Result
    AI->>Iframe: Render UI Resource

    %% Iframe loads and WebMCP connection established
    Note over Iframe,App: Iframe loads mini-app
    Iframe->>App: Load src URL
    App->>App: initializeWebModelContext
(@mcp-b/global)
    App->>WebMCP: postMessage(iframe-ready)
    WebMCP->>App: postMessage(parent-ready)

    %% MCP-B Transport Setup
    Note over WebMCP,App: MCP-B Transport Layer
    WebMCP->>WebMCP: Create IframeParentTransport
(@mcp-b/transports)
    App->>App: IframeChildTransport ready
(auto-created by @mcp-b/global)
    WebMCP->>App: MCP: listTools()
    App-->>WebMCP: Tools: [tictactoe_move, tictactoe_reset, ...]
    WebMCP->>WebMCP: registerWebMcpTools(tools, sourceId)

    %% Tool registration complete
    Note over AI,App: Embedded tools now available
    AI->>AI: Merge HTTP tools + WebMCP tools

    %% User invokes WebMCP tool
    User->>AI: "Make a move at position 4"
    AI->>WebMCP: callTool(tictactoe_move, {position: 4})
    WebMCP->>App: MCP: callTool via IframeParentTransport
    App->>App: useWebMCP handler executes
    App->>App: Update game state
    App-->>WebMCP: Tool Result (markdown + state)
    WebMCP-->>AI: Tool Result
    AI-->>User: "Moved to position 4..."

    %% Dynamic tool updates
    Note over App,WebMCP: Tool list can change dynamically
    App->>WebMCP: MCP: notifications/tools/list_changed
    WebMCP->>App: MCP: listTools()
    App-->>WebMCP: Updated tool list
    WebMCP->>WebMCP: registerWebMcpTools(newTools, sourceId)

关键组件

聊天UI（父上下文）

HTTP MCP客户端 (@modelcontextprotocol/sdk)：通过HTTP/SSE连接到远程MCP服务器以获取初始工具
WebMCP集成 (使用WebMPCIntegration。ts)：从iframe管理WebMCP客户端和工具
Iframe生命周期 (useIframeLifecycle.ts)：为每个iframe设置MCP-B传输
刀具路径：根据源ID将调用路由到HTTP MCP或WebMCP客户端
IframeParentTransport (@mcp-b/transports)：与嵌入式应用程序的双向通信渠道

嵌入式应用程序（Iframe上下文）

MCP-B聚合物填充物 (@mcp-b/global)：实施 navigator.modelContext API
使用WebMCP钩子 (@mcp-b/react-webmcp)：使用自动生命周期管理注册工具
Iframe儿童交通 (@mcp-b/transports)：通过postMessage接收家长的工具调用
家长沟通 (useParentCommunication.ts)：准备协议和通知

MCP服务器

工具注册表：显示以下工具 showTicTacToeGame 返回UI资源
UI资源类型：支持 externalUrl, rawHtml，以及 remoteDom
静态资产：为iframe嵌入提供捆绑的迷你应用程序

MCP UI资源

支持三种资源类型(了解更多):

类型	用例	实现
`externalUrl`	嵌入式迷你应用程序	带URL的iframe
`rawHtml`	简单标记	山宁泰HTML
`remoteDom`	动态内容	JavaScript生成的DOM

→ MCP-UI服务器SDK | → MCP-UI客户端SDK

WebMCP工具注册

import { useWebMCP } from '@mcp-b/react-webmcp';

useWebMCP({
  name: "tictactoe_move",
  description: "Make a move at position",
  schema: z.object({
    position: z.number().min(0).max(8)
  }),
  handler: async ({ position }) => {
    // Execute move
    return {
      content: [{
        type: "text",
        text: `Moved to position ${position}`
      }]
    };
  }
});

AI可以立即调用 tictactoe_move 就好像它是一个本地MCP工具。

MCP-B包：

→ MCP-B快速入门 | → MCP-B示例 |

包裹

应用

聊天用户界面

React聊天界面与MCP客户端和WebMCP集成。通过HTTP连接到MCP服务器，显示UI资源，处理动态工具注册。

技术： React 19、Vite、顺风CSS 4、Vercel AI SDK

→ 文档

mcp服务器

Cloudflare Workers上的MCP服务器实现。提供静态迷你应用程序，通过UI扩展实现MCP协议。

技术： Cloudflare Workers，Hono，@modelcontextprotocol/sdk

→ 文档

创建webmcp应用程序

交互式CLI，用于通过模板选择构建新的WebMCP应用程序。

技术： Node.js、TypeScript

→ 文档

模板

反应

React+TypeScript+Vite模板，用于构建具有嵌入式UI的生产就绪MCP服务器。

→ 文档

香草

纯HTML/CSS/JavaScript模板，无需构建步骤，非常适合学习。

→ 文档

测试

e2e

Playwright测试套件验证聊天UI和MCP服务器之间的集成。

→ 文档

命令

# Development
pnpm dev                        # Run all apps (chat-ui + mcp-server)
pnpm --filter chat-ui dev       # Chat UI only
pnpm --filter mcp-server dev    # MCP server only

# Templates (run manually from template directories)
cd templates/react && pnpm dev
cd templates/vanilla && pnpm dev

# Build & Quality
pnpm build                      # Build all packages
pnpm typecheck                  # Type-check
pnpm lint                       # Lint all packages
pnpm check                      # Run lint + typecheck

# Testing
pnpm test                       # Run E2E tests
pnpm test:ui                    # Interactive Playwright UI
pnpm test:debug                 # Debug mode

部署

MCP服务器→ Cloudflare Workers

cd apps/mcp-server
pnpm build
pnpm deploy  # or: wrangler deploy

配置 .prod.vars 使用您的工作URL。

聊天界面→ Cloudflare页面

cd apps/chat-ui
pnpm build
wrangler pages deploy dist

配置 .env.production 使用您的MCP服务器URL。

看环境设置.md 详细配置。

文档

入门指南

代理商.md -AI代理的导航中心
贡献.md -开发标准

建筑

建筑.md -设计决策
嵌入式协议.md -WebMCP协议
如何自定义 -创建迷你应用程序

配置

环境设置.md -环境变量
测试.md -测试基础设施

技术栈

Monorepo： Turborepo+pnpm工作区
前端： React 19、TypeScript 5.8、Vite 7
MCP： @modelcontextprotocol/sdk、@mcp用户界面包
WebMCP： @用于双向工具注册的mcp-b包
人工智能： Vercel AI SDK与Anthropic提供商合作
运行时间： Cloudflare Workers+持久对象
测试： 剧作家1.49

贡献

分叉、实验、报告问题、提交改进。

看贡献.md 开发标准。

资源

MCP-UI（用户界面资源）

MCP-UI简介 -MCP UI资源概述
协议细节 -资源类型和实施
服务器SDK（TypeScript） -构建具有UI支持的MCP服务器
客户端SDK -在客户端中渲染UI资源
-源代码和示例

MCP-B（WebMCP/双向工具）

文档：

MCP-B文件 -开始使用WebMCP
快速开始 -在几分钟内运行WebMCP
核心概念 -架构和系统设计
例子 -即用型实现

NPM包：

所有包 -完整的软件包存储库

实时演示和工具：

beatthelankers.com -带有嵌入式iframe的完整应用程序
mcp-ui.mcp-b.ai -实时聊天用户界面演示
mcp-b.ai -交互式示例
MCP-B Chrome扩展程序 -浏览器中的测试工具

规范：

WebMCP规范 -W3C网络机器学习社区小组
WebMCP解释器 -技术方案和API详细信息

模型上下文协议

MCP文件 -正式协议文件
MCP规范 -技术规格
-规范存储库

部署和基础设施

Cloudflare Workers -无服务器运行时
Cloudflare持久对象 -有状态的协调
剧作家 -E2E测试框架

许可证

此项目使用多个许可证：

聊天界面 (应用程序/聊天用户界面/)：AGPL-3.0-参见应用程序/聊天用户界面/许可证
所有其他套餐：Apache-2.0-参见许可证

目录标签

TypeScriptAI代理工作流自动化AI助手本地部署嵌入式应用双向集成动态工具注册WebMCP

接入字段

传输方式（transport，传输协议）

stdio

鉴权方式（authType，认证方式）

none

运行时（runtime，运行环境）

Node.js

来源包（packageName，安装包名）

@mcp-b/create-webmcp-app

工具数量（toolCount，工具数）

0

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

stdionone部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

来源信息

MCP World

mcpworld.com

/detail/f61421513f9f971b640c4dd32f136b10

MCP UI + WebMCP 是一个实现AI助手与嵌入式Web应用之间双向集成的技术解决方案，支持动态工具注册和交互式应用嵌入。

继续浏览同类 MCP

更多AI代理 MCP（18,706）返回 MCP 目录

上一个 MCP

MCP Ui Servers

MCP UI Servers 是一个用于按钮状态管理的服务器集合，提供交互式UI控件和远程连接功能。

下一个 MCP

Mcpulse 106ec26c

MCPLoadTester是一个用于模型上下文协议（MCP）服务器的负载测试工具包，支持使用Apache JMeter等工具进行性能测试。

MCP Ui Webmcp

快速接入

详细介绍

MCP用户界面+WebMCP

现场试用

这有什么作用

快速开始

创建新应用程序（推荐）

或者运行演示

需求

建筑

关键原则：解耦架构

WebMCP与MCP-B

系统架构

完整流程：双向沟通的工具调用

关键组件

聊天UI（父上下文）

嵌入式应用程序（Iframe上下文）

MCP服务器

MCP UI资源

WebMCP工具注册

包裹

应用

聊天用户界面

mcp服务器

创建webmcp应用程序

模板

反应

香草

测试

e2e

命令

部署

MCP服务器→ Cloudflare Workers

聊天界面→ Cloudflare页面

文档

入门指南

建筑

配置

技术栈

贡献

资源

MCP-UI（用户界面资源）

MCP-B（WebMCP/双向工具）

模型上下文协议

部署和基础设施

许可证

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP