兄弟们，MCP 这波浪还没退，新东西又来了。

MCP Apps，Anthropic 和 OpenAI 联合搞的，Model Context Protocol 的第一个官方扩展。说白了就一件事：

你的 MCP Server 现在可以直接返回可交互的 UI，然后在 Claude、ChatGPT、VS Code 的对话窗口里渲染出来。

不是新标签页，不是弹窗，就在对话里。

截至 2026 年 1 月，Claude（网页版+桌面版）、ChatGPT、VS Code Insiders、Goose 都已经支持了。JetBrains 和 AWS 也在接入中。

---

一、为啥需要 MCP Apps？

纯文字交互有个硬上限，有些东西就是没法用文字做好：

• 销售仪表盘 - 返回 JSON 然后祈祷客户端会渲染？
• 20 个字段的配置表单 - 一个字段一个字段地提示用户填？
• 商品目录 - 用文字描述它？

这些东西用文字模拟，勉强能用，但真的很痛苦。

MCP Apps 的思路是：工具调用完之后，直接返回一个 HTML 界面，让用户在对话里操作，操作结果再通过 JSON-RPC 回传给模型。

模型知道的 vs 用户看到的，可以完全分开控制。敏感数据只传给视图层，不污染模型的上下文。

---

二、底层怎么跑的

整个流程四步，不复杂：

1. 连接时：Server 在 manifest 里预先声明 UI 资源，客户端提前审核和缓存，不是运行时动态注入的
2. 工具调用时：AI 调用工具，客户端检查有没有关联的 UI 资源 URI，有就触发渲染
3. 渲染时：HTML 加载进沙箱 iframe，用工具的输入输出数据初始化
4. 交互时：用户操作，iframe 通过 postMessage 上的 JSON-RPC 把结果回传

安全模型做得很扎实 - 沙箱 iframe 隔离第三方代码，UI 资源预声明让宿主可以提前审核，不是运行时随便塞东西进来。

---

三、用 LeanMCP 搭一个

MCP 协议定义了规范，但生产环境要的那些 - 认证、可观测性、多租户 - 协议本身不管。LeanMCP 就是补这个缺的 agent runtime。

第一步：建项目

npm install -g @leanmcp/cli
npx @leanmcp/cli create my-mcp-app
cd my-mcp-app
npm install

生成的结构干净利落：

my-mcp-app/
├── main.ts              # 入口
├── package.json
├── tsconfig.json
└── mcp/
    └── example/
        └── index.ts     # 服务定义放这里

第二步：定义工具

// mcp/analytics/index.ts
import { Tool, SchemaConstraint, Optional } from "@leanmcp/core";

class SalesReportInput {
  @SchemaConstraint({ description: "要查询的地区", minLength: 1 })
  region!: string;

  @Optional()
  @SchemaConstraint({
    description: "时间范围",
    enum: ["7d", "30d", "90d"],
    default: "30d"
  })
  range?: string;
}

export class AnalyticsService {
  @Tool({
    description: "获取销售报表数据",
    inputClass: SalesReportInput
  })
  async getSalesReport(args: SalesReportInput) {
    const data = await fetchSalesData(args.region, args.range);

    // 返回结构化数据
    // UI 资源（widget HTML）按 MCP Apps 规范在 server manifest 里单独注册
    return {
      region: args.region,
      totalRevenue: data.revenue,
      topProducts: data.products,
      chartData: data.chart
    };
  }
}

@SchemaConstraint 直接在 TypeScript 类上定义校验规则，不用手搓 JSON Schema，类型即文档。

第三步：启动 Server，顺便开日志

// main.ts
import { createHTTPServer } from "@leanmcp/core";

await createHTTPServer({
  name: "my-mcp-app",
  version: "1.0.0",
  port: 8080,
  cors: true,
  logging: true,       // 工具调用、延迟、报错，全记
  autoDiscover: true   // 自动扫描 ./mcp 目录，不用手动注册
});

跑起来之后 http://localhost:8080/mcp 就能用了。

第四步：加认证，一个装饰器搞定

生产环境裸奔不行的，多租户认证这块 LeanMCP 帮你包好了：

import { AuthProvider, Authenticated } from "@leanmcp/auth";

