MCP服务交互界面添加技能

资源介绍

Add-app-to-server 适合已经运行 MCP 服务、希望为现有工具增加交互界面的开发者使用。它会引导编程助手先检查服务中已注册的工具，区分适合界面展示的列表、指标或媒体内容，以及保持纯文本即可的简单操作；再与用户确认要增强的工具，按照 MCP Apps 的方式关联界面资源。调用工具时，支持 MCP Apps 的宿主可以在对话中展示对应界面，而原有工具仍可供纯文本客户端使用。它不是独立运行的界面应用，而是帮助开发者改造现有 MCP 服务的操作指引。

Skill 能力

筛选适合添加界面的工具

指导编程助手盘点现有工具，并判断列表、时间序列指标和媒体内容等输出是否适合改为交互展示，避免为简单确认信息增加不必要的界面。

为现有工具关联界面

指导开发者将工具与 HTML 界面资源关联，使支持 MCP Apps 的宿主在工具被调用时展示界面，同时保留工具在纯文本客户端中的原有用途。

识别界面专用辅助工具

帮助判断哪些数据获取或轮询工具更适合作为界面专用辅助工具，而不是由模型直接调用的普通工具。

资源配置

适用平台

Claude Code通用 Agent

安装与调用

1. 01

   准备一个已经注册工具的 MCP 服务，并在支持 Agent Skills 的编程助手中安装该 Skill；Claude Code 可通过 ext-apps 插件市场安装。

2. 02

   向编程助手提出为现有 MCP 服务或指定工具添加交互界面的需求。

3. 03

   查看助手对现有工具的分析，确认哪些工具需要界面增强。

4. 04

   按助手的指引完成界面资源与工具的关联，并在支持 MCP Apps 的宿主中调用工具查看效果。

使用案例

为统计工具增加可视化界面

使用场景开发者的 MCP 服务已有返回指标和时间变化数据的工具。

让编程助手使用该 Skill 分析现有工具，确认适合增强的统计工具，再为其关联交互界面，以便在支持 MCP Apps 的宿主中查看数据。

为文档展示工具添加查看界面

使用场景开发者希望已有的文档展示工具在对话中提供直观的查看方式。

使用该 Skill 指导助手为工具添加界面资源；简单的文档列表工具仍可保持纯文本形式，不必全部改造。

包含内容

✓

add-app-to-server-source.zip

✓

README-中文安装说明.md

✓

LICENSE-Apache-2.0.txt

✓

SHA256.txt

常见问题

添加界面后，原有工具还能在纯文本客户端使用吗？

可以。该 Skill 指导为现有工具增加界面资源，界面是增强功能，不替代工具原有的文本调用方式。

哪些现有工具更适合添加交互界面？

返回结构化列表、随时间变化的指标，以及地图、PDF 等丰富内容的工具更适合；仅返回简单文本或操作确认的工具通常保持文本形式即可。

在 Claude Code 中如何安装这项 Skill？

先运行 `/plugin marketplace add modelcontextprotocol/ext-apps`，再运行 `/plugin install mcp-apps@modelcontextprotocol-ext-apps`。

现有服务使用 MCP SDK v1 时能直接添加界面吗？

不能直接按该 Skill 给出的 ext-apps 2.x 集成流程添加。其说明要求先将旧版 `@modelcontextprotocol/sdk` 的导入和处理接口迁移至拆分后的 MCP SDK v2 包。