3 posts tagged with "MCP Apps"

The next shift in AI tools is not only smarter text. It is AI you can see — maps, layouts, and lists that show up inside the conversation when a paragraph is not enough.

MCP Apps (the official extension for interactive UI in MCP hosts) are still early. Iframes feel clunky on some hosts, CSP trips up builders, and Claude and ChatGPT do not behave identically. When it works, though, the conversation changes: you get something you can click, drag, or approve — not just read.

Below are three real screenshots from ChatGPT — Canva, Tripadvisor, and Charge Atlas. No stock art, no protocol demo tiles.

MCP Apps are interactive tool outputs that render as rich HTML and CSS inside supported AI clients. Instead of stopping at plain text or raw JSON, an MCP tool can return a full, styled experience: dashboards, charts, forms, data tables, and cards that users can read and interact with in context.

The Model Context Protocol already made it possible for assistants to call tools against live systems. MCP Apps extend that idea: they turn those calls into something that feels closer to a small application than a chat transcript. For anyone searching mcp app or mcp apps, this guide explains what that means technically, why teams care, and how to build one.

Traditional MCP tools return text. AI clients display text well. Many real workflows still need visual output — a stock dashboard, a compliance summary, a project status board, a customer profile. MCP Apps bridge the gap between “the model called a tool” and “the user got something they can actually use on screen.”

MCP Apps look simple in the spec. Your tool returns HTML, the host renders it in an iframe, the user sees a dashboard instead of a wall of JSON. Build one app, it works everywhere.

In practice, I've shipped MCP Apps to both ChatGPT and Claude over the past few months and learned that "works everywhere" requires handling a surprising number of sharp edges — iframe sandboxing, data format differences, a picky initialization handshake, and an interactive tool-calling pattern that's barely documented anywhere.

Here's everything I've learned, with the exact code for each one.