webmcp-org/mcp-ui-webmcp

**AI 조수와 임베디드 웹 애플리케이션 간의 양방향 통합 **

빠른 시작 • 아키텍처 • 패키지 • Docs

---

라이브

라이브 채팅 UI: mcp-ui.mcp-b.ai ** 풀 앱 데모:** beattheclankers.com

beattheclankers.com을 방문하여 내장 된 iframe을 사용하여 전체 응용 프로그램을 참조하십시오. MCP-B Chrome Extension을 사용하여 도구를 직접 테스트하십시오.

---

이것은 무엇을

AI Assistant는 대화형 웹 앱을 렌더링하는 도구입니다. 이러한 앱은 AI로 다시 새로운 도구를 등록 할 수 있습니다. 이것은 WebMCP 양방향 도구 등록과 MCP UI 리소스를 결합합니다.

요금:

1. AI 호출 showTicTacToeGame
2. MCP 서버는 iframe과 UI 리소스를 반환합니다.
3. 게임로드 및 등록 tictactoe_move, tictactoe_reset, 등.
4. AI는 지금 동적인 등록한 공구를 사용하여 게임을 할 수 있습니다

이 패턴은 임베디드 응용 프로그램에 대한 작동 : 형태, 시각화, 대화 형 데모, 구성 UI.

빠른 시작

새 앱 만들기 (추천)

우리의 대화 형 CLI를 사용하여 새로운 프로젝트를 비계하십시오:

사이 선택:

• Vanilla - Pure 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