To embed an interactive app in an AI client with MCP, expose an MCP tool, register an HTML view as a ui:// resource, and link the tool to that resource with UI metadata. A compatible host fetches the view, renders it in a sandboxed iframe, and mediates communication between the view and the MCP server. The pattern can support dashboards, forms, visualizations, and review workflows—but only in hosts that implement the MCP Apps extension.
Decide whether an embedded view is worth building
An MCP App is most useful when the user needs to explore information visually, provide several inputs, review content inline, or interact with an evolving workflow. If the task can be completed clearly with a text response or structured tool result, a separate UI adds implementation and maintenance work without necessarily helping the user.
As an Amazon Associate I earn from qualifying purchases.
| Approach | Best fit | Product trade-off |
|---|---|---|
| Text or structured tool result | Answers, summaries, and tasks with simple inputs and outputs | Works as a useful fallback in clients that do not render MCP Apps; offers less interactive presentation. |
| Tool linked to an MCP App view | Charts, configuration flows, document review, and monitoring interfaces | Enables an interactive experience in compatible hosts, but adds a UI resource, host-compatibility checks, security review, and view maintenance. |
Before committing, identify the client surfaces your users actually use, the interactions they need, and what useful result remains if the view cannot load. The official MCP Apps overview describes the extension as progressive enhancement: a host without UI support can still use the underlying tool’s text result.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsHow the tool, resource, and host fit together
The MCP server provides the tool and view
The integration has two related pieces: an MCP tool with a clear input schema, and an HTML UI resource registered under a ui:// URI. The tool’s _meta.ui.resourceUri metadata points to the view resource. Keeping presentation in a separate resource lets the host obtain or inspect the view independently of the tool’s result.
#1 Best Overall
The host renders the view and mediates communication
When a compatible host uses the tool, it can fetch the associated UI resource and render it inside a sandboxed iframe in the conversation. The view can receive tool data and use the host bridge for supported interactions. Officially documented communication patterns include tool calls, resource reads, conversation messages, model-context updates, and external-link requests; the host determines which capabilities it exposes and how they behave. See the extension overview for the current interface details.
Build the integration in a deliberate sequence
- Define the user task. Specify what the user should see or do in the view, what data the tool needs, and which actions can change external state. Make the tool’s purpose and side effects explicit.
- Register the MCP tool. Give it a focused input schema and set
_meta.ui.resourceUrito the URI of the associated view. - Register the HTML resource. Provide the view under a
ui://URI, keeping presentation separate from the tool result. - Build the view with the extension SDK. The official TypeScript quickstart uses
@modelcontextprotocol/ext-appsalongside the MCP TypeScript SDK. As of October 7, 2026, its stated prerequisites include Node.js 20+ and MCP 2.x packages. Check the current quickstart for the complete setup and dependency list rather than copying version numbers from an older example. - Connect the view through the host bridge. Handle incoming tool data and implement only the interactions the workflow needs. Treat host-mediated requests and user-visible effects as part of the product design, not merely UI plumbing.
- Design and test the fallback. Ensure the tool returns a meaningful text result for a client that does not render the view, and test the tool independently of the UI.
- Validate the full path in each target host. Test resource loading, rendering, bridge behavior, permissions, user consent, and failure handling in the actual client surfaces your users will use.
- Pin and verify versions. Keep specification and SDK choices compatible, and test upgrades against the server, view, and host together.
Check client support by product surface
MCP Apps support is not universal, and support for the extension does not establish that a host implements every feature your view might use. The January 26, 2026 maintainer announcement named Claude web and desktop, Goose, Visual Studio Code Insiders, and ChatGPT as supporting clients, with ChatGPT support beginning that week. This is a dated snapshot, not a current compatibility guarantee. Verify the specific product surface, release, and capabilities before promising an embedded experience; the announcement provides the dated list.
Rank #2
- Physical Condition: No Defects
- Great one for reading
- It's a great choice for a book person
Build security into the interaction model
The MCP Apps design describes sandboxed iframes with restricted permissions, pre-declared templates that hosts can review, loggable JSON-RPC messages, and the possibility of requiring explicit user approval for UI-initiated tool calls. Those controls can help hosts constrain and audit an app, but they do not make every server or workflow safe by default. The maintainers also advise users to vet MCP servers before connecting them.
- Limit the tool’s authority. Expose only the inputs and actions needed for the user task, and make side effects clear.
- Review requests that can change state. Establish which UI-initiated calls need user consent and confirm that the target host’s policy provides the control you expect.
- Test host-specific protections. Validate iframe restrictions, permissions, approval flows, and message handling in each supported host; do not infer behavior solely from the extension design.
- Review the server and resource. Treat the MCP server and the HTML it serves as software requiring security review, and give users enough context to make an informed decision about connecting it.
The MCP Apps announcement describes the design safeguards and the continuing need to vet servers.
Rank #3
Plan for specification and SDK changes
The MCP Core Maintainers announced specification version 2026-07-28 on July 28, 2026. That release describes a stateless protocol core, header-based routing, cache hints on list results, authorization hardening and a shift toward client metadata documents, plus a formal deprecation policy. The announcement says the TypeScript, Python, Go, and C# Tier 1 SDKs were updated for that release. These are protocol-level changes; they do not establish that every MCP client has adopted every feature.
For a product team, the practical implication is to treat the protocol, SDKs, and host support as separate compatibility questions. Read the release and migration notes relevant to your deployment, pin versions you have tested, and verify the target host rather than assuming that MCP Apps support implies support for all newer protocol behavior. See the 2026-07-28 specification announcement and the MCP Apps quickstart.
Quick Recap
Best Value
Rank #4
Use a launch gate that reflects the real product risk
- Task fit: The view enables a user interaction that text or structured output would handle poorly.
- Coverage: The intended clients and exact product surfaces have been checked for the extension features the view uses.
- Fallback: The underlying tool still produces useful output without a rendered view.
- Security: Tool authority, side effects, user approvals, resource behavior, and host-specific controls have been reviewed.
- Operations: The team has a version-pinning and upgrade-testing plan for the server, SDK, specification, and view.
- Accessibility and upkeep: The interface remains understandable and maintainable within the conversation experience and the hosts where it runs.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
