[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-MCP-UI-Org--mcp-ui":3,"tool-MCP-UI-Org--mcp-ui":61},[4,18,26,36,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",149489,2,"2026-04-10T11:32:46",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108322,"2026-04-10T11:39:34",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":32,"last_commit_at":50,"category_tags":51,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[52,13,15,14],"插件",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":32,"last_commit_at":59,"category_tags":60,"status":17},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[52,14],{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":66,"readme_en":67,"readme_zh":68,"quickstart_zh":69,"use_case_zh":70,"hero_image_url":71,"owner_login":72,"owner_name":73,"owner_avatar_url":74,"owner_bio":75,"owner_company":76,"owner_location":76,"owner_email":76,"owner_twitter":76,"owner_website":77,"owner_url":78,"languages":79,"stars":100,"forks":101,"last_commit_at":102,"license":103,"difficulty_score":32,"env_os":104,"env_gpu":105,"env_ram":105,"env_deps":106,"category_tags":114,"github_topics":115,"view_count":32,"oss_zip_url":76,"oss_zip_packed_at":76,"status":17,"created_at":122,"updated_at":123,"faqs":124,"releases":145},6331,"MCP-UI-Org\u002Fmcp-ui","mcp-ui","UI over MCP. Create next-gen UI experiences with the protocol and SDK!","mcp-ui 是一套基于模型上下文协议（MCP）的开发生态工具，旨在让 AI 应用能够轻松拥有丰富、可交互的图形用户界面。它解决了传统 AI 工具仅能输出纯文本、缺乏直观视觉反馈的痛点，通过标准化协议将后端逻辑与前端展示无缝连接，使开发者能构建出“下一代”的沉浸式 AI 体验。\n\n这套工具非常适合各类软件开发者使用，无论是熟悉 TypeScript、Python 还是 Ruby 的工程师，都能利用其提供的多语言 SDK 快速上手。其核心亮点在于率先提出并实现了\"MCP Apps\"标准模式：开发者只需在注册 AI 工具时添加简单的元数据链接，即可将特定工具与独立的 UI 资源关联。当用户触发工具时，宿主程序会自动获取并渲染对应的网页界面，无需手动处理复杂的通信逻辑。\n\n作为该领域的先行者，mcp-ui 不仅提供了完善的客户端渲染和服务端资源创建能力，更直接推动了 MCP 官方规范的演进。对于希望突破命令行限制，为 AI 助手添加图表、表单或自定义控制面板的开发团队而言，mcp-ui 是一个成熟且生产就绪的技术选择。","## 📦 Model Context Protocol UI SDK\n\n\u003Cp align=\"center\">\n  \u003Cimg width=\"250\" alt=\"image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMCP-UI-Org_mcp-ui_readme_b5a0c5035089.png\" \u002F>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@mcp-ui\u002Fserver\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@mcp-ui\u002Fserver?label=server&color=green\" alt=\"Server Version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@mcp-ui\u002Fclient\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@mcp-ui\u002Fclient?label=client&color=blue\" alt=\"Client Version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Frubygems.org\u002Fgems\u002Fmcp_ui_server\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgem\u002Fv\u002Fmcp_ui_server\" alt=\"Ruby Server SDK Version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fpypi.org\u002Fproject\u002Fmcp-ui-server\u002F\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fpypi\u002Fv\u002Fmcp-ui-server?label=python&color=yellow\" alt=\"Python Server SDK Version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FCEAG4KW7ZH\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1401195140436983879?logo=discord&label=discord\" alt=\"Discord\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgitmcp.io\u002Fidosal\u002Fmcp-ui\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https:\u002F\u002Fgitmcp.io\u002Fbadge\u002Fidosal\u002Fmcp-ui\" alt=\"MCP Documentation\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"#-whats-mcp-ui\">What's mcp-ui?\u003C\u002Fa> •\n  \u003Ca href=\"#-core-concepts\">Core Concepts\u003C\u002Fa> •\n  \u003Ca href=\"#-installation\">Installation\u003C\u002Fa> •\n  \u003Ca href=\"#-getting-started\">Getting Started\u003C\u002Fa> •\n  \u003Ca href=\"#-walkthrough\">Walkthrough\u003C\u002Fa> •\n  \u003Ca href=\"#-examples\">Examples\u003C\u002Fa> •\n  \u003Ca href=\"#-supported-hosts\">Supported Hosts\u003C\u002Fa> •\n  \u003Ca href=\"#-security\">Security\u003C\u002Fa> •\n  \u003Ca href=\"#-roadmap\">Roadmap\u003C\u002Fa> •\n  \u003Ca href=\"#-contributing\">Contributing\u003C\u002Fa> •\n  \u003Ca href=\"#-license\">License\u003C\u002Fa>\n\u003C\u002Fp>\n\n----\n\n**`mcp-ui`** pioneered the concept of interactive UI over [MCP](https:\u002F\u002Fmodelcontextprotocol.io\u002Fintroduction), enabling rich web interfaces for AI tools. Alongside Apps SDK, the patterns developed here directly influenced the [MCP Apps](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps) specification, which standardized UI delivery over the protocol.\n\nThe `@mcp-ui\u002F*` packages implement the MCP Apps standard. `@mcp-ui\u002Fclient` is the recommended SDK for MCP Apps Hosts.\n\n> *The @mcp-ui\u002F* packages are fully compliant with the MCP Apps specification and ready for production use.*\n\n\u003Cp align=\"center\">\n  \u003Cvideo src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F7180c822-2dd9-4f38-9d3e-b67679509483\">\u003C\u002Fvideo>\n\u003C\u002Fp>\n\n## 💡 What's `mcp-ui`?\n\n`mcp-ui` is an SDK implementing the [MCP Apps](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps) standard for UI over MCP. It provides:\n\n* **`@mcp-ui\u002Fserver` (TypeScript)**: Create UI resources with `createUIResource`. Works with `registerAppTool` and `registerAppResource` from `@modelcontextprotocol\u002Fext-apps\u002Fserver`.\n* **`@mcp-ui\u002Fclient` (TypeScript)**: Render tool UIs with `AppRenderer` (MCP Apps) or `UIResourceRenderer` (legacy MCP-UI hosts).\n* **`mcp_ui_server` (Ruby)**: Create UI resources in Ruby.\n* **`mcp-ui-server` (Python)**: Create UI resources in Python.\n\nThe MCP Apps pattern links tools to their UIs via `_meta.ui.resourceUri`. Hosts fetch and render the UI alongside tool results.\n\n## ✨ Core Concepts\n\n### MCP Apps Pattern (Recommended)\n\nThe MCP Apps standard links tools to their UIs via `_meta.ui.resourceUri`:\n\n```ts\nimport { registerAppTool, registerAppResource } from '@modelcontextprotocol\u002Fext-apps\u002Fserver';\nimport { createUIResource } from '@mcp-ui\u002Fserver';\n\n\u002F\u002F 1. Create UI resource\nconst widgetUI = await createUIResource({\n  uri: 'ui:\u002F\u002Fmy-server\u002Fwidget',\n  content: { type: 'rawHtml', htmlString: '\u003Ch1>Widget\u003C\u002Fh1>' },\n  encoding: 'text',\n});\n\n\u002F\u002F 2. Register resource handler\nregisterAppResource(server, 'widget_ui', widgetUI.resource.uri, {}, async () => ({\n  contents: [widgetUI.resource]\n}));\n\n\u002F\u002F 3. Register tool with _meta linking\nregisterAppTool(server, 'show_widget', {\n  description: 'Show widget',\n  inputSchema: { query: z.string() },\n  _meta: { ui: { resourceUri: widgetUI.resource.uri } }  \u002F\u002F Links tool → UI\n}, async ({ query }) => {\n  return { content: [{ type: 'text', text: `Query: ${query}` }] };\n});\n```\n\nHosts detect `_meta.ui.resourceUri`, fetch the UI via `resources\u002Fread`, and render it with `AppRenderer`.\n\n### UIResource (Wire Format)\n\nThe underlying payload for UI content:\n\n```ts\ninterface UIResource {\n  type: 'resource';\n  resource: {\n    uri: string;       \u002F\u002F e.g., ui:\u002F\u002Fcomponent\u002Fid\n    mimeType: 'text\u002Fhtml;profile=mcp-app';\n    text?: string;      \u002F\u002F HTML content\n    blob?: string;      \u002F\u002F Base64-encoded HTML content\n  };\n}\n```\n\n* **`uri`**: Unique identifier using `ui:\u002F\u002F` scheme\n* **`mimeType`**: `text\u002Fhtml;profile=mcp-app` — the MCP Apps standard MIME type\n* **`text` vs. `blob`**: Plain text or Base64-encoded content\n\n### Client Components\n\n#### AppRenderer (MCP Apps)\n\nFor MCP Apps hosts, use `AppRenderer` to render tool UIs:\n\n```tsx\nimport { AppRenderer } from '@mcp-ui\u002Fclient';\n\nfunction ToolUI({ client, toolName, toolInput, toolResult }) {\n  return (\n    \u003CAppRenderer\n      client={client}\n      toolName={toolName}\n      sandbox={{ url: sandboxUrl }}\n      toolInput={toolInput}\n      toolResult={toolResult}\n      onOpenLink={async ({ url }) => window.open(url)}\n      onMessage={async (params) => console.log('Message:', params)}\n    \u002F>\n  );\n}\n```\n\nKey props:\n- **`client`**: Optional MCP client for automatic resource fetching\n- **`toolName`**: Tool name to render UI for\n- **`sandbox`**: Sandbox configuration with proxy URL\n- **`toolInput`** \u002F **`toolResult`**: Tool arguments and results\n- **`onOpenLink`** \u002F **`onMessage`**: Handlers for UI requests\n\n#### UIResourceRenderer (Legacy MCP-UI)\n\nFor legacy hosts that embed resources in tool responses:\n\n```tsx\nimport { UIResourceRenderer } from '@mcp-ui\u002Fclient';\n\n\u003CUIResourceRenderer\n  resource={mcpResource.resource}\n  onUIAction={(action) => console.log('Action:', action)}\n\u002F>\n```\n\nProps:\n- **`resource`**: Resource object with `uri`, `mimeType`, and content (`text`\u002F`blob`)\n- **`onUIAction`**: Callback for handling tool, prompt, link, notify, and intent actions\n\nAlso available as a Web Component:\n```html\n\u003Cui-resource-renderer\n  resource='{ \"mimeType\": \"text\u002Fhtml\", \"text\": \"\u003Ch2>Hello!\u003C\u002Fh2>\" }'\n>\u003C\u002Fui-resource-renderer>\n```\n\n### Supported Resource Types\n\n#### HTML (`text\u002Fhtml;profile=mcp-app`)\n\nRendered using the internal `\u003CHTMLResourceRenderer \u002F>` component, which displays content inside an `\u003Ciframe>`. This is suitable for self-contained HTML.\n\n*   **`mimeType`**: `text\u002Fhtml;profile=mcp-app` (MCP Apps standard)\n\n### UI Action\n\nUI snippets must be able to interact with the agent. In `mcp-ui`, this is done by hooking into events sent from the UI snippet and reacting to them in the host (see `onUIAction` prop). For example, an HTML may trigger a tool call when a button is clicked by sending an event which will be caught handled by the client.\n\n\n### Platform Adapters\n\nMCP-UI SDKs includes adapter support for host-specific implementations, enabling your open MCP-UI widgets to work seamlessly regardless of host. Adapters automatically translate between MCP-UI's `postMessage` protocol and host-specific APIs. Over time, as hosts become compatible with the open spec, these adapters wouldn't be needed.\n\n#### Available Adapters\n\n##### Apps SDK Adapter\n\nFor Apps SDK environments (e.g., ChatGPT), this adapter translates MCP-UI protocol to Apps SDK API calls (e.g., `window.openai`).\n\n**How it Works:**\n- Intercepts MCP-UI `postMessage` calls from your widgets\n- Translates them to appropriate Apps SDK API calls\n- Handles bidirectional communication (tools, prompts, state management)\n- Works transparently - your existing MCP-UI code continues to work without changes\n\n**Usage:**\n\n```ts\nimport { createUIResource } from '@mcp-ui\u002Fserver';\n\nconst htmlResource = await createUIResource({\n  uri: 'ui:\u002F\u002Fgreeting\u002F1',\n  content: {\n    type: 'rawHtml',\n    htmlString: `\n      \u003Cbutton onclick=\"window.parent.postMessage({ type: 'tool', payload: { toolName: 'myTool', params: {} } }, '*')\">\n        Call Tool\n      \u003C\u002Fbutton>\n    `\n  },\n  encoding: 'text',\n});\n```\n\n\n## 🏗️ Installation\n\n### TypeScript\n\n```bash\n# using npm\nnpm install @mcp-ui\u002Fserver @mcp-ui\u002Fclient\n\n# or pnpm\npnpm add @mcp-ui\u002Fserver @mcp-ui\u002Fclient\n\n# or yarn\nyarn add @mcp-ui\u002Fserver @mcp-ui\u002Fclient\n```\n\n### Ruby\n\n```bash\ngem install mcp_ui_server\n```\n\n### Python\n\n```bash\n# using pip\npip install mcp-ui-server\n\n# or uv\nuv add mcp-ui-server\n```\n\n## 🚀 Getting Started\n\nYou can use [GitMCP](https:\u002F\u002Fgitmcp.io\u002Fidosal\u002Fmcp-ui) to give your IDE access to `mcp-ui`'s latest documentation!\n\n### TypeScript (MCP Apps Pattern)\n\n1. **Server-side**: Create a tool with UI using `_meta.ui.resourceUri`\n\n   ```ts\n   import { McpServer } from '@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fmcp.js';\n   import { registerAppTool, registerAppResource } from '@modelcontextprotocol\u002Fext-apps\u002Fserver';\n   import { createUIResource } from '@mcp-ui\u002Fserver';\n   import { z } from 'zod';\n\n   const server = new McpServer({ name: 'my-server', version: '1.0.0' });\n\n   \u002F\u002F Create UI resource\n   const widgetUI = await createUIResource({\n     uri: 'ui:\u002F\u002Fmy-server\u002Fwidget',\n     content: { type: 'rawHtml', htmlString: '\u003Ch1>Interactive Widget\u003C\u002Fh1>' },\n     encoding: 'text',\n   });\n\n   \u002F\u002F Register resource handler\n   registerAppResource(server, 'widget_ui', widgetUI.resource.uri, {}, async () => ({\n     contents: [widgetUI.resource]\n   }));\n\n   \u002F\u002F Register tool with _meta linking\n   registerAppTool(server, 'show_widget', {\n     description: 'Show widget',\n     inputSchema: { query: z.string() },\n     _meta: { ui: { resourceUri: widgetUI.resource.uri } }\n   }, async ({ query }) => {\n     return { content: [{ type: 'text', text: `Query: ${query}` }] };\n   });\n   ```\n\n2. **Client-side**: Render tool UIs with `AppRenderer`\n\n   ```tsx\n   import { AppRenderer } from '@mcp-ui\u002Fclient';\n\n   function ToolUI({ client, toolName, toolInput, toolResult }) {\n     return (\n       \u003CAppRenderer\n         client={client}\n         toolName={toolName}\n         sandbox={{ url: sandboxUrl }}\n         toolInput={toolInput}\n         toolResult={toolResult}\n         onOpenLink={async ({ url }) => window.open(url)}\n         onMessage={async (params) => console.log('Message:', params)}\n       \u002F>\n     );\n   }\n   ```\n\n### Legacy MCP-UI Pattern\n\nFor hosts that don't support MCP Apps yet:\n\n   ```tsx\n   import { UIResourceRenderer } from '@mcp-ui\u002Fclient';\n\n   \u003CUIResourceRenderer\n     resource={mcpResource.resource}\n     onUIAction={(action) => console.log('Action:', action)}\n   \u002F>\n   ```\n\n### Python\n\n**Server-side**: Build your UI resources\n\n   ```python\n   from mcp_ui_server import create_ui_resource\n\n   # Inline HTML\n   html_resource = create_ui_resource({\n     \"uri\": \"ui:\u002F\u002Fgreeting\u002F1\",\n     \"content\": { \"type\": \"rawHtml\", \"htmlString\": \"\u003Cp>Hello, from Python!\u003C\u002Fp>\" },\n     \"encoding\": \"text\",\n   })\n\n   # External URL\n   external_url_resource = create_ui_resource({\n     \"uri\": \"ui:\u002F\u002Fgreeting\u002F2\",\n     \"content\": { \"type\": \"externalUrl\", \"iframeUrl\": \"https:\u002F\u002Fexample.com\" },\n     \"encoding\": \"text\",\n   })\n   ```\n\n### Ruby\n\n**Server-side**: Build your UI resources\n\n   ```ruby\n   require 'mcp_ui_server'\n\n   # Inline HTML\n   html_resource = McpUiServer.create_ui_resource(\n     uri: 'ui:\u002F\u002Fgreeting\u002F1',\n     content: { type: :raw_html, htmlString: '\u003Cp>Hello, from Ruby!\u003C\u002Fp>' },\n     encoding: :text\n   )\n\n   # External URL\n   external_url_resource = McpUiServer.create_ui_resource(\n     uri: 'ui:\u002F\u002Fgreeting\u002F2',\n     content: { type: :external_url, iframeUrl: 'https:\u002F\u002Fexample.com' },\n     encoding: :text\n   )\n\n   # remote-dom\n   remote_dom_resource = McpUiServer.create_ui_resource(\n     uri: 'ui:\u002F\u002Fremote-component\u002Faction-button',\n     content: {\n       type: :remote_dom,\n       script: \"\n        const button = document.createElement('ui-button');\n        button.setAttribute('label', 'Click me from Ruby!');\n        button.addEventListener('press', () => {\n          window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'ruby-remote-dom' } } }, '*');\n        });\n        root.appendChild(button);\n        \",\n       framework: :react,\n     },\n     encoding: :text\n   )\n   ```\n\n## 🚶 Walkthrough\n\nFor a detailed, simple, step-by-step guide on how to integrate `mcp-ui` into your own server, check out the full server walkthroughs on the [mcp-ui documentation site](https:\u002F\u002Fmcpui.dev):\n\n- **[TypeScript Server Walkthrough](https:\u002F\u002Fmcpui.dev\u002Fguide\u002Fserver\u002Ftypescript\u002Fwalkthrough)**\n- **[Ruby Server Walkthrough](https:\u002F\u002Fmcpui.dev\u002Fguide\u002Fserver\u002Fruby\u002Fwalkthrough)**\n- **[Python Server Walkthrough](https:\u002F\u002Fmcpui.dev\u002Fguide\u002Fserver\u002Fpython\u002Fwalkthrough)**\n\nThese guides will show you how to add a `mcp-ui` endpoint to an existing server, create tools that return UI resources, and test your setup with the `ui-inspector`!\n\n## 🌍 Examples\n\n**Client Examples**\n* [Goose](https:\u002F\u002Fgithub.com\u002Fblock\u002Fgoose) - open source AI agent that supports `mcp-ui`.\n* [LibreChat](https:\u002F\u002Fgithub.com\u002Fdanny-avila\u002FLibreChat) - enhanced ChatGPT clone that supports `mcp-ui`.\n* [ui-inspector](https:\u002F\u002Fgithub.com\u002Fidosal\u002Fui-inspector) - inspect local `mcp-ui`-enabled servers.\n* [MCP-UI Chat](https:\u002F\u002Fgithub.com\u002Fidosal\u002Fscira-mcp-ui-chat) - interactive chat built with the `mcp-ui` client. Check out the [hosted version](https:\u002F\u002Fscira-mcp-chat-git-main-idosals-projects.vercel.app\u002F)!\n* MCP-UI RemoteDOM Playground (`examples\u002Fremote-dom-demo`) - local demo app to test RemoteDOM resources\n* MCP-UI Web Component Demo (`examples\u002Fwc-demo`) - local demo app to test the Web Component integration in hosts\n\n**Server Examples**\n* **TypeScript**: A [full-featured server](examples\u002Fserver) that is deployed to a hosted environment for easy testing.\n  * **[`typescript-server-demo`](.\u002Fexamples\u002Ftypescript-server-demo)**: A simple Typescript server that demonstrates how to generate UI resources.\n  * **server**: A [full-featured Typescript server](examples\u002Fserver) that is deployed to a hosted Cloudflare environment for easy testing.\n    * **HTTP Streaming**: `https:\u002F\u002Fremote-mcp-server-authless.idosalomon.workers.dev\u002Fmcp`\n    * **SSE**: `https:\u002F\u002Fremote-mcp-server-authless.idosalomon.workers.dev\u002Fsse`\n* **Ruby**: A barebones [demo server](\u002Fexamples\u002Fruby-server-demo) that shows how to use `mcp_ui_server` and `mcp` gems together.\n* **Python**: A simple [demo server](\u002Fexamples\u002Fpython-server-demo) that shows how to use the `mcp-ui-server` Python package.\n* [XMCP](https:\u002F\u002Fgithub.com\u002Fbasementstudio\u002Fxmcp\u002Ftree\u002Fmain\u002Fexamples\u002Fmcp-ui) - Typescript MCP framework with `mcp-ui` starter example.\n\nDrop those URLs into any MCP-compatible host to see `mcp-ui` in action. For a supported local inspector, see the [ui-inspector](https:\u002F\u002Fgithub.com\u002Fidosal\u002Fui-inspector).\n\n## 💻 Supported Hosts\n\nThe `@mcp-ui\u002F*` packages work with both MCP Apps hosts and legacy MCP-UI hosts.\n\n### MCP Apps Hosts\n\nThese hosts implement the [MCP Apps specification](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps) and support tools with `_meta.ui.resourceUri`:\n\n| Host | Notes |\n| :--- | :---- |\n| [Claude](https:\u002F\u002Fwww.claude.ai\u002F) | ✅ | ✅ |\n| [VSCode](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fvscode\u002Fissues\u002F260218) | |\n| [Postman](https:\u002F\u002Fwww.postman.com\u002F) | |\n| [Goose](https:\u002F\u002Fblock.github.io\u002Fgoose\u002F) | |\n| [MCPJam](https:\u002F\u002Fwww.mcpjam.com\u002F) | |\n| [LibreChat](https:\u002F\u002Fwww.librechat.ai\u002F) | |\n| [mcp-use](https:\u002F\u002Fmcp-use.com\u002F) | |\n| [Smithery](https:\u002F\u002Fsmithery.ai\u002Fplayground) | |\n\n### Legacy MCP-UI Hosts\n\nThese hosts expect UI resources embedded directly in tool responses:\n\n| Host | Rendering | UI Actions | Notes |\n| :--- | :-------: | :--------: | :---- |\n| [Nanobot](https:\u002F\u002Fwww.nanobot.ai\u002F) | ✅ | ✅ |\n| [MCPJam](https:\u002F\u002Fwww.mcpjam.com\u002F) | ✅ | ✅ |\n| [Postman](https:\u002F\u002Fwww.postman.com\u002F) | ✅ | ⚠️ | |\n| [Goose](https:\u002F\u002Fblock.github.io\u002Fgoose\u002F) | ✅ | ⚠️ | |\n| [LibreChat](https:\u002F\u002Fwww.librechat.ai\u002F) | ✅ | ⚠️ | |\n| [Smithery](https:\u002F\u002Fsmithery.ai\u002Fplayground) | ✅ | ❌ | |\n| [fast-agent](https:\u002F\u002Ffast-agent.ai\u002Fmcp\u002Fmcp-ui\u002F) | ✅ | ❌ | |\n\n### Hosts Requiring Adapters\n\n| Host | Protocol | Notes |\n| :--- | :------: | :---- |\n| [ChatGPT](https:\u002F\u002Fchatgpt.com\u002F) | Apps SDK | [Guide](https:\u002F\u002Fmcpui.dev\u002Fguide\u002Fapps-sdk) |\n\n**Legend:** ✅ Supported · ⚠️ Partial · ❌ Not yet supported\n\n## 🔒 Security\nHost and user security is one of `mcp-ui`'s primary concerns. In all content types, the remote code is executed in a sandboxed iframe.\n\n## 🛣️ Roadmap\n\n- [X] Add online playground\n- [X] Expand UI Action API (beyond tool calls)\n- [X] Support Web Components\n- [X] Support Remote-DOM\n- [ ] Add component libraries (in progress)\n- [ ] Add SDKs for additional programming languages (in progress; Ruby, Python available)\n- [ ] Support additional frontend frameworks\n- [ ] Explore providing a UI SDK (in addition to the client and server one)\n- [ ] Add declarative UI content type\n- [ ] Support generative UI?\n      \n## Core Team\n`mcp-ui` is a project by [Ido Salomon](https:\u002F\u002Fx.com\u002Fidosal1), in collaboration with [Liad Yosef](https:\u002F\u002Fx.com\u002Fliadyosef).\n\n## 🤝 Contributing\n\nContributions, ideas, and bug reports are welcome! See the [contribution guidelines](https:\u002F\u002Fgithub.com\u002Fidosal\u002Fmcp-ui\u002Fblob\u002Fmain\u002F.github\u002FCONTRIBUTING.md) to get started.\n\n## 📄 License\n\nApache License 2.0 © [The MCP-UI Authors](LICENSE)\n\n## Disclaimer\n\nThis project is provided \"as is\", without warranty of any kind. The `mcp-ui` authors and contributors shall not be held liable for any damages, losses, or issues arising from the use of this software. Use at your own risk.\n","## 📦 模型上下文协议 UI SDK\n\n\u003Cp align=\"center\">\n  \u003Cimg width=\"250\" alt=\"image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMCP-UI-Org_mcp-ui_readme_b5a0c5035089.png\" \u002F>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@mcp-ui\u002Fserver\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@mcp-ui\u002Fserver?label=server&color=green\" alt=\"服务器版本\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@mcp-ui\u002Fclient\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@mcp-ui\u002Fclient?label=client&color=blue\" alt=\"客户端版本\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Frubygems.org\u002Fgems\u002Fmcp_ui_server\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgem\u002Fv\u002Fmcp_ui_server\" alt=\"Ruby 服务器 SDK 版本\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fpypi.org\u002Fproject\u002Fmcp-ui-server\u002F\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fpypi\u002Fv\u002Fmcp-ui-server?label=python&color=yellow\" alt=\"Python 服务器 SDK 版本\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FCEAG4KW7ZH\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1401195140436983879?logo=discord&label=discord\" alt=\"Discord\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgitmcp.io\u002Fidosal\u002Fmcp-ui\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https:\u002F\u002Fgitmcp.io\u002Fbadge\u002Fidosal\u002Fmcp-ui\" alt=\"MCP 文档\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"#-whats-mcp-ui\">什么是 mcp-ui？\u003C\u002Fa> •\n  \u003Ca href=\"#-core-concepts\">核心概念\u003C\u002Fa> •\n  \u003Ca href=\"#-installation\">安装\u003C\u002Fa> •\n  \u003Ca href=\"#-getting-started\">快速上手\u003C\u002Fa> •\n  \u003Ca href=\"#-walkthrough\">使用指南\u003C\u002Fa> •\n  \u003Ca href=\"#-examples\">示例\u003C\u002Fa> •\n  \u003Ca href=\"#-supported-hosts\">支持的宿主\u003C\u002Fa> •\n  \u003Ca href=\"#-security\">安全性\u003C\u002Fa> •\n  \u003Ca href=\"#-roadmap\">路线图\u003C\u002Fa> •\n  \u003Ca href=\"#-contributing\">贡献\u003C\u002Fa> •\n  \u003Ca href=\"#-license\">许可证\u003C\u002Fa>\n\u003C\u002Fp>\n\n----\n\n**`mcp-ui`** 首创了基于 [MCP](https:\u002F\u002Fmodelcontextprotocol.io\u002Fintroduction) 的交互式 UI 概念，为 AI 工具提供了丰富的 Web 界面。与 Apps SDK 一起，这里开发的模式直接影响了 [MCP Apps](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps) 规范，该规范标准化了通过协议传递 UI 的方式。\n\n`@mcp-ui\u002F*` 包实现了 MCP Apps 标准。`@mcp-ui\u002Fclient` 是推荐用于 MCP Apps 宿主的 SDK。\n\n> *`@mcp-ui\u002F*` 包完全符合 MCP Apps 规范，可直接用于生产环境。*\n\n\u003Cp align=\"center\">\n  \u003Cvideo src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F7180c822-2dd9-4f38-9d3e-b67679509483\">\u003C\u002Fvideo>\n\u003C\u002Fp>\n\n## 💡 什么是 `mcp-ui`？\n\n`mcp-ui` 是一个实现 [MCP Apps](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps) 标准的 SDK，用于在 MCP 上构建 UI。它提供：\n\n* **`@mcp-ui\u002Fserver` (TypeScript)**：使用 `createUIResource` 创建 UI 资源。可与 `@modelcontextprotocol\u002Fext-apps\u002Fserver` 中的 `registerAppTool` 和 `registerAppResource` 配合使用。\n* **`@mcp-ui\u002Fclient` (TypeScript)**：使用 `AppRenderer`（MCP Apps）或 `UIResourceRenderer`（旧版 MCP-UI 宿主）渲染工具 UI。\n* **`mcp_ui_server` (Ruby)**：用 Ruby 创建 UI 资源。\n* **`mcp-ui-server` (Python)**：用 Python 创建 UI 资源。\n\nMCP Apps 模式通过 `_meta.ui.resourceUri` 将工具与其 UI 关联起来。宿主会获取并渲染 UI，同时显示工具的结果。\n\n## ✨ 核心概念\n\n### MCP Apps 模式（推荐）\n\nMCP Apps 标准通过 `_meta.ui.resourceUri` 将工具与其 UI 关联：\n\n```ts\nimport { registerAppTool, registerAppResource } from '@modelcontextprotocol\u002Fext-apps\u002Fserver';\nimport { createUIResource } from '@mcp-ui\u002Fserver';\n\n\u002F\u002F 1. 创建 UI 资源\nconst widgetUI = await createUIResource({\n  uri: 'ui:\u002F\u002Fmy-server\u002Fwidget',\n  content: { type: 'rawHtml', htmlString: '\u003Ch1>Widget\u003C\u002Fh1>' },\n  encoding: 'text',\n});\n\n\u002F\u002F 2. 注册资源处理器\nregisterAppResource(server, 'widget_ui', widgetUI.resource.uri, {}, async () => ({\n  contents: [widgetUI.resource]\n}));\n\n\u002F\u002F 3. 注册带有 _meta 链接的工具\nregisterAppTool(server, 'show_widget', {\n  description: '显示小部件',\n  inputSchema: { query: z.string() },\n  _meta: { ui: { resourceUri: widgetUI.resource.uri } }  \u002F\u002F 将工具 → UI 链接\n}, async ({ query }) => {\n  return { content: [{ type: 'text', text: `查询: ${query}` }] };\n});\n```\n\n宿主检测 `_meta.ui.resourceUri`，通过 `resources\u002Fread` 获取 UI，并使用 `AppRenderer` 渲染。\n\n### UIResource（数据格式）\n\nUI 内容的底层有效载荷：\n\n```ts\ninterface UIResource {\n  type: 'resource';\n  resource: {\n    uri: string;       \u002F\u002F 例如：ui:\u002F\u002Fcomponent\u002Fid\n    mimeType: 'text\u002Fhtml;profile=mcp-app';\n    text?: string;      \u002F\u002F HTML 内容\n    blob?: string;      \u002F\u002F Base64 编码的 HTML 内容\n  };\n}\n```\n\n* **`uri`**：使用 `ui:\u002F\u002F` 方案的唯一标识符\n* **`mimeType`**：`text\u002Fhtml;profile=mcp-app` —— MCP Apps 标准 MIME 类型\n* **`text` vs. `blob`**：纯文本或 Base64 编码的内容\n\n### 客户端组件\n\n#### AppRenderer（MCP Apps）\n\n对于 MCP Apps 宿主，可以使用 `AppRenderer` 来渲染工具 UI：\n\n```tsx\nimport { AppRenderer } from '@mcp-ui\u002Fclient';\n\nfunction ToolUI({ client, toolName, toolInput, toolResult }) {\n  return (\n    \u003CAppRenderer\n      client={client}\n      toolName={toolName}\n      sandbox={{ url: sandboxUrl }}\n      toolInput={toolInput}\n      toolResult={toolResult}\n      onOpenLink={async ({ url }) => window.open(url)}\n      onMessage={async (params) => console.log('消息:', params)}\n    \u002F>\n  );\n}\n```\n\n关键属性：\n- **`client`**：可选的 MCP 客户端，用于自动获取资源\n- **`toolName`**：要渲染 UI 的工具名称\n- **`sandbox`**：包含代理 URL 的沙盒配置\n- **`toolInput`** \u002F **`toolResult`**：工具的参数和结果\n- **`onOpenLink`** \u002F **`onMessage`**：处理 UI 请求的回调函数\n\n#### UIResourceRenderer（旧版 MCP-UI）\n\n对于将资源嵌入工具响应中的旧版宿主：\n\n```tsx\nimport { UIResourceRenderer } from '@mcp-ui\u002Fclient';\n\n\u003CUIResourceRenderer\n  resource={mcpResource.resource}\n  onUIAction={(action) => console.log('动作:', action)}\n\u002F>\n```\n\n属性：\n- **`resource`**：包含 `uri`、`mimeType` 和内容（`text`\u002F`blob`）的资源对象\n- **`onUIAction`**：用于处理工具、提示、链接、通知和意图等操作的回调函数\n\n也可作为 Web 组件使用：\n```html\n\u003Cui-resource-renderer\n  resource='{ \"mimeType\": \"text\u002Fhtml\", \"text\": \"\u003Ch2>Hello!\u003C\u002Fh2>\" }'\n>\u003C\u002Fui-resource-renderer>\n```\n\n### 支持的资源类型\n\n#### HTML (`text\u002Fhtml;profile=mcp-app`)\n\n使用内部 `\u003CHTMLResourceRenderer \u002F>` 组件渲染，该组件会在 `\u003Ciframe>` 中显示内容。这适用于自包含的 HTML。\n\n*   **`mimeType`**：`text\u002Fhtml;profile=mcp-app`（MCP Apps 标准）\n\n### UI 行动\n\nUI 片段必须能够与代理进行交互。在 `mcp-ui` 中，这是通过监听 UI 片段发送的事件并在宿主中作出响应来实现的（参见 `onUIAction` 属性）。例如，当用户点击按钮时，HTML 可能会触发工具调用，方法是发送一个事件，该事件会被客户端捕获并处理。\n\n### 平台适配器\n\nMCP-UI SDK 包含对特定宿主实现的适配器支持，使您的开放 MCP-UI 小部件能够在任何宿主环境下无缝运行。适配器会自动在 MCP-UI 的 `postMessage` 协议与宿主特定 API 之间进行转换。随着时间推移，当宿主逐渐兼容该开放规范时，这些适配器将不再需要。\n\n#### 可用适配器\n\n##### Apps SDK 适配器\n\n对于 Apps SDK 环境（例如 ChatGPT），此适配器会将 MCP-UI 协议转换为 Apps SDK API 调用（例如 `window.openai`）。\n\n**工作原理：**\n- 拦截来自您小部件的 MCP-UI `postMessage` 调用\n- 将其转换为相应的 Apps SDK API 调用\n- 处理双向通信（工具调用、提示词、状态管理）\n- 透明运行——您现有的 MCP-UI 代码无需修改即可继续工作\n\n**使用示例：**\n\n```ts\nimport { createUIResource } from '@mcp-ui\u002Fserver';\n\nconst htmlResource = await createUIResource({\n  uri: 'ui:\u002F\u002Fgreeting\u002F1',\n  content: {\n    type: 'rawHtml',\n    htmlString: `\n      \u003Cbutton onclick=\"window.parent.postMessage({ type: 'tool', payload: { toolName: 'myTool', params: {} } }, '*')\">\n        调用工具\n      \u003C\u002Fbutton>\n    `\n  },\n  encoding: 'text',\n});\n```\n\n\n## 🏗️ 安装\n\n### TypeScript\n\n```bash\n# 使用 npm\nnpm install @mcp-ui\u002Fserver @mcp-ui\u002Fclient\n\n# 或 pnpm\npnpm add @mcp-ui\u002Fserver @mcp-ui\u002Fclient\n\n# 或 yarn\nyarn add @mcp-ui\u002Fserver @mcp-ui\u002Fclient\n```\n\n### Ruby\n\n```bash\ngem install mcp_ui_server\n```\n\n### Python\n\n```bash\n# 使用 pip\npip install mcp-ui-server\n\n# 或 uv\nuv add mcp-ui-server\n```\n\n## 🚀 入门\n\n您可以使用 [GitMCP](https:\u002F\u002Fgitmcp.io\u002Fidosal\u002Fmcp-ui) 让您的 IDE 访问 `mcp-ui` 的最新文档！\n\n### TypeScript（MCP Apps 模式）\n\n1. **服务器端**：使用 `_meta.ui.resourceUri` 创建带有 UI 的工具\n\n   ```ts\n   import { McpServer } from '@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fmcp.js';\n   import { registerAppTool, registerAppResource } from '@modelcontextprotocol\u002Fext-apps\u002Fserver';\n   import { createUIResource } from '@mcp-ui\u002Fserver';\n   import { z } from 'zod';\n\n   const server = new McpServer({ name: 'my-server', version: '1.0.0' });\n\n   \u002F\u002F 创建 UI 资源\n   const widgetUI = await createUIResource({\n     uri: 'ui:\u002F\u002Fmy-server\u002Fwidget',\n     content: { type: 'rawHtml', htmlString: '\u003Ch1>交互式小部件\u003C\u002Fh1>' },\n     encoding: 'text',\n   });\n\n   \u002F\u002F 注册资源处理器\n   registerAppResource(server, 'widget_ui', widgetUI.resource.uri, {}, async () => ({\n     contents: [widgetUI.resource]\n   }));\n\n   \u002F\u002F 注册带 _meta 链接的工具\n   registerAppTool(server, 'show_widget', {\n     description: '显示小部件',\n     inputSchema: { query: z.string() },\n     _meta: { ui: { resourceUri: widgetUI.resource.uri } }\n   }, async ({ query }) => {\n     return { content: [{ type: 'text', text: `查询: ${query}` }] };\n   });\n   ```\n\n2. **客户端**：使用 `AppRenderer` 渲染工具 UI\n\n   ```tsx\n   import { AppRenderer } from '@mcp-ui\u002Fclient';\n\n   function ToolUI({ client, toolName, toolInput, toolResult }) {\n     return (\n       \u003CAppRenderer\n         client={client}\n         toolName={toolName}\n         sandbox={{ url: sandboxUrl }}\n         toolInput={toolInput}\n         toolResult={toolResult}\n         onOpenLink={async ({ url }) => window.open(url)}\n         onMessage={async (params) => console.log('消息:', params)}\n       \u002F>\n     );\n   }\n   ```\n\n### 旧版 MCP-UI 模式\n\n对于尚不支持 MCP Apps 的宿主：\n\n   ```tsx\n   import { UIResourceRenderer } from '@mcp-ui\u002Fclient';\n\n   \u003CUIResourceRenderer\n     resource={mcpResource.resource}\n     onUIAction={(action) => console.log('动作:', action)}\n   \u002F>\n   ```\n\n### Python\n\n**服务器端**：构建您的 UI 资源\n\n   ```python\n   from mcp_ui_server import create_ui_resource\n\n   # 内联 HTML\n   html_resource = create_ui_resource({\n     \"uri\": \"ui:\u002F\u002Fgreeting\u002F1\",\n     \"content\": { \"type\": \"rawHtml\", \"htmlString\": \"\u003Cp>你好，来自 Python！\u003C\u002Fp>\" },\n     \"encoding\": \"text\",\n   })\n\n   # 外部 URL\n   external_url_resource = create_ui_resource({\n     \"uri\": \"ui:\u002F\u002Fgreeting\u002F2\",\n     \"content\": { \"type\": \"externalUrl\", \"iframeUrl\": \"https:\u002F\u002Fexample.com\" },\n     \"encoding\": \"text\",\n   })\n   ```\n\n### Ruby\n\n**服务器端**：构建您的 UI 资源\n\n   ```ruby\n   require 'mcp_ui_server'\n\n   # 内联 HTML\n   html_resource = McpUiServer.create_ui_resource(\n     uri: 'ui:\u002F\u002Fgreeting\u002F1',\n     content: { type: :raw_html, htmlString: '\u003Cp>你好，来自 Ruby！\u003C\u002Fp>' },\n     encoding: :text\n   )\n\n   # 外部 URL\n   external_url_resource = McpUiServer.create_ui_resource(\n     uri: 'ui:\u002F\u002Fgreeting\u002F2',\n     content: { type: :external_url, iframeUrl: 'https:\u002F\u002Fexample.com' },\n     encoding: :text\n   )\n\n   # remote-dom\n   remote_dom_resource = McpUiServer.create_ui_resource(\n     uri: 'ui:\u002F\u002Fremote-component\u002Faction-button',\n     content: {\n       type: :remote_dom,\n       script: \"\n        const button = document.createElement('ui-button');\n        button.setAttribute('label', '点击我，来自 Ruby！');\n        button.addEventListener('press', () => {\n          window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'ruby-remote-dom' } } }, '*');\n        });\n        root.appendChild(button);\n        \",\n       framework: :react,\n     },\n     encoding: :text\n   )\n   ```\n\n## 🚶 演示教程\n\n如需详细了解如何将 `mcp-ui` 集成到您自己的服务器中，请访问 [mcp-ui 文档网站](https:\u002F\u002Fmcpui.dev) 上的完整服务器教程：\n\n- **[TypeScript 服务器教程](https:\u002F\u002Fmcpui.dev\u002Fguide\u002Fserver\u002Ftypescript\u002Fwalkthrough)**\n- **[Ruby 服务器教程](https:\u002F\u002Fmcpui.dev\u002Fguide\u002Fserver\u002Fruby\u002Fwalkthrough)**\n- **[Python 服务器教程](https:\u002F\u002Fmcpui.dev\u002Fguide\u002Fserver\u002Fpython\u002Fwalkthrough)**\n\n这些指南将向您展示如何在现有服务器上添加 `mcp-ui` 端点、创建返回 UI 资源的工具，并使用 `ui-inspector` 测试您的设置！\n\n## 🌍 示例\n\n**客户端示例**\n* [Goose](https:\u002F\u002Fgithub.com\u002Fblock\u002Fgoose) - 开源 AI 代理，支持 `mcp-ui`。\n* [LibreChat](https:\u002F\u002Fgithub.com\u002Fdanny-avila\u002FLibreChat) - 增强版 ChatGPT 克隆，支持 `mcp-ui`。\n* [ui-inspector](https:\u002F\u002Fgithub.com\u002Fidosal\u002Fui-inspector) - 检查本地启用 `mcp-ui` 的服务器。\n* [MCP-UI Chat](https:\u002F\u002Fgithub.com\u002Fidosal\u002Fscira-mcp-ui-chat) - 使用 `mcp-ui` 客户端构建的交互式聊天。请查看[托管版本](https:\u002F\u002Fscira-mcp-chat-git-main-idosals-projects.vercel.app\u002F)！\n* MCP-UI RemoteDOM 演示（`examples\u002Fremote-dom-demo`）- 用于测试 RemoteDOM 资源的本地演示应用。\n* MCP-UI Web 组件演示（`examples\u002Fwc-demo`）- 用于测试宿主中 Web 组件集成的本地演示应用。\n\n**服务器示例**\n* **TypeScript**: 一个[功能齐全的服务器](examples\u002Fserver)，已部署到托管环境以便于测试。\n  * **[`typescript-server-demo`](.\u002Fexamples\u002Ftypescript-server-demo)**：一个简单的 TypeScript 服务器，演示如何生成 UI 资源。\n  * **server**: 一个[功能齐全的 TypeScript 服务器](examples\u002Fserver)，已部署到 Cloudflare 托管环境以方便测试。\n    * **HTTP 流式传输**: `https:\u002F\u002Fremote-mcp-server-authless.idosalomon.workers.dev\u002Fmcp`\n    * **SSE**: `https:\u002F\u002Fremote-mcp-server-authless.idosalomon.workers.dev\u002Fsse`\n* **Ruby**: 一个基础的[演示服务器](\u002Fexamples\u002Fruby-server-demo)，展示如何将 `mcp_ui_server` 和 `mcp` gem 结合使用。\n* **Python**: 一个简单的[演示服务器](\u002Fexamples\u002Fpython-server-demo)，展示如何使用 `mcp-ui-server` Python 包。\n* [XMCP](https:\u002F\u002Fgithub.com\u002Fbasementstudio\u002Fxmcp\u002Ftree\u002Fmain\u002Fexamples\u002Fmcp-ui) - 带有 `mcp-ui` 入门示例的 TypeScript MCP 框架。\n\n将这些 URL 放入任何兼容 MCP 的宿主中，即可查看 `mcp-ui` 的实际效果。如需支持的本地检查工具，请参阅 [ui-inspector](https:\u002F\u002Fgithub.com\u002Fidosal\u002Fui-inspector)。\n\n## 💻 支持的宿主\n\n`@mcp-ui\u002F*` 包既适用于 MCP Apps 宿主，也适用于旧版 MCP-UI 宿主。\n\n### MCP Apps 宿主\n\n这些宿主实现了[MCP Apps 规范](https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps)，并支持带有 `_meta.ui.resourceUri` 的工具：\n\n| 宿主 | 备注 |\n| :--- | :---- |\n| [Claude](https:\u002F\u002Fwww.claude.ai\u002F) | ✅ | ✅ |\n| [VSCode](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fvscode\u002Fissues\u002F260218) | |\n| [Postman](https:\u002F\u002Fwww.postman.com\u002F) | |\n| [Goose](https:\u002F\u002Fblock.github.io\u002Fgoose\u002F) | |\n| [MCPJam](https:\u002F\u002Fwww.mcpjam.com\u002F) | |\n| [LibreChat](https:\u002F\u002Fwww.librechat.ai\u002F) | |\n| [mcp-use](https:\u002F\u002Fmcp-use.com\u002F) | |\n| [Smithery](https:\u002F\u002Fsmithery.ai\u002Fplayground) | |\n\n### 旧版 MCP-UI 宿主\n\n这些宿主期望在工具响应中直接嵌入 UI 资源：\n\n| 宿主 | 渲染 | UI 操作 | 备注 |\n| :--- | :-------: | :--------: | :---- |\n| [Nanobot](https:\u002F\u002Fwww.nanobot.ai\u002F) | ✅ | ✅ |\n| [MCPJam](https:\u002F\u002Fwww.mcpjam.com\u002F) | ✅ | ✅ |\n| [Postman](https:\u002F\u002Fwww.postman.com\u002F) | ✅ | ⚠️ | |\n| [Goose](https:\u002F\u002Fblock.github.io\u002Fgoose\u002F) | ✅ | ⚠️ | |\n| [LibreChat](https:\u002F\u002Fwww.librechat.ai\u002F) | ✅ | ⚠️ | |\n| [Smithery](https:\u002F\u002Fsmithery.ai\u002Fplayground) | ✅ | ❌ | |\n| [fast-agent](https:\u002F\u002Ffast-agent.ai\u002Fmcp\u002Fmcp-ui\u002F) | ✅ | ❌ | |\n\n### 需要适配器的宿主\n\n| 宿主 | 协议 | 备注 |\n| :--- | :------: | :---- |\n| [ChatGPT](https:\u002F\u002Fchatgpt.com\u002F) | Apps SDK | [指南](https:\u002F\u002Fmcpui.dev\u002Fguide\u002Fapps-sdk) |\n\n**图例:** ✅ 支持 · ⚠️ 部分支持 · ❌ 尚未支持\n\n## 🔒 安全性\n宿主和用户的安全性是 `mcp-ui` 的首要关注点之一。在所有内容类型中，远程代码均在沙箱 iframe 中执行。\n\n## 🛣️ 路线图\n\n- [X] 添加在线 Playground\n- [X] 扩展 UI 操作 API（超越工具调用）\n- [X] 支持 Web 组件\n- [X] 支持 Remote-DOM\n- [ ] 添加组件库（进行中）\n- [ ] 为其他编程语言添加 SDK（进行中；Ruby、Python 已可用）\n- [ ] 支持更多前端框架\n- [ ] 探索提供 UI SDK（除了客户端和服务器 SDK 之外）\n- [ ] 添加声明式 UI 内容类型\n- [ ] 支持生成式 UI？\n\n## 核心团队\n`mcp-ui` 是由 [Ido Salomon](https:\u002F\u002Fx.com\u002Fidosal1) 与 [Liad Yosef](https:\u002F\u002Fx.com\u002Fliadyosef) 合作开展的项目。\n\n## 🤝 贡献\n欢迎贡献代码、提出想法以及报告问题！请参阅[贡献指南](https:\u002F\u002Fgithub.com\u002Fidosal\u002Fmcp-ui\u002Fblob\u002Fmain\u002F.github\u002FCONTRIBUTING.md)开始参与。\n\n## 📄 许可证\nApache 许可证 2.0 © [MCP-UI 作者](LICENSE)\n\n## 免责声明\n本项目按“原样”提供，不提供任何形式的保证。`mcp-ui` 的作者及贡献者对因使用本软件而产生的任何损害、损失或问题概不负责。请自行承担风险使用。","# mcp-ui 快速上手指南\n\n`mcp-ui` 是一个基于 [MCP (Model Context Protocol)](https:\u002F\u002Fmodelcontextprotocol.io) 标准的 SDK，旨在为 AI 工具提供丰富的交互式 Web 界面。它实现了 **MCP Apps** 规范，允许开发者将 UI 组件与后端工具关联，并在支持的主机（Host）中渲染。\n\n## 环境准备\n\n在开始之前，请确保你的开发环境满足以下要求：\n\n*   **操作系统**: Windows, macOS, 或 Linux\n*   **运行时依赖** (根据你选择的语言任选其一):\n    *   **Node.js**: v18+ (推荐用于 TypeScript\u002FJavaScript 开发)\n    *   **Python**: v3.9+\n    *   **Ruby**: v3.0+\n*   **包管理器**: npm, pnpm, yarn, pip, uv 或 gem\n*   **前置知识**: 了解 MCP 协议基础概念及基本的 Web 开发知识 (HTML\u002FJS)。\n\n## 安装步骤\n\n根据你的技术栈选择对应的安装命令。\n\n### TypeScript \u002F JavaScript\n推荐使用 `pnpm` 或 `npm` 安装服务端和客户端 SDK：\n\n```bash\n# 使用 npm\nnpm install @mcp-ui\u002Fserver @mcp-ui\u002Fclient\n\n# 或使用 pnpm\npnpm add @mcp-ui\u002Fserver @mcp-ui\u002Fclient\n\n# 或使用 yarn\nyarn add @mcp-ui\u002Fserver @mcp-ui\u002Fclient\n```\n\n### Python\n\n```bash\n# 使用 pip\npip install mcp-ui-server\n\n# 或使用 uv (推荐)\nuv add mcp-ui-server\n```\n\n### Ruby\n\n```bash\ngem install mcp_ui_server\n```\n\n## 基本使用\n\n`mcp-ui` 的核心工作流分为两步：**服务端创建带 UI 的工具** 和 **客户端渲染 UI**。以下是基于推荐的 **MCP Apps 模式** 的最简示例。\n\n### 1. 服务端：创建关联 UI 的工具 (TypeScript)\n\n在服务端，你需要创建一个 UI 资源，并将其 URI 通过 `_meta.ui.resourceUri` 绑定到工具定义中。\n\n```ts\nimport { McpServer } from '@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fmcp.js';\nimport { registerAppTool, registerAppResource } from '@modelcontextprotocol\u002Fext-apps\u002Fserver';\nimport { createUIResource } from '@mcp-ui\u002Fserver';\nimport { z } from 'zod';\n\nconst server = new McpServer({ name: 'my-server', version: '1.0.0' });\n\n\u002F\u002F 1. 创建 UI 资源 (例如一个简单的 HTML 组件)\nconst widgetUI = await createUIResource({\n  uri: 'ui:\u002F\u002Fmy-server\u002Fwidget',\n  content: { type: 'rawHtml', htmlString: '\u003Ch1>Interactive Widget\u003C\u002Fh1>\u003Cbutton id=\"btn\">Click Me\u003C\u002Fbutton>' },\n  encoding: 'text',\n});\n\n\u002F\u002F 2. 注册资源处理器，使主机可以获取该 UI\nregisterAppResource(server, 'widget_ui', widgetUI.resource.uri, {}, async () => ({\n  contents: [widgetUI.resource]\n}));\n\n\u002F\u002F 3. 注册工具，并通过 _meta 链接到上述 UI\nregisterAppTool(server, 'show_widget', {\n  description: 'Show an interactive widget',\n  inputSchema: { query: z.string() },\n  _meta: { ui: { resourceUri: widgetUI.resource.uri } } \u002F\u002F 关键：建立工具与 UI 的链接\n}, async ({ query }) => {\n  return { content: [{ type: 'text', text: `Query received: ${query}` }] };\n});\n```\n\n### 2. 客户端：渲染 UI (React\u002FTypeScript)\n\n在支持 MCP Apps 的主机应用中，使用 `AppRenderer` 组件自动获取并渲染工具关联的界面。\n\n```tsx\nimport { AppRenderer } from '@mcp-ui\u002Fclient';\n\nfunction ToolUI({ client, toolName, toolInput, toolResult }) {\n  return (\n    \u003CAppRenderer\n      client={client}                \u002F\u002F MCP 客户端实例\n      toolName={toolName}            \u002F\u002F 要渲染的工具名称\n      sandbox={{ url: sandboxUrl }}  \u002F\u002F 沙箱配置 (代理 URL)\n      toolInput={toolInput}          \u002F\u002F 工具输入参数\n      toolResult={toolResult}        \u002F\u002F 工具执行结果\n      onOpenLink={async ({ url }) => window.open(url)} \u002F\u002F 处理链接打开\n      onMessage={async (params) => console.log('Message:', params)} \u002F\u002F 处理 UI 消息\n    \u002F>\n  );\n}\n```\n\n### 其他语言示例 (Python)\n\n如果你使用 Python 编写服务端逻辑，创建 UI 资源的代码如下：\n\n```python\nfrom mcp_ui_server import create_ui_resource\n\n# 创建内联 HTML 资源\nhtml_resource = create_ui_resource({\n  \"uri\": \"ui:\u002F\u002Fgreeting\u002F1\",\n  \"content\": { \"type\": \"rawHtml\", \"htmlString\": \"\u003Cp>Hello, from Python!\u003C\u002Fp>\" },\n  \"encoding\": \"text\",\n})\n\n# 或者引用外部 URL\nexternal_url_resource = create_ui_resource({\n  \"uri\": \"ui:\u002F\u002Fgreeting\u002F2\",\n  \"content\": { \"type\": \"externalUrl\", \"iframeUrl\": \"https:\u002F\u002Fexample.com\" },\n  \"encoding\": \"text\",\n})\n```\n\n### 交互说明\nUI 组件内部可以通过 `postMessage` 与主机通信。例如，在 HTML 中触发工具调用：\n\n```html\n\u003Cbutton onclick=\"window.parent.postMessage({ \n  type: 'tool', \n  payload: { toolName: 'myTool', params: {} } \n}, '*')\">\n  Call Tool\n\u003C\u002Fbutton>\n```\n\n主机将通过 `onMessage` 回调捕获此事件并执行相应操作。","某电商数据团队正在开发一个内部 AI 助手，帮助运营人员实时查询库存并调整商品展示策略。\n\n### 没有 mcp-ui 时\n- **交互割裂**：AI 只能返回纯文本或 JSON 数据，运营人员需复制结果到后台系统手动操作，流程繁琐且易出错。\n- **缺乏可视化**：复杂的库存趋势或销售预测数据仅以文字描述呈现，难以直观理解业务波动。\n- **开发成本高**：若要嵌入图表或按钮，开发者需单独搭建 Web 服务并处理前后端通信，无法复用 MCP 协议能力。\n- **响应延迟**：用户在聊天窗口与外部系统间反复切换，导致决策链条拉长，错过最佳营销时机。\n\n### 使用 mcp-ui 后\n- **原生交互体验**：通过 `createUIResource` 直接在对话中渲染可交互的 HTML 组件，运营人员点击按钮即可一键补货或下架商品。\n- **动态数据可视**：利用 `_meta.ui.resourceUri` 将工具输出关联至富界面，自动展示库存热力图与销量曲线，关键信息一目了然。\n- **协议级集成**：基于 MCP Apps 标准，前端渲染器（`AppRenderer`）自动拉取并展示 UI，无需额外开发独立后端服务。\n- **闭环决策效率**：从“查询 - 分析 - 执行”全流程在对话框内完成，大幅缩短操作路径，提升突发状况响应速度。\n\nmcp-ui 通过将标准化工具调用升级为沉浸式图形界面，让 AI 助手真正具备了“手眼协调”的业务执行力。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FMCP-UI-Org_mcp-ui_012b11fc.png","MCP-UI-Org","MCP-UI","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FMCP-UI-Org_f648c921.png","Interactive UI over MCP",null,"mcpui.dev","https:\u002F\u002Fgithub.com\u002FMCP-UI-Org",[80,84,88,92,96],{"name":81,"color":82,"percentage":83},"TypeScript","#3178c6",69,{"name":85,"color":86,"percentage":87},"Python","#3572A5",20,{"name":89,"color":90,"percentage":91},"Ruby","#701516",6.5,{"name":93,"color":94,"percentage":95},"HTML","#e34c26",2.4,{"name":97,"color":98,"percentage":99},"JavaScript","#f1e05a",2.1,4613,344,"2026-04-10T11:55:10","Apache-2.0","","未说明",{"notes":107,"python":105,"dependencies":108},"该工具是一个用于在 MCP（Model Context Protocol）之上构建交互式 UI 的 SDK，支持 TypeScript、Ruby 和 Python。它不依赖 GPU 或特定操作系统，主要通过 npm、gem 或 pip 安装。核心功能是通过 _meta.ui.resourceUri 将工具与 UI 资源关联，并使用 AppRenderer 或 UIResourceRenderer 进行渲染。支持 HTML 资源和外部 URL 嵌入，并提供平台适配器以兼容不同宿主环境（如 ChatGPT）。",[109,110,111,112,113],"@mcp-ui\u002Fserver","@mcp-ui\u002Fclient","@modelcontextprotocol\u002Fext-apps","mcp_ui_server (Ruby)","mcp-ui-server (Python)",[35,14,15,13],[116,117,118,119,120,121],"ai","llm","mcp","ui","frontend","web","2026-03-27T02:49:30.150509","2026-04-11T03:24:35.530914",[125,130,135,140],{"id":126,"question_zh":127,"answer_zh":128,"source_url":129},28668,"如何在子组件准备好时主动请求渲染数据（render data），而不是依赖父组件的自动推送？","从版本 5.12.0 开始，支持通过发送 `ui-request-render-data` 消息来主动请求渲染数据。这解决了之前依赖 `ui-lifecycle-iframe-ready` 触发推送可能导致的时序问题。你可以使用现有的工具函数（如 `sendMcpMessage`）来实现：\n\n```ts\nconst renderData = await sendMcpMessage(\n\t'ui-request-render-data',\n\t{},\n\t{ schema: renderDataSchema },\n)\n```\n\n这样可以在组件完全就绪后按需获取数据，甚至可以在后续阶段再次请求。","https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F106",{"id":131,"question_zh":132,"answer_zh":133,"source_url":134},28669,"如何通过 postMessage 调用工具（tool calls）并获取返回值或处理错误？","早期的实现中，通过 `postMessage` 发送类型为 `tool` 的消息无法直接获取返回值。解决方案是扩展协议以支持基于 `messageId` 的请求 - 响应模式：\n\n1. **Iframe 端（发起调用）**：生成唯一的 `messageId`，将其存储在映射表中，并发送包含该 ID 的消息。监听 `ui-message-response` 类型的事件来接收结果或错误。\n2. **Host 端（处理调用）**：收到消息后先发送 `ui-message-received` 确认，执行工具逻辑后，通过 `ui-message-response` 将结果或错误连同 `messageId` 发回给 Iframe。\n\n这种模式允许实现正确的加载状态、成功\u002F失败反馈以及异步错误处理。","https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F82",{"id":136,"question_zh":137,"answer_zh":138,"source_url":139},28670,"在 v5.6.0 版本中遇到 'Module not found: Can't resolve @mcp-ui\u002Fclient' 错误该如何解决？","这是 v5.6.0 版本的一个已知构建问题。解决方法如下：\n\n1. **升级版本**：该问题已在 v5.6.2 版本中修复，请将依赖升级到 `@mcp-ui\u002Fclient@5.6.2` 或更高版本。\n2. **本地开发环境**：如果你在使用 monorepo (workspace) 进行本地开发，确保你处于最新的 `main` 分支。如果 `workspace:*` 链接仍然失效，可以尝试临时将 `package.json` 中的版本指定为具体版本号（如 `\"5.6.2\"`），然后重新运行 `pnpm install`。","https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F61",{"id":141,"question_zh":142,"answer_zh":143,"source_url":144},28671,"文档网站中出现 404 错误页面（如 usage-examples）怎么办？","部分文档页面（如 `\u002Fguide\u002Fserver\u002Fusage-examples` 和 `\u002Fguide\u002Fclient\u002Fusage-examples`）曾出现 404 错误。该问题已在后续版本中修复：\n\n- 对于 `@mcp-ui\u002Fclient`，修复包含在 v5.8.0 及 v1.0.0-alpha.1 版本中。\n- 对于 `@mcp-ui\u002Fserver`，修复包含在 v1.0.0-alpha.1 版本中。\n\n请确保你访问的是最新部署的文档网站，或者检查你的本地文档构建是否使用了包含这些修复的版本。","https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F78",[146,151,156,161,166,171,176,181,186,191,196,201,206,211,216,221,226,231,236,241],{"id":147,"version":148,"summary_zh":149,"released_at":150},197573,"client\u002Fv7.0.0","# [7.0.0](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fclient\u002Fv6.1.1...client\u002Fv7.0.0) (2026-03-12)\n\n\n### 错误修复\n\n* 由于重大变更而升级主版本号（[#187](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F187)）（[2223e76](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F2223e76b229559ae6f39d63dd581a08b52e35acd)）\n\n\n### 重大变更\n\n* 由于语义化发布的问题，上一次提交未能正确升级主版本号。","2026-03-12T00:52:52",{"id":152,"version":153,"summary_zh":154,"released_at":155},197574,"client\u002Fv6.1.1","## [6.1.1](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fclient\u002Fv6.1.0...client\u002Fv6.1.1) (2026-03-12)\n\n\n### 修复的 bug\n\n* 提升版本以移除旧版支持 ([#186](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F186)) ([0a75453](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F0a754533c92b6e9e317bda03383fc2c2745b37c7))\n\n\n\n","2026-03-12T00:44:44",{"id":157,"version":158,"summary_zh":159,"released_at":160},197575,"server\u002Fv6.1.0","# [6.1.0](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fserver\u002Fv6.0.1...server\u002Fv6.1.0) (2026-02-13)\n\n\n### 功能特性\n\n* 支持实验性消息 ([#176](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F176)) ([327e4d9](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F327e4d9e6771eceb42f8823ae864e6758f371970))\n\n\n\n","2026-02-13T00:56:48",{"id":162,"version":163,"summary_zh":164,"released_at":165},197576,"client\u002Fv6.1.0","# [6.1.0](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fclient\u002Fv6.0.0...client\u002Fv6.1.0) (2026-02-13)\n\n\n### 功能\n\n* 支持实验性消息 ([#176](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F176)) ([327e4d9](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F327e4d9e6771eceb42f8823ae864e6758f371970))\n\n\n\n","2026-02-13T00:55:56",{"id":167,"version":168,"summary_zh":169,"released_at":170},197577,"server\u002Fv6.0.1","## [6.0.1](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fserver\u002Fv6.0.0...server\u002Fv6.0.1) (2026-02-06)\n\n\n### 错误修复\n\n* 触发 MCP Apps 客户端发布 ([#173](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F173)) ([b0c0659](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fb0c0659700b493a0083d0de12958f276e4c37715))\n\n\n\n","2026-02-06T16:33:25",{"id":172,"version":173,"summary_zh":174,"released_at":175},197578,"client\u002Fv6.0.0","# [6.0.0](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fclient\u002Fv5.18.0...client\u002Fv6.0.0) (2026-01-26)\n\n\n### Bug 修复\n\n* 触发 MCP Apps 客户端发布 ([#173](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F173)) ([b0c0659](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fb0c0659700b493a0083d0de12958f276e4c37715))\n\n\n### 功能新增\n\n* mcp-ui -> mcp apps! ([#172](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F172)) ([93a6e22](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F93a6e225808894cac3206504cf15c481f88ed540))\n\n\n### 破坏性变更\n\n* 移除了废弃的内容类型，更改了 MIME 类型，更新了文档等。\n\n\n","2026-01-26T01:54:27",{"id":177,"version":178,"summary_zh":179,"released_at":180},197579,"server\u002Fv6.0.0","# [6.0.0](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fserver\u002Fv5.17.0...server\u002Fv6.0.0) (2026-01-26)\n\n\n### 功能\n\n* mcp-ui -> mcp 应用！([#172](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F172)) ([93a6e22](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F93a6e225808894cac3206504cf15c481f88ed540))\n\n\n### 重大变更\n\n* 移除了已废弃的内容类型，更改了 MIME 类型，更新了文档等。\n\n\n\n","2026-01-26T01:26:03",{"id":182,"version":183,"summary_zh":184,"released_at":185},197580,"client\u002Fv5.18.0-alpha.3","# [5.18.0-alpha.3](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fclient\u002Fv5.18.0-alpha.2...client\u002Fv5.18.0-alpha.3) (2025-12-22)\n\n\n### 问题修复\n\n* 触发发布 ([cfcbf06](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fcfcbf06dc7782304006961116f4e1f057a492459))\n\n\n\n","2025-12-22T21:19:14",{"id":187,"version":188,"summary_zh":189,"released_at":190},197581,"server\u002Fv5.17.0-alpha.2","# [5.17.0-alpha.2](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fserver\u002Fv5.17.0-alpha.1...server\u002Fv5.17.0-alpha.2) (2025-12-20)\n\n\n### Bug修复\n\n* 向WC实现中添加connectedMoveCallback（[#170](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F170)）（[5ac4734](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F5ac4734078ff56e213e7a57029fd612638abb0b4)）\n\n\n\n","2025-12-20T17:36:37",{"id":192,"version":193,"summary_zh":194,"released_at":195},197582,"client\u002Fv5.18.0-alpha.2","# [5.18.0-alpha.2](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fclient\u002Fv5.18.0-alpha.1...client\u002Fv5.18.0-alpha.2) (2025-12-20)\n\n\n### Bug 修复\n\n* 向 WC 实现中添加 connectedMoveCallback ([#170](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F170)) ([5ac4734](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F5ac4734078ff56e213e7a57029fd612638abb0b4))\n\n\n\n","2025-12-20T17:35:46",{"id":197,"version":198,"summary_zh":199,"released_at":200},197583,"client\u002Fv5.17.3","## [5.17.3](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fclient\u002Fv5.17.2...client\u002Fv5.17.3) (2025-12-20)\n\n\n### Bug Fixes\n\n* add connectedMoveCallback to the WC implementation ([#170](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F170)) ([5ac4734](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F5ac4734078ff56e213e7a57029fd612638abb0b4))\n\n\n\n","2025-12-20T17:10:50",{"id":202,"version":203,"summary_zh":204,"released_at":205},197584,"client\u002Fv5.17.2","## [5.17.2](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fclient\u002Fv5.17.1...client\u002Fv5.17.2) (2025-12-20)\n\n\n### Bug Fixes\n\n* **client:** use type-only imports for @modelcontextprotocol\u002Fsdk types ([#157](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F157)) ([d84cb3e](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fd84cb3e217dfa90f038a8fbe64b4ffd0e0a1bc3f))\n* revert externalUrl adapter for compatibility ([#159](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F159)) ([3c5289a](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F3c5289a5e59812f556bc2bb9e67c3ce2e3ce764e))\n* trigger TS release ([e28d1f6](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fe28d1f65cd5f26e46801480995e178ee50c31e51))\n* update adapter to latest MCP Apps spec ([#163](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F163)) ([e342034](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fe3420348098fe716f45b2182bc8c8d3358714035))\n* update MCP Apps adapter mimetype ([#162](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F162)) ([c91e533](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fc91e5331b68c65de2347b16766a5711e05985e68))\n* update ui\u002Fmessage to pass an array ([#167](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F167)) ([80cf222](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F80cf22290ff5e2f981be839f74705454483c21b5))\n\n\n\n","2025-12-20T13:55:40",{"id":207,"version":208,"summary_zh":209,"released_at":210},197585,"server\u002Fv5.17.0-alpha.1","# [5.17.0-alpha.1](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fserver\u002Fv5.16.3...server\u002Fv5.17.0-alpha.1) (2025-12-18)\n\n\n### Features\n\n* **client:** expose MCP request handlers and AppBridge ref ([3cf3c37](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F3cf3c3731eaf05c7b3d235f7dd30f100fa2e16bb))\n* **client:** make Client optional with onReadResource alternative ([fece80e](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Ffece80e99c4e39de57444ac1dbf865830680fdbe))\n* use ext-apps branch with setter-based MCP forwarding handlers ([a312e52](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fa312e52141c1396068e07f5f4ad634de831604fe))\n\n\n\n","2025-12-18T19:32:34",{"id":212,"version":213,"summary_zh":214,"released_at":215},197586,"client\u002Fv5.18.0-alpha.1","# [5.18.0-alpha.1](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fclient\u002Fv5.17.1...client\u002Fv5.18.0-alpha.1) (2025-12-18)\n\n\n### Bug Fixes\n\n* **client:** use type-only imports for @modelcontextprotocol\u002Fsdk types ([#157](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F157)) ([d84cb3e](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fd84cb3e217dfa90f038a8fbe64b4ffd0e0a1bc3f))\n* revert externalUrl adapter for compatibility ([#159](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F159)) ([3c5289a](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F3c5289a5e59812f556bc2bb9e67c3ce2e3ce764e))\n* trigger TS release ([e28d1f6](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fe28d1f65cd5f26e46801480995e178ee50c31e51))\n* update adapter to latest MCP Apps spec ([#163](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F163)) ([e342034](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fe3420348098fe716f45b2182bc8c8d3358714035))\n* update MCP Apps adapter mimetype ([#162](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F162)) ([c91e533](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fc91e5331b68c65de2347b16766a5711e05985e68))\n* update ui\u002Fmessage to pass an array ([#167](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F167)) ([80cf222](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F80cf22290ff5e2f981be839f74705454483c21b5))\n\n\n### Features\n\n* **client:** expose MCP request handlers and AppBridge ref ([3cf3c37](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F3cf3c3731eaf05c7b3d235f7dd30f100fa2e16bb))\n* **client:** make Client optional with onReadResource alternative ([fece80e](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Ffece80e99c4e39de57444ac1dbf865830680fdbe))\n* use ext-apps branch with setter-based MCP forwarding handlers ([a312e52](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fa312e52141c1396068e07f5f4ad634de831604fe))\n\n\n\n","2025-12-18T19:31:07",{"id":217,"version":218,"summary_zh":219,"released_at":220},197587,"server\u002Fv5.16.3","## [5.16.3](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fserver\u002Fv5.16.2...server\u002Fv5.16.3) (2025-12-18)\n\n\n### Bug Fixes\n\n* **client:** use type-only imports for @modelcontextprotocol\u002Fsdk types ([#157](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F157)) ([d84cb3e](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fd84cb3e217dfa90f038a8fbe64b4ffd0e0a1bc3f))\n* trigger TS release ([e28d1f6](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fe28d1f65cd5f26e46801480995e178ee50c31e51))\n* update adapter to latest MCP Apps spec ([#163](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F163)) ([e342034](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fe3420348098fe716f45b2182bc8c8d3358714035))\n* update MCP Apps adapter mimetype ([#162](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F162)) ([c91e533](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002Fc91e5331b68c65de2347b16766a5711e05985e68))\n* update ui\u002Fmessage to pass an array ([#167](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F167)) ([80cf222](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F80cf22290ff5e2f981be839f74705454483c21b5))\n\n\n\n","2025-12-18T17:12:38",{"id":222,"version":223,"summary_zh":224,"released_at":225},197588,"server\u002Fv5.16.2","## [5.16.2](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fserver\u002Fv5.16.1...server\u002Fv5.16.2) (2025-12-08)\n\n\n### Bug Fixes\n\n* revert externalUrl adapter for compatibility ([#159](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F159)) ([3c5289a](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F3c5289a5e59812f556bc2bb9e67c3ce2e3ce764e))\n\n\n\n","2025-12-08T00:48:10",{"id":227,"version":228,"summary_zh":229,"released_at":230},197589,"server\u002Fv5.16.1","## [5.16.1](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fserver\u002Fv5.16.0...server\u002Fv5.16.1) (2025-12-01)\n\n\n### Bug Fixes\n\n* use document.write in proxy sandbox ([#156](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F156)) ([447f582](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F447f582105a0889ee47d912925d7f02034fc39a9))\n\n\n\n","2025-12-01T00:10:58",{"id":232,"version":233,"summary_zh":234,"released_at":235},197590,"client\u002Fv5.17.1","## [5.17.1](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fclient\u002Fv5.17.0...client\u002Fv5.17.1) (2025-12-01)\n\n\n### Bug Fixes\n\n* use document.write in proxy sandbox ([#156](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fissues\u002F156)) ([447f582](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F447f582105a0889ee47d912925d7f02034fc39a9))\n\n\n\n","2025-12-01T00:10:04",{"id":237,"version":238,"summary_zh":239,"released_at":240},197591,"server\u002Fv5.16.0","# [5.16.0](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fserver\u002Fv5.15.0...server\u002Fv5.16.0) (2025-11-30)\n\n\n### Features\n\n* externalUrl adapter ([5a1e4de](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F5a1e4deeeda9ae0120d17b5abdf9096edf52054f))\n\n\n\n","2025-11-30T22:37:10",{"id":242,"version":243,"summary_zh":244,"released_at":245},197592,"client\u002Fv5.17.0","# [5.17.0](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcompare\u002Fclient\u002Fv5.16.0...client\u002Fv5.17.0) (2025-11-30)\n\n\n### Features\n\n* externalUrl adapter ([5a1e4de](https:\u002F\u002Fgithub.com\u002FMCP-UI-Org\u002Fmcp-ui\u002Fcommit\u002F5a1e4deeeda9ae0120d17b5abdf9096edf52054f))\n\n\n\n","2025-11-30T22:36:22"]