// 支持 Cognito、Auth0、Supabase、Firebase
const authProvider = new AuthProvider('cognito', {
  region: process.env.AWS_REGION,
  userPoolId: process.env.COGNITO_USER_POOL_ID,
  clientId: process.env.COGNITO_CLIENT_ID
});
await authProvider.init();

// 整个 service 受保护，token 从 _meta.authorization.token 里自动验
@Authenticated(authProvider)
export class AnalyticsService {
  @Tool({
    description: "获取销售报表 - 仅限认证用户",
    inputClass: SalesReportInput
  })
  async getSalesReport(args: SalesReportInput) {
    // 不用写 token 解析，LeanMCP 验完才会跑到这里
    return { data: await fetchSalesData(args.region) };
  }
}

客户端调用长这样：

await mcpClient.callTool({
  name: "getSalesReport",
  arguments: { region: "亚太" },
  _meta: {
    authorization: {
      type: "bearer",
      token: "user-jwt-token"
    }
  }
});
// token 验证失败直接拒，业务逻辑根本不会被触发

第五步：加新服务

leanmcp add dashboard
# 自动建 mcp/dashboard/index.ts（带样板代码）
# 自动在 main.ts 注册
# 直接开写

---

四、MCP Apps vs GPT Apps，到底选哪个？

很多人搞混这两个，放张表对比一下：

	GPT Apps	MCP Apps	用 LeanMCP
支持平台	仅 ChatGPT	Claude、ChatGPT、VS Code、Goose	两个都支持，一个 server
标准归属	私有（OpenAI 控制）	开放标准（SEP-1865）	全兼容
认证	不含	不含	@Authenticated 装饰器
可观测性	不含	不含	logging: true 一行
多租户	自己搞	自己搞	内置
类型安全	手动	手动	@SchemaConstraint 自动校验

关键点：同一个 LeanMCP server 同时支持 GPT Apps 和 MCP Apps，不用维护两套代码。

GPT Apps 背靠 800M+ ChatGPT 用户，Booking.com、Canva、Figma 这些大厂已经接入了，流量确实大。但平台锁定是真的，OpenAI 一个政策变动你就被动。

MCP Apps 是开放标准，今天的代码明天也能跑在下一个支持它的客户端上。

---

五、生产环境的那个坑

MCP 规范给了你协议层，但没给你这些：

• 多租户认证 - 怎么对每个用户单独做身份验证？
• 用量追踪 - 谁在消耗你的 API 预算？
• 密钥注入 - 怎么安全地按请求注入 API Key，不硬编码到全局？
• 审计日志 - 合规场景下，谁在什么时间做了什么？
• 输入校验 - 怎么在业务逻辑执行前就拦住非法输入？
• 可观测性 - 凌晨两点出问题，你怎么发现？

LeanMCP 就是专门填这个坑的。协议是协议，Runtime 是 Runtime，别混为一谈。

---

六、实际能干啥

MCP Apps 落地之后，这些场景真的可行了：

• 数据分析 - 报表工具返回可交互仪表盘，用户在对话里直接筛选、下钻、导出，不用跳页面
• 配置向导 - 部署工具展示表单，选"生产环境"动态展示额外安全配置，不用一条一条提示
• 文档审阅 - 合同工具内嵌 PDF 并高亮关键条款，直接在对话里点批准或标记
• 电商 - 商品目录、尺码选择、购物车流程全在 agent 对话里跑
• 实时监控 - 服务器健康工具展示实时指标，不用每次重新调用刷新

---

七、整个 Agent 技术栈现在长这样

层	技术
工具层 - Agent 能做什么	MCP 协议
认证层 - 谁能用	MCP 规范里的 OAuth
UI 层 - 用户看到和操作什么	MCP Apps（SEP-1865）
Runtime 层 - 怎么在生产跑稳	LeanMCP

MCP Apps 把最后一块拼上了。协议、认证、UI、Runtime，现在是完整的。

---

快速开始

npm install -g @leanmcp/cli
npx @leanmcp/cli create my-mcp-app
cd my-mcp-app && npm start
# -> http://localhost:8080/mcp

• GitHub（MIT 协议）：github.com/LeanMCP/leanmcp-sdk
• 文档：docs.leanmcp.com
• Discord：discord.com/invite/DsRcA3GwPy

你们有在搭 MCP App 的吗？遇到啥问题欢迎评论区聊。