关键词

交互式UIAI应用界面LLM工具上下文管理资源展示

这个仓库 'mcp-ui' 并非一个独立的MCP服务器，而是一个包含多语言SDK（TypeScript, Ruby, Python）的工具集，旨在帮助开发者在现有MCP服务器框架中实现和管理交互式用户界面（UI）资源。它允许您的MCP服务器向LLM客户端发送动态UI组件，并处理客户端发起的UI交互。

项目简介

'mcp-ui' 扩展了 Model Context Protocol (MCP) 的能力，使其能够处理和渲染复杂的交互式网页组件。通过提供跨语言的服务器端SDK，开发者可以方便地创建包括HTML、外部URL或基于Remote DOM的动态UI资源。这些UI资源能够被客户端渲染，并能触发工具调用、发送提示等操作，极大地丰富了LLM应用的交互模式。

主要功能点

  1. UI资源生成: 提供TypeScript ('@mcp-ui/server')、Ruby ('mcp_ui_server') 和 Python ('mcp-ui-server') SDK，用于在服务器端创建符合MCP规范的UI资源。
  2. 多种UI内容类型: 支持生成HTML内容 (通过iframe的 'srcDoc' 或 'src' 属性嵌入)、引用外部URL内容以及基于Remote DOM (Shopify 'remote-dom') 的JavaScript驱动UI。
  3. UI动作处理: 客户端渲染的UI能够触发多种事件，例如调用MCP工具、发送Prompt（提示）、打开链接或显示通知，并将这些动作传递回MCP服务器进行处理。
  4. 平台适配器: 内置适配器（例如针对ChatGPT Apps SDK），允许生成的UI资源在不同LLM客户端环境中无缝运行，简化了跨平台兼容性。
  5. 客户端渲染组件: 提供TypeScript ('@mcp-ui/client') 客户端SDK，包含React组件和Web Components，用于在LLM客户端应用中高效渲染和管理接收到的UI资源。

安装步骤

'mcp-ui' 提供了针对不同编程语言的SDK，您可以根据您的MCP服务器所使用的语言进行安装。

  1. TypeScript (用于Node.js/JavaScript MCP服务器) 
    npm install @mcp-ui/server @mcp-ui/client
# 或使用pnpm
pnpm add @mcp-ui/server @mcp-ui/client
# 或使用yarn
yarn add @mcp-ui/server @mcp-ui/client
  2. Ruby (用于Ruby MCP服务器) 
    gem install mcp_ui_server
  3. Python (用于Python MCP服务器) 
    pip install mcp-ui-server
# 或使用uv
uv add mcp-ui-server

服务器配置（MCP客户端连接信息）

为了让MCP客户端能够连接到您的MCP服务器并利用 'mcp-ui' 提供的UI功能，您需要启动一个集成 'mcp-ui' SDK 的MCP服务器。以下是几个示例服务器的启动命令和对应的MCP客户端配置信息。

  • Python HTTP/SSE 示例服务器

    • 启动命令: 在 'mcp-ui' 项目的根目录中执行以下命令启动服务器： 
      python examples/python-server-demo/python_server_demo.py --http --port 3000
    • MCP客户端配置示例: 您的MCP客户端将需要以下JSON格式的配置来连接到此服务器： 
      {
  "name": "Python MCP-UI Demo Server (HTTP)",
  "description": "一个使用Python MCP-UI SDK构建的示例HTTP服务器，提供各种UI资源和交互工具。",
  "connection": {
    "type": "http",
    "url": "http://localhost:3000/mcp",
    "sseUrl": "http://localhost:3000/sse"
  },
  "features": {
    "tools": [
      { "name": "show_external_url", "description": "显示一个外部网页UI" },
      { "name": "show_raw_html", "description": "显示一段原始HTML UI" },
      { "name": "show_remote_dom", "description": "显示一个Remote DOM UI组件" },
      { "name": "show_action_html", "description": "显示一个可交互的HTML UI" }
    ]
  }
}
      • 'name': MCP服务器的显示名称。
      • 'description': 服务器功能简介。
      • 'connection.type': 连接协议类型，'http' 表示通过HTTP协议通信。
      • 'connection.url': MCP服务器用于接收JSON-RPC请求的HTTP POST地址。
      • 'connection.sseUrl': MCP服务器用于接收Server-Sent Events (SSE) 的地址，用于服务器向客户端推送消息。
      • 'features.tools': 服务器提供的工具列表，包含工具名称和描述，客户端可以根据这些信息调用相应的工具。

  • Python Stdio 示例服务器

    • 启动命令: 在 'mcp-ui' 项目的根目录中执行以下命令启动服务器： 
      python examples/python-server-demo/python_server_demo.py
    • MCP客户端配置示例: 您的MCP客户端将需要以下JSON格式的配置来连接到此服务器： 
      {
  "name": "Python MCP-UI Demo Server (Stdio)",
  "description": "一个使用Python MCP-UI SDK构建的示例Stdio服务器，提供各种UI资源和交互工具。",
  "connection": {
    "type": "stdio",
    "command": "python",
    "args": ["examples/python-server-demo/python_server_demo.py"]
  },
  "features": {
    "tools": [
      { "name": "show_external_url", "description": "显示一个外部网页UI" },
      { "name": "show_raw_html", "description": "显示一段原始HTML UI" },
      { "name": "show_remote_dom", "description": "显示一个Remote DOM UI组件" },
      { "name": "show_action_html", "description": "显示一个可交互的HTML UI" }
    ]
  }
}
      • 'connection.type': 连接协议类型，'stdio' 表示通过标准输入/输出流通信。
      • 'command': 启动MCP服务器进程的命令（例如 'python'）。
      • 'args': 传递给启动命令的参数列表（例如服务器脚本的路径）。

  • TypeScript HTTP/SSE 示例服务器

    • 启动命令:
      1. 进入示例项目目录: 'cd examples/typescript-server-demo'
      2. 安装依赖: 'npm install'
      3. 编译项目: 'npm run build'
      4. 运行服务器: 'node dist/index.js' (默认监听端口 '3000')
    • MCP客户端配置示例: (与Python HTTP/SSE 示例类似，但工具列表和描述不同) 
      {
  "name": "TypeScript MCP-UI Demo Server (HTTP)",
  "description": "一个使用TypeScript MCP-UI SDK构建的示例HTTP服务器，提供UI资源和任务管理工具。",
  "connection": {
    "type": "http",
    "url": "http://localhost:3000/mcp",
    "sseUrl": "http://localhost:3000/sse"
  },
  "features": {
    "tools": [
      { "name": "get_tasks_status", "description": "获取所有任务的文本状态" },
      { "name": "nudge_team_member", "description": "提醒团队成员" },
      { "name": "show_task_status", "description": "显示任务状态UI" },
      { "name": "show_user_status", "description": "显示用户状态UI" },
      { "name": "show_remote_dom_react", "description": "显示React Remote DOM UI组件" },
      { "name": "show_remote_dom_web_components", "description": "显示Web Components Remote DOM UI组件" }
    ]
  }
}

基本使用方法

一旦您的MCP服务器运行并集成了 'mcp-ui' SDK，MCP客户端（如LLM代理）可以通过以下方式利用其功能：

  1. 调用返回UI资源的工具: LLM客户端可以调用服务器上定义的工具，这些工具将返回一个 'UIResource' 对象。例如，调用 'show_task_status' 工具，服务器将返回一个显示任务列表的UI。
  2. 渲染UI: MCP客户端接收到 'UIResource' 后，可以使用 'mcp-ui' 客户端SDK (如 'UIResourceRenderer') 将其渲染为可交互的界面。
  3. UI交互触发MCP动作: 用户在渲染的UI中进行操作（例如点击按钮），这些操作将通过 'onUIAction' 回调触发MCP服务器上的相应功能（例如调用另一个工具或发送一个Prompt）。

通过这种方式，'mcp-ui' 使得LLM应用能够超越纯文本交互，提供丰富的图形用户界面来增强用户体验和功能扩展。

信息

分类

开发者工具

访问项目