采用 ERI — 团队指南

Q: iframe 不是过时了吗？

iframe 是所有主要平台（YouTube、Stripe、Google Maps）嵌入第三方内容的方式。ChatGPT、Claude、Gemini 都在 Agent 输出中渲染 iframe。Web 并没有淘汰 iframe——而是通过 sandbox 属性将其标准化和安全化。

Q: 安全和数据隐私怎么办？

平台对 iframe 加沙箱（sandbox="allow-scripts"）——无法访问父页面 cookie、token 或 DOM。遵循标准 XSS 防护。绝不在 URL hash 或 query 参数中放置 PII——URL 会被记录在浏览器历史、代理日志和 Referrer 头中。对于敏感数据，应在 URL 中传递短期令牌，由嵌入页面通过 API 调用获取实际数据。

Q: MCP Apps 不是会替代这个吗？

MCP Apps 只在 MCP 平台上运行。ERI 只是一个 URL——今天大多数平台通用。你为 ERI 构建的嵌入页面构成日后打包给 MCP Apps 的核心，所以现在采用 ERI 不是一次性工作。ERI 是入口，不是死胡同。

Q: 我们的 API 需要认证——Agent 怎么传凭证？

Agent 从服务端调用你的 API，不是从用户浏览器。提供一个公开 API 端点供 Agent 访问——限流、限定为安全操作。敏感操作让用户在嵌入页面内自行认证（OAuth 弹窗等）。iframe 只渲染结果——不调用你的 API。

Q: 可靠性——iframe 被拦截、嵌入页面挂了、性能影响？

Agent 总是附带纯文本降级——即使 iframe 失败，用户仍然能得到结果。iframe 在文字响应之后加载，用户立刻看到答案。把嵌入页面当作普通 HTTPS 端点来管理：保持轻量、监控可用性、维护 SLO。大多数应用加载不到一秒。

Q: Agent 发送了错误数据怎么办？

验证和清理所有来自 URL 的输入——绝不 eval() 或直接渲染用户数据。如果数据不可用，显示友好的错误状态。Agent 是不可靠的叙述者——你的嵌入页面必须做好防御性编码。

Q: 如何灰度发布？

为嵌入页面 URL 加版本号（如 /embed/v1/、/embed/v2/）。准备好时更新 skill.md 指向新版本。旧 URL 继续工作——没有破坏性变更。先从一个内部团队开始，收集反馈，再逐步扩大。

Q: 我们已经有 MCP 工具了——为什么还需要 ERI？

MCP 工具调用你的 API 并返回文字。ERI 添加的是输出层：一个用户可以直接微调的交互式 UI。它们是互补的——你现有的 MCP 工具调用不变，只需在 Agent 的响应中加上嵌入 URL。ERI 在尚未支持 MCP 的平台上也能用。

在组织内评估、规划并上线交互式 Agent 输出。

一个嵌入页面 + 一个 skill.md = 你的 Web 应用出现在 ChatGPT、Claude、Gemini 对话中。协议无关——同一个嵌入页面可沿用至 MCP Apps（相同的 iframe 运行时）。

< 1 天出可运行原型
三大平台（ChatGPT、Claude、Gemini）
零 SDK——只需 HTTPS + Markdown
嵌入页面可沿用——不绑定 ERI

快速体验

打开在线演示——一个真实的第三方计算器，由 Agent 通过 ERI 嵌入。编辑数字试试：结果即时更新，无需等待 Agent 回复。skill.md 仅 15 行。完整工作量：不到一天。准备好构建你的了？复制模板，开始下面的清单。

采用清单

第一阶段：试点（共 1 天：skill.md 约 10 分钟，其余是嵌入页面）

