Adopting ERI — Team Guide

Evaluate, plan, and ship interactive Agent output in your organization.

Quick Experience

Open the live demo — a real third-party calculator, embedded by an Agent via ERI. Edit the numbers: results update instantly, no round trip. The skill.md is 15 lines. Total effort: under a day. Ready to build yours? Copy the template and start the checklist below.

Adoption Checklist

Phase 1: Pilot (1 day total: ~10 min for skill.md, the rest is the embed page)

• Pick one existing web app to embed
• Create a stripped-down /embed route (see minimal example)
  • Reads initial state from URL hash or query params
  • Self-contained — no dependency on host page
  • Served over HTTPS
  • Validate and sanitize all URL-sourced inputs (never eval() user data)
• Write a skill.md — start from the copy-paste template, or adapt this:

  ---
  name: my-app
  description: What it does.
  ---
  ## Workflow
  1. Call POST https://my-api.example.com/endpoint
  2. Show the result in plain text
  3. Embed: https://my-app.example.com/embed#data

  • Placement varies by platform: Custom Instructions (ChatGPT), CLAUDE.md/.claude/ skill files (Claude Code), Project instructions (Claude.ai), system instructions (Gemini), or any Agent behavior definition mechanism
• Test with your Agent platform — confirm iframes render with sandbox="allow-scripts"

Phase 2: Integration (1–3 days)

• Test responsive behavior at different embed widths
• Verify no document.cookie, window.top, or window.opener usage in embed page
• Handle edge cases: invalid URL params, slow networks, empty state
• Ensure keyboard navigation and screen reader support (ARIA labels, focus management)

Phase 3: Polish (optional)

• Add theme adaptation (light/dark) via URL param or prefers-color-scheme
• Implement the MCP Apps ui/* JSON-RPC bridge for Level 2 bidirectional communication
• Monitor embed page performance and load time

Pilot Success Criteria

• Embed page loads and renders correctly inside ChatGPT, Claude, or Gemini
• User can interact with the embed without Agent round trips
• Plain text fallback works when iframe is stripped
• Internal feedback collected from at least one non-developer

Decision Matrix

Cost Comparison

When NOT to Use ERI

• No web interface — if your product is a pure API with no visual component, ERI adds nothing. Stick with MCP tools or Function Calling.
• Real-time collaboration — ERI is snapshot-based (one embed per turn). For live multi-user editing or streaming data, use MCP Apps or a custom solution.
• Native device access — sandboxed iframes can't access GPS, camera, or Bluetooth. If you need device APIs, use A2UI or a native app.

Common Objections

"Isn't iframe outdated?"

Iframe is how every major platform (YouTube, Stripe, Google Maps) embeds third-party content. ChatGPT, Claude, and Gemini all render iframes in Agent output today. The web hasn't replaced iframes — it standardized them with sandbox attributes for security.

"What about security and data privacy?"

Platforms sandbox iframes (sandbox="allow-scripts") — no access to parent cookies, tokens, or DOM. Follow standard XSS prevention. See spec security section. Never place PII in URL hash or query params — URLs are logged in browser history, proxy logs, and referrer headers. For sensitive data, pass a short-lived token in the URL and fetch actual data via an API call inside the embed page.

"MCP Apps will replace this, right?"

MCP Apps only work on MCP-enabled platforms. ERI is a URL — works on most platforms today. The embed page you build for ERI forms the core of what you'd package for MCP Apps later, so adopting ERI now is not throwaway work. ERI is the on-ramp, not a dead end.

"Our API requires authentication — how does the Agent pass credentials?"

The Agent calls your API from its server, not from the user's browser. Provide a dedicated public API endpoint for Agent access — rate-limited, scoped to safe operations. For sensitive operations, let users authenticate within the embed page itself (OAuth popup, etc.). The iframe only renders results — it doesn't call your API.

"What about reliability — iframe blocked, embed page down, performance?"

The Agent always includes a plain text fallback — the user still gets value even if the iframe fails. The iframe loads after the text response, so the user sees the answer immediately. Treat your embed page like any HTTPS endpoint: keep it lightweight, monitor uptime, maintain an SLO. Most apps load in under a second.

"How do we roll out incrementally?"

Version your embed page URL (e.g., /embed/v1/, /embed/v2/). Update skill.md to point to the new version when ready. Old URLs keep working — no breaking changes. Start with one internal team, gather feedback, then expand. The skill.md format is small enough to iterate quickly.

"What happens if the Agent sends bad data?"

Validate and sanitize all URL-sourced inputs — never eval() or directly render user data. If the data is unusable, show a graceful error state. The Agent is an unreliable narrator — your embed page must be defensive.

"We already have MCP tools — why add ERI?"

MCP tools call your API and return text. ERI adds the output layer: an interactive UI that the user can tweak directly. They're complementary — your existing MCP tool call stays the same; you just add an embed URL to the Agent's response. And ERI works on platforms that haven't adopted MCP yet.

Internal Pitch Template

Slack / short version:

When users ask an Agent about our product, they get text. ERI lets us embed our actual UI inside the conversation — one embed page, one skill.md, reaching ChatGPT, Claude, Gemini. Same embed page works with MCP Apps when we're ready. I'd like to run a 1-day pilot — template here.

Email / long version: Subject: 1-day pilot — embed our UI inside ChatGPT/Claude/Gemini

Problem: Users ask ChatGPT / Claude about our product. The Agent can only describe it in text — no interaction, no trial.

Proposal: ERI (Embedded Result Interface) — an open spec that lets us embed our web app as interactive UI inside any Agent conversation. One embed page + one 15-line skill.md = our app appears in ChatGPT, Claude, and Gemini.

Cost: ~1 day of engineering. No SDK, no new infrastructure. The embed page is a standard HTTPS page we already know how to build.

Risk: Zero lock-in. MIT-licensed spec, anyone can fork. The embed page works independently — with or without ERI.

Next step: 1-day pilot. Pick one feature, build the embed page, write the skill.md, test on one platform. Live demo · Template · Adoption guide

5-Minute Tech Talk Outline

Present ERI to your team in 5 minutes: