webmcp-org/mcp-ui-webmcp

Директивная интеграция между помощниками ИИ и встроенными веб-приложениями

Быстрый запуск • Архитектура • Пакеты • Документы

Попробуйте жить

Live Chat UI: ** mcp-ui.mcp-b.ai **Полная демоверсия приложения: ** beattheclankers.com

Посетите сайт beattheclankers.com, чтобы увидеть полное приложение со встроенным iframe. Проверьте инструменты самостоятельно, используя расширение MCP-B Chrome.

Что это такое

Ассистенты ИИ используют инструменты, которые отображают интерактивные веб-приложения. Эти приложения могут регистрировать новые инструменты обратно в ИИ. Это сочетает в себе ресурсы пользовательского интерфейса MCP с двунаправленной регистрацией инструментов WebMCP.

Поток:

1. ИИ вызывает showTicTacToeGame
2. MCP-сервер возвращает UI-ресурс с iframe
3. игровые нагрузки и регистры tictactoe_move, tictactoe_reset и т.д.
4. ИИ теперь может играть в игру, используя динамически зарегистрированные инструменты

Этот шаблон работает для любого встроенного приложения: форм, визуализаций, интерактивных демонстраций, пользовательских интерфейсов конфигурации.

Быстрый старт

Создание нового приложения (рекомендуется)

Используйте наш интерактивный CLI для разработки нового проекта:

Выберите между: Vanilla - Чистый HTML/CSS/JavaScript (без шага сборки!) 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