给 MCP 工具配一块界面：用 MCP Apps 扩展把结果渲染成可交互面板

# 服务端：创建 UI 资源 + 把工具与资源绑定
npm install @mcp-ui/server @modelcontextprotocol/ext-apps

# 视图侧（打包后的 HTML 里）：App 对象负责与宿主通信
# 由 @modelcontextprotocol/ext-apps 提供

# 宿主侧（如果你在自建宿主）：连接 MCP 服务器
npm install @modelcontextprotocol/sdk @ai-sdk/mcp

import { createUIResource } from '@mcp-ui/server';
import { registerAppResource, registerAppTool } from '@modelcontextprotocol/ext-apps/server';

// 创建一个 UI 资源：内容就是一段 HTML 字符串
const widget = await createUIResource({
  uri: 'ui://my-server/widget',
  content: { type: 'rawHtml', htmlString: '<div id="app">加载中…</div>' },
  encoding: 'text',
});

// 注册资源：mimeType 标记 text/html，表明这是一个 MCP App
registerAppResource(server, 'widget_ui', widget.resource.uri, {}, async () => ({
  contents: [widget.resource],
}));

// 一个“只给界面用”的工具：不给模型看
registerAppTool(server, 'render_chart', {
  title: '渲染图表',
  _meta: { ui: { resourceUri: widget.resource.uri } },   // 绑定界面
}, async (args) => ({ content: [{ type: 'text', text: 'ok' }] }));

// 可见性由 _meta.ui.visibility 声明：
//   "model" -> 可以传给模型
//   "app"   -> 只能留在宿主侧，供 iframe 请求，绝不暴露给模型

界面里的 HTML 通过 App 对象与宿主对话。两个方法与纯静态 HTML 拉开差距：

// 1) 在界面上点一下就回服务器调工具拿数据
const data = await app.callServerTool({
  name: 'get_metrics',
  arguments: { range: 'last_7_days' },
});
renderChart(data);

// 2) 把界面上的动作写回模型上下文，
//    让 LLM 在后续对话里“知道”用户刚在界面上做了什么
await app.updateModelContext({
  type: 'user_action',
  detail: '将时间范围切换为最近 7 天',
});

// 1) 连接时声明宿主能力（只有确实能渲染时才声明）
new McpClient({
  transport,
  mcpAppClientCapabilities: {
    extensions: {
      'io.modelcontextprotocol/ui': { mimeTypes: ['text/html;profile=mcp-app'] },
    },
  },
});

// 2) 聊天路由只把 visibility=model 的工具交给 streamText / generateText
//    带 app 可见性的工具留在宿主侧

// 3) 工具结果带 MCP App 元数据时：
//    读取 ui:// 资源 -> 沙箱 iframe 渲染 -> 把 iframe 发起的允许请求代理回服务器

# 1) 起你的 MCP Server（stdio 或 HTTP 传输均可）
# 2) 选一个支持 MCP Apps 的宿主做本地验证
#    - Claude Desktop
#    - VS Code 里的 Copilot Chat
# 3) 触发工具调用，确认：
#    - 工具返回里带 _meta.ui.resourceUri
#    - 界面在沙箱中渲染，而不是当纯文本显示
#    - 界面上的动作能回调到服务器并拿到数据
# 4) 再打开 iframe 的控制台，确认没有被 CSP 拦掉的资源