使用说明
MCP应用游乐场
演示MCP服务器，使用 MCP应用程序扩展（SEP-1865）.
特性
- 🔧 MCP工具 -
hello_world,list_sort,flame_graph，以及feature_flagsZod模式验证工具 - 📱 应用程序扩展 -HTML用户界面
ui://资源与text/html;profile=mcp-app - 📦 结构化内容 -数据通过以下方式传递到UI
ui/notifications/tool-input - 💬 双向 -用户界面可以通过以下方式将消息发送回聊天室
ui/message - 🚀 双重运输 -stdio（默认）和HTTP/SSE
工具
list_sort --交互式列表重新排序
之前： 代理从MCP工具接收列表数据→ 基于其分析提出排序顺序→ 用户读取文本输出并请求调整→ 多条来回消息，以与实际偏好保持一致。
使用MCP应用程序： Agent在其建议顺序旁边显示一个拖放界面。用户应用领域知识直观地重新排序项目，或点击“请求人工智能排序”以进行代理推理——这是真正的协作，双方都有贡献。
🖱️ 拖放重新排序·🤖 “让AI排序”·↩️ 重置·💾 保存聊天
flame_graph --性能分析器可视化
之前： 代理从MCP工具接收CPU配置文件数据→ 分析JSON并识别瓶颈→ 用户只能看到代理的文本摘要→ 无法验证假设或应用特定领域的上下文。
使用MCP应用程序： 代理渲染交互式火焰图，并可以注释可疑的热路径。用户用自己的领域知识探索可视化——确认或拒绝代理的假设，深入代理可能忽略的领域。
🔍 单击以缩放层次结构·💬 悬停工具提示·🧭 面包屑导航📊 发送相框聊天
feature_flags --特征标志选择器
之前： 代理从MCP工具获取标志配置→ 总结存在哪些标志及其状态→ 用户与部署上下文的交叉引用→ 要求代理单独生成集成代码。
使用MCP应用程序： Agent显示一个可搜索的标记选择器，其中包含实时环境状态。用户根据其发布优先级选择标志，在prod/staging/dev视图之间切换，并生成SDK代码——代理提供数据，用户驱动决策。
🌍 环境选项卡·🔎 搜索和筛选·☑️ 多选·📝 生成SDK代码
快速开始
# Install dependencies
npm install
# Build
npm run build
# Run with stdio transport (for Claude Desktop, Cursor, VS Code)
npm run dev
# Or run with HTTP transport (for web-based clients)
npm run dev:http
# Test with MCP Inspector
npm run inspector # stdio
npm run inspector:http # HTTP (start server first)
项目结构
src/
├── index.ts # Main server (stdio transport)
├── http-server.ts # HTTP transport variant
└── ui/
├── hello-world.ts # Greeting UI template
├── list-sort.ts # Interactive list sorting UI
├── flame-graph.ts # Performance flame graph visualization
└── feature-flags.ts # Feature flag selector UI
MCP配置
VS Code
使用随附的 .vscode/mcp.json:
{
"servers": {
"mcp-apps-playground": {
"type": "stdio",
"command": "node",
"args": ["${workspaceFolder}/dist/index.js"]
}
}
}
克劳德桌面/光标
{
"mcpServers": {
"mcp-apps-playground": {
"command": "node",
"args": ["/path/to/mcp-apps-playground/dist/index.js"]
}
}
}
运作原理
1.UI资源声明
UI资源声明如下 ui:// 方案和 text/html;profile=mcp-app MIME类型：
server.resource(
"greeting-ui",
"ui://mcp-apps-playground/greeting",
{
description: "Interactive greeting UI panel",
mimeType: "text/html;profile=mcp-app",
},
async (uri) => ({
contents: [{
uri: uri.href,
mimeType: "text/html;profile=mcp-app",
text: HELLO_WORLD_UI(),
}],
})
);
2.带有UI注释的工具
工具使用 _meta.ui.resourceUri 链接到UI资源。数据通过以下方式传递 structuredContent:
server.registerTool(
"hello_world",
{
description: "Display a Hello World greeting",
inputSchema: {
name: z.string().describe("Name to greet"),
},
_meta: {
ui: {
resourceUri: "ui://mcp-apps-playground/greeting",
visibility: ["model", "app"],
},
},
},
async ({ name }) => ({
content: [{ type: "text", text: `Hello, ${name}!` }],
structuredContent: { name, greeting: `Hello, ${name}!` },
})
);
3.UI通信
UI通过postMessage JSON-RPC与MCP主机通信：
// Initialize handshake (required)
const result = await sendRequest('ui/initialize', {
protocolVersion: '2025-06-18',
capabilities: {},
});
sendNotification('ui/notifications/initialized', {});
// Listen for tool data
window.addEventListener('message', (e) => {
if (e.data.method === 'ui/notifications/tool-input') {
const { arguments: args } = e.data.params;
// Update UI with args
}
});
// Send message to chat
await sendRequest('ui/message', {
content: [{ type: 'text', text: 'User selected: ...' }]
});
资源
许可证
麻省理工学院
