★ 4864 TypeScript Apache-2.0 sse 更新 45分钟前

Ui

UI over MCP. Create next-gen UI experiences with the protocol and SDK!

GitHub 官网

安装配置

暂未识别到可直接复制的 MCP 配置，请查看 GitHub README。后台管理员可以补充配置。

README 摘要

## 📦 Model Context Protocol UI SDK What's mcp-ui? • Core Concepts • Installation • Getting Started • Walkthrough • Examples • Supported Hosts • Security • Roadmap • Contributing • License ---- **`mcp-ui`** pioneered the concept of interactive UI over [MCP](https://modelcontextprotocol.io/introduction), enabling rich web interfaces for AI tools. Alongside Apps SDK, the patterns developed here directly influenced the [MCP Apps](https://github.com/modelcontextprotocol/ext-apps) specification, which standardized UI delivery over the protocol. The `@mcp-ui/*` packages implement the MCP Apps standard. `@mcp-ui/client` is the recommended SDK for MCP Apps Hosts. > *The @mcp-ui/* packages are fully compliant with the MCP Apps specification and ready for production use.* ## 💡 What's `mcp-ui`? `mcp-ui` is an SDK implementing the [MCP Apps](https://github.com/modelcontextprotocol/ext-apps) standard for UI over MCP. It provides: * **`@mcp-ui/server` (TypeScript)**: Create UI resources with `createUIResource`. Works with `registerAppTool` and `registerAppResource` from `@modelcontextprotocol/ext-apps/server`. * **`@mcp-ui/client` (TypeScript)**: Render tool UIs with `AppRenderer` (MCP Apps) or `UIResourceRenderer` (legacy MCP-UI hosts). * **`mcp_ui_server` (Ruby)**: Create UI resources in Ruby. * **`mcp-ui-server` (Python)**: Create UI resources in Python. The MCP Apps pattern links tools to their UIs via `_meta.ui.resourceUri`. Hosts fetch and render the UI alongside tool results. ## ✨ Core Concepts ### MCP Apps Pattern (Recommended) The MCP Apps standard links tools to their UIs via `_meta.ui.resourceUri`: ```ts import { registerAppTool, registerAppResource } from '@modelcontextprotocol/ext-apps/server'; import { createUIResource } from '@mcp-ui/server'; // 1. Create UI resource const widgetUI = await createUIResource({ uri: 'ui://my-server/widget', content: { type: 'rawHtml', htmlString: 'Widget' }, encoding: 'text', }); // 2. Register resource handler registerAppResource(server, 'widget_ui', widgetUI.resource.uri, {}, async () => ({ contents: [widgetUI.resource] })); // 3. Register tool with _meta linking registerAppTool(server, 'show_widget', { description: 'Show widget', inputSchema: { query: z.string() }, _meta: { ui: { resourceUri: widgetUI.resource.uri } } // Links tool → UI }, async ({ query }) => { return { content: [{ type: 'text', text: `Query: ${query}` }] }; }); ``` Hosts detect `_meta.ui.resourceUri`, fetch the UI via `resources/read`, and render it with `AppRenderer`. ### UIResource (Wire Format) The underlying payload for UI content: ```ts interface UIResource { type: 'resource'; resource: { uri: string; // e.g., ui://component/id mimeType: 'text/html;profile=mcp-app'; text?: string; // HTML content blob?: string; // Base64-encoded HTML content }; } ``` * **`uri`**: Unique identifier using `ui://` scheme * **`mimeType`**: `text/html;profile=mcp-app` — the MCP Apps standard MIME type * **`text` vs. `blob`**: Plain text or Base64-encoded content ### Client Components #### AppRenderer (MCP Apps) For MCP Apps hosts, use `AppRenderer` to render tool UIs: ```tsx import { AppRenderer } from '@mcp-ui/client'; function ToolUI({ client, toolName, toolInput, toolResult }) { return ( window.open(url)} onMessage={async (params) => console.log('Message:', params)} /> ); } ``` Key props: -...

Ui

安装配置

README 摘要

相关 MCP

Awesome S

Chrome Devtools

Libre Chat

Playwright

Github

Fast