选择一个现有 Web 应用进行嵌入
创建一个精简的 /embed 路由（见最小示例）
- 从 URL hash 或 query 参数读取初始状态
- 自包含——不依赖宿主页面
- 使用 HTTPS
- 校验和清理所有来自 URL 的输入（绝不要对用户数据使用 eval()）
写一个 skill.md——从可复制模板开始，或直接改编：
```
---
name: my-app
description: 工具描述
---
## 工作流
1. 调用 POST https://my-api.example.com/endpoint
2. 以纯文本展示结果
3. 嵌入: https://my-app.example.com/embed#data
```
- 放置方式因平台而异：Custom Instructions（ChatGPT）、CLAUDE.md/.claude/ 技能文件（Claude Code）、项目指令（Claude.ai）、系统指令（Gemini）、或任何 Agent 行为定义机制
在你的 Agent 平台上测试——确认 iframe 能以 sandbox="allow-scripts" 正确渲染

第二阶段：集成（1–3 天）

测试不同嵌入宽度下的响应式表现
确认嵌入页面没有使用 document.cookie、window.top 或 window.opener
处理边界情况：无效 URL 参数、慢网络、空状态
确保键盘导航和屏幕阅读器支持（ARIA 标签、焦点管理）

第三阶段：打磨（可选）

