Claude 把整个 App 塞进了对话框:MCP Apps 新能力拆解,附搭建模板

Adobe、Atlassian、Box 的完整版，现在能直接在 Claude 对话框旁边打开。你自己改，或者让 Claude 陪你一起改。这是 Claude 官方账号刚宣布的「交互式连接器」，网页版和桌面版正在逐步推送。

Claude 官方账号 @claudeai 的帖子

随后，Anthropic 的开发者账号 ClaudeDevs 把底牌亮了：Claude 支持了更多 MCP Apps 扩展能力，比如 app tools 和内嵌网站。一句话总结：你的完整应用，可以直接跑在 Claude 里。

ClaudeDevs（@ClaudeDevs）的帖子

串里的补充更关键：MCP Apps 年初上线时，只是让服务器往对话里塞一个交互视图。现在能整站搬进来，还能给 Claude 一套工具，让它去操作屏幕上的东西。

从「能看」到「能动手」，差的就是这一步。

MCP Apps 是 MCP 的第一个官方扩展，今年 1 月正式发布。原理不复杂：

沙箱拿不到宿主页面的 DOM、Cookie 和本地存储。所以宿主敢渲染第三方的界面。

它也不是 Claude 独家。按 MCP 官方文档，VS Code GitHub Copilot、Microsoft 365 Copilot、Goose、Postman 等客户端都支持。写一次，多处能跑。

按 Claude 官方文档，MCP App 在 Claude 里能做这些事：

最值得拆的是两项：App tools 和 内嵌网站。

以前 Claude 调的是服务器上的工具，界面只负责展示。现在，界面本身也能注册工具。

官方举的例子是购物清单：你说「加个牛奶」，Claude 调用 add_item，牛奶当场出现在清单上。

谁来把关？Claude 调用前会弹审批，写明连接器和工具名，你能看到它要传的参数。拒绝了，工具就不执行。选「始终允许」，以后就不再问。

几条硬限制要记住：

这才是「完整应用跑在 Claude 里」的真正来源。你在 ui:// 资源上声明允许的源，App 就能把你的网站 iframe 进来。

但门槛比 App tools 高得多：

还有个坑：开了内嵌网站，这个界面就用不了摄像头、麦克风、定位和剪贴板写入。

下面的步骤都来自官方文档。先说客户端：Claude Desktop 可以直接跑官方示例；App tools 和内嵌网站 要用远程服务器，在 Claude 网页版 测；Claude Code 不渲染界面，但适合用来写代码。

打开 Claude Desktop，进入 Settings > Developer，点 Edit Config，在 claude_desktop_config.json 里加上：

{

  "mcpServers": {

    "map": {

      "command": "npx",

      "args": ["-y", "@modelcontextprotocol/server-map", "--stdio"]

    }

  }

}

保存后重启。让 Claude 用这个地图 App，点允许，一个 3D 地球就出现在对话里。长期用的话，把包的版本号写死。

在 Claude Code 里依次输入：

/plugin marketplace add modelcontextprotocol/ext-apps

/plugin install mcp-apps@mcp-apps

装好后，直接用这段提示词：

Add a UI to my MCP tool.

要求：用 MCP Apps SDK，服务器端用 registerAppTool 和 registerAppResource；

界面里注册一个 app tool，让 Claude 能修改屏幕上的列表；

返回结果时同时给 content 文本和 structuredContent。

已经有 OpenAI Apps SDK 应用的，说「Migrate from OpenAI Apps SDK」就行。

在界面脚本里，connect() 之前注册工具。用 zod 的写法：

app.registerTool(

  "add_item",

  {

    title: "Add item",

    description: "Add an item to the shopping list that is open in this view.",

    inputSchema: z.object({ name: z.string().describe("The item to add") })

  },

  async ({ name }) => {

    // 在这里更新界面

    return { content: [{ type: "text", text: "Added " + name + "." }] };

  }

);

await app.connect();

注意：app.registerTool 需要 @modelcontextprotocol/ext-apps 1.7.0 及以上。

服务器端，在 resources/read 返回的内容项上声明源：

{ "_meta": { "ui": { "csp": { "frameDomains": ["https://editor.example.com"] } } } }

网站端，响应头里放行两个源。沙箱域名用你服务器 URL 的 SHA-256 前 32 位加 .claudemcpcontent.com：

Content-Security-Policy: frame-ancestors https://<你的沙箱域名> https://claude.ai

千万别写 *.claudemcpcontent.com，否则别人的 App 也能嵌你的站。

把服务器作为自定义连接器加进 Claude，本地服务就先用隧道暴露出去。新开对话，权限设成 Manual。第一条消息让 Claude 打开 App，第二条再让它改内容。弹出审批、界面变了，就算跑通。

局限说一句：App tools、侧边栏和自定义连接器的内嵌网站，目前只对部分组织开放，你的账号可能暂时测不到。