项目简介

'@modelcontextprotocol/ext-apps' 仓库提供了一个用于构建和集成交互式UI应用的SDK，以扩展Model Context Protocol (MCP) 客户端的功能。它定义了MCP Apps的规范，允许MCP服务器向对话式LLM客户端展示丰富的用户界面。此外，该仓库还包含了一个功能齐全的MCP示例服务器，演示了如何托管和提供这些UI资源，并注册可供LLM调用的工具。

主要功能点

MCP Apps SDK: 提供客户端库，用于构建与MCP客户端交互的UI应用程序（例如React或Vanilla JS应用）。
UI 资源管理: MCP示例服务器能够托管HTML格式的UI资源，并将其作为工具的元数据发布，供MCP客户端发现和渲染。
工具注册与调用: 示例服务器注册了多个工具，包括用于生成不同UI界面的工具（如“Raw UI”、“Vanilla UI”、“React UI”）和一个通用的“Get Weather”工具。这些工具通过JSON-RPC协议响应LLM客户端的调用。
会话管理: 服务器支持多会话管理，为每个连接的MCP客户端维护独立的上下文。
JSON-RPC 通信: 服务器通过基于HTTP的JSON-RPC协议与客户端进行通信，接收请求并发送响应。
UI 交互能力: 通过SDK，UI应用可以向主机（MCP客户端）发送消息、调用服务器工具、记录日志，并请求打开外部链接。

安装步骤

克隆仓库:

git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps

安装依赖:
```
npm install
```
启动示例服务:
```
npm start
```
这会同时启动示例的MCP服务器 (默认端口 3001) 和一个简单的Web主机 (默认端口 8080)，用于演示UI应用。服务器会持续运行，直到您手动停止它。

服务器配置 (供MCP客户端使用)

此MCP服务器运行在 'http://localhost:3001/mcp' 地址，并支持HTTP传输协议。 MCP客户端在连接时需要提供以下配置信息：

{
  "serverName": "simple-mcp-server",
  "command": "npm",
  "args": ["run", "start-mcp-server"],
  "protocol": "http",
  "endpoint": "http://localhost:3001/mcp",
  "description": "一个提供UI应用扩展和天气查询功能的MCP示例服务器。"
}

'serverName': 服务器的标识名称，这里是 "simple-mcp-server"。
'command': 启动MCP服务器的命令，这里是'npm'。在安装依赖后，'npm'命令会查找'package.json'中的脚本。
'args': 启动命令的参数，这里是'["run", "start-mcp-server"]'，表示运行'package.json'中定义的'start-mcp-server'脚本，该脚本专门用于启动MCP服务器。
'protocol': 服务器支持的传输协议，这里是 'http'。
'endpoint': 服务器的访问地址，这里是 'http://localhost:3001/mcp'。
'description': 服务器的简要描述。

基本使用方法

一旦MCP服务器启动并运行，您可以通过兼容的MCP客户端与其连接。连接后，客户端将能够：

发现工具: 客户端可以列出服务器注册的所有工具，包括 'create-ui-raw'、'create-ui-vanilla'、'create-ui-react' 和 'get-weather'。
调用UI工具: 当LLM客户端调用 'create-ui-vanilla' 或 'create-ui-react' 等工具时，服务器会返回一个包含UI资源URI的响应。MCP客户端会加载并渲染这个UI资源（通常在一个沙箱化的iframe中）。
与UI应用交互: 渲染的UI应用可以与MCP客户端进行双向通信，例如：
- UI应用可以调用MCP服务器上的其他工具（如“Get Weather”）。
- UI应用可以发送日志消息或请求客户端打开链接。
- MCP客户端可以向UI应用发送工具输入和上下文变化通知。
调用通用工具: LLM客户端可以直接调用 'get-weather' 工具来获取天气信息。

关键词

项目简介

主要功能点

安装步骤

服务器配置 (供MCP客户端使用)

基本使用方法

信息