通过 URL 参数或 prefers-color-scheme 添加主题适配（亮/暗）
实现 MCP Apps ui/* JSON-RPC 桥接以支持 Level 2 双向通信
监控嵌入页面的性能和加载时间

试点成功标准

嵌入页面在 ChatGPT、Claude 或 Gemini 中正确加载和渲染
用户可以在嵌入界面中直接交互，无需 Agent 来回
纯文本降级在 iframe 被移除时正常工作
从至少一位非开发人员收集到内部反馈

决策矩阵

场景	推荐方案
"我们有 Web 应用 / SaaS——想放进 Agent 对话"	ERI — 大多数平台通用
"我们全面投入 MCP"	MCP Apps
"需要原生移动端渲染"	A2UI
"先等等看——文字输出够用了"	文字能用，但用户越来越期待交互式结果。ERI 试用成本低：一个嵌入页面、一个 `skill.md`，随时可以撤回。

成本对比

	ERI	逐平台原生集成
开发	约 1 天（嵌入页面 + skill.md）	每平台 5–10 天 × 3 个平台 = 15–30 天
SDK / 审批	无	平台 SDK、开发者账号、审批流程
维护	低（静态页面 + Markdown）	持续逐平台更新
覆盖	大多数平台今天就能用	仅为你构建的那个平台

什么时候不适合用 ERI

没有 Web 界面——如果你的产品是纯 API、没有可视化组件，ERI 不增加价值。继续使用 MCP 工具或 Function Calling。
实时协作——ERI 是快照式的（每轮一个嵌入）。需要多人实时编辑或流式数据，请用 MCP Apps 或自定义方案。
原生设备访问——沙箱 iframe 无法访问 GPS、摄像头或蓝牙。需要设备 API，请用 A2UI 或原生应用。

常见疑问

"iframe 不是过时了吗？"

iframe 是所有主要平台（YouTube、Stripe、Google Maps）嵌入第三方内容的方式。ChatGPT、Claude、Gemini 都在 Agent 输出中渲染 iframe。Web 并没有淘汰 iframe——而是通过 sandbox 属性将其标准化和安全化。

"安全和数据隐私怎么办？"

平台对 iframe 加沙箱（sandbox="allow-scripts"）——无法访问父页面 cookie、token 或 DOM。遵循标准 XSS 防护即可。详见规范安全章节。绝不在 URL hash 或 query 参数中放置 PII——URL 会被记录在浏览器历史、代理日志和 Referrer 头中。对于敏感数据，应在 URL 中传递短期令牌，由嵌入页面通过 API 调用获取实际数据。

"MCP Apps 不是会替代这个吗？"

MCP Apps 只在 MCP 平台上运行。ERI 只是一个 URL——大多数平台通用。你为 ERI 构建的嵌入页面构成日后打包给 MCP Apps 的核心，所以现在采用 ERI 不是一次性工作。ERI 是入口，不是死胡同。

"我们的 API 需要认证——Agent 怎么传凭证？"

Agent 从服务端调用你的 API，不是从用户浏览器。提供一个公开 API 端点供 Agent 访问——限流、限定为安全操作。敏感操作让用户在嵌入页面内自行认证（OAuth 弹窗等）。iframe 只渲染结果——不调用你的 API。

"可靠性——iframe 被拦截、嵌入页面挂了、性能影响？"

Agent 总是附带纯文本降级——即使 iframe 失败，用户仍然能得到结果。iframe 在文字响应之后加载，用户立刻看到答案。把嵌入页面当作普通 HTTPS 端点来管理：保持轻量、监控可用性、维护 SLO。大多数应用加载不到一秒。

"Agent 发送了错误数据怎么办？"

验证和清理所有来自 URL 的输入——绝不 eval() 或直接渲染用户数据。如果数据不可用，显示友好的错误状态。Agent 是不可靠的叙述者——你的嵌入页面必须做好防御性编码。

"如何灰度发布？"

为嵌入页面 URL 加版本号（如 /embed/v1/、/embed/v2/）。准备好时更新 skill.md 指向新版本。旧 URL 继续工作——没有破坏性变更。先从一个内部团队开始，收集反馈，再逐步扩大。skill.md 格式小到可以快速迭代。

"我们已经有 MCP 工具了——为什么还需要 ERI？"

MCP 工具调用你的 API 并返回文字。ERI 添加的是输出层：一个用户可以直接微调的交互式 UI。它们是互补的——你现有的 MCP 工具调用不变，只需在 Agent 的响应中加上嵌入 URL。而且 ERI 在尚未支持 MCP 的平台上也能用。

内部推介模板

Slack / 短版本：

用户在 Agent 里问我们的产品，只能看到文字。ERI 可以把我们的 UI 直接嵌入对话——一个嵌入页面、一个 skill.md，覆盖 ChatGPT、Claude、Gemini。同样的嵌入页面在 MCP Apps 就绪时也能用。我想先跑个一天的试点——模板在这里。

邮件 / 长版本： 主题：一天试点——把我们的 UI 嵌入 ChatGPT/Claude/Gemini

问题：用户在 ChatGPT / Claude 里询问我们的产品，Agent 只能用文字描述——无法交互、无法试用。

方案：ERI（嵌入式结果界面）——开放规范，让我们的 Web 应用以交互式 UI 出现在任何 Agent 对话中。一个嵌入页面 + 一个 15 行的 skill.md = 我们的应用出现在 ChatGPT、Claude、Gemini 中。

成本：约一天的工程时间。无需 SDK，无需新基础设施。嵌入页面就是标准的 HTTPS 页面。

风险：零锁定。MIT 许可规范，任何人可以 fork。嵌入页面独立运行——有没有 ERI 都能用。

下一步：一天试点。选一个功能，构建嵌入页面，写 skill.md，在一个平台上测试。在线演示 · 模板 · 采用指南

5 分钟技术分享大纲

用 5 分钟向团队介绍 ERI：

分钟	展示什么
0–1	问题："Agent 输出只有文字。用户无法交互。" 在 ChatGPT 中演示一个纯文字计算结果。
1–2	Demo：打开在线演示。展示嵌入的计算器——修改一个数字，结果即时更新。"这就是 ERI。"
2–3	原理：展示15 行 skill.md。"Agent 读取这个文件，调用我们的 API，嵌入我们的页面。就这样。"
3–4	兼容性："同一个嵌入页面在 ChatGPT、Claude、Gemini 上都能用。而且它和 MCP Apps 的 iframe 运行时完全相同——Level 2 直接使用它们的 `ui/*` 桥接。"
4–5	行动："一天试点。选一个功能，复制模板，测试。零风险——嵌入页面有没有 ERI 都能独立运行。"