MCP-UI-Org/mcp-ui - thehardwarestore.ai

── AI DEEP ANALYSIS ──

reviewed by: deepseek/deepseek-v4-flash

MCP-UI is a monorepo SDK implementing the MCP Apps standard for rendering interactive UIs over the Model Context Protocol. It provides server-side tools (in TypeScript, Python, and Ruby) to create UI resources, and a client-side React SDK to render them in sandboxed iframes. The architecture centers on a secure double-iframe proxy pattern that isolates third-party HTML and external URLs, with JSON-RPC communication via AppBridge. The codebase is well-structured with comprehensive tests, semantic release automation, and cloudflare workers example, demonstrating strong engineering practices across multiple languages.

── METRICS ──

RATING8.5/10

QUALITY8.0/10

MAINTENANCEactive

DRIFTlow

CONTRIBUTORS20

VELOCITY0.38

OPEN ISSUES64

CLOSED ISSUES22

LAST COMMIT1 month ago

── TAGS ──

#mcp-apps #model-context-protocol #react-sdk #multi-language-sdk #sandboxed-iframe #developer-tools #ai #llm #mcp #ui #frontend #web

── GITHUB TOPICS ──

ai llm mcp ui frontend web

── DEPENDENCY GRAPH ──

@eslint/js (npm) ^9.25.0

@semantic-release/changelog (npm) ^6.0.3

@semantic-release/commit-analyzer (npm) ^13.0.1

@semantic-release/exec (npm) ^7.1.0

@semantic-release/git (npm) ^10.0.1

@semantic-release/github (npm) ^12.0.2

@semantic-release/npm (npm) ^13.1.2

@semantic-release/release-notes-generator (npm) ^14.1.0

@swc/core (npm) ^1.4.0

@testing-library/jest-dom (npm) ^6.1.5

@testing-library/react (npm) ^14.1.2

@types/jest (npm) ^29.5.11

@types/node (npm) ^22.15.18

@vitejs/plugin-react-swc (npm) ^4.2.2

c8 (npm) ^10.1.3

eslint (npm) ^9.39.1

eslint-config-prettier (npm) ^10.1.8

eslint-plugin-jsx-a11y (npm) ^6.8.0

eslint-plugin-react (npm) ^7.37.5

eslint-plugin-react-hooks (npm) ^7.0.1

globals (npm) ^16.0.0

jsdom (npm) ^25.0.1

prettier (npm) ^3.7.4

prettier-plugin-tailwindcss (npm) ^0.7.2

semantic-release (npm) ^25.0.2

ts-jest (npm) ^29.1.1

ts-node (npm) ^10.9.2

typescript (npm) ^5.9.3

typescript-eslint (npm) ^8.30.1

vite (npm) ^7.2.7

vite-plugin-dts (npm) ^4.5.4

vitepress (npm) ^1.6.4

vitest (npm) ^4.0.15

── FILE BREAKDOWN ──

Files by Type (count)

TypeScript

44

Markdown

41

JSON

30

TSX

13

Other (.png)

12

Python

10

YAML

8

JavaScript

8

Other (.map)

6

Ruby

5

Other (no ext)

4

CSS

4

Files by Type (size)

Other (.png)

1MB

Other (.map)

1MB

JSON

823KB

JavaScript

806KB

YAML

704KB

TypeScript

338KB

Lock File

304KB

Markdown

283KB

TSX

101KB

Python

41KB

Ruby

12KB

CSS

12KB

── KEY FINDINGS: REUSABLE CODE ──

The LLM identified 2 files worth highlighting for reuse:

Manages sandboxed iframe lifecycle for rendering MCP Apps. Handles setup of proxy iframe, CSP injection, message relay between host and guest, and cleanup. This is the core client-side rendering primitive that could be extracted to any project needing secure embeded UI.

file: sdks/typescript/client/src/components/AppFrame.tsx ↗ | tags: #sandboxed-iframe #postmessage-proxy #react-component

Standalone HTML/JS document that acts as a middle iframe for secure cross- orign communication. It relays postMessage from host to guest and back, and registers app-specific event handlers. This pattern can be reused as a generic secure iframe proxy.

file: sdks/typescript/client/scripts/proxy/index.html ↗ | tags: #sandbox-proxy #secure-iframe #message-relay

── HISTORY ──

Last analyzed: 2026-10-17 06:08:11.734047

Next check: 2026-10-24 06:08:10.787932

$ show MCP-UI-Org/mcp-ui