MCP Apps: AI Agents Just Became Applications

Published: February 2026 | LeanMCP Blog

TLDR: MCP Apps (SEP-1865) is the open standard that lets AI agents render interactive UIs inside the conversation. Cross-platform, backed by Anthropic and OpenAI, live in Claude and ChatGPT today. This post explains how it works and how to build one that actually runs in production using LeanMCP.

---

The Text Wall Problem

AI agents have had one output format for years: text.

Need to show a sales dashboard? Return JSON and hope the client renders it. Need a 20-field configuration form? Walk the user through each field, prompt by prompt. Need to display a product catalog? Describe it.

This isn't just a UX inconvenience. It's a hard ceiling on what agents can actually do. Commerce experiences, data exploration, multi-step approval workflows, complex configuration flows - none of these map cleanly to a chat thread.

MCP Apps ends this.

MCP Apps is the first official extension to the Model Context Protocol, co-authored by Anthropic and OpenAI. It lets your MCP server return fully interactive HTML interfaces that render directly inside Claude, ChatGPT, VS Code, and Goose - not in a new tab, not alongside the conversation, but inside it.

---

How MCP Apps Works

The architecture is built on proven web standards with security at its core:

• Pre-declared UI resources registered in the server manifest - hosts review and cache them before any tool is ever called
• Sandboxed iframes that isolate third-party code from the host application
• Bidirectional communication via existing MCP JSON-RPC over postMessage - no new SDKs, no new transport layer
• Full backward compatibility - text-only fallbacks for clients that don't yet support UI

The flow at runtime:

1. At connection time, your server declares UI resources in the manifest. The host pre-fetches and caches them.
2. The AI invokes a tool. If that tool has an associated UI resource URI, the host knows to render a UI.
3. The host loads the HTML into a sandboxed iframe. The UI hydrates with the tool's input and output data.
4. The user interacts. The iframe communicates back to the host and to the model via JSON-RPC over postMessage.

You control exactly what the model sees vs. what the view sees. Sensitive data can pass to the view without polluting the model's context window.

---

Building an MCP App with LeanMCP

The MCP spec defines the protocol. LeanMCP handles the production layer: auth, observability, multi-tenancy, type safety. Together, you can go from zero to a production-ready MCP App in minutes.

Step 1: Create your project

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

This generates a clean project structure:

my-mcp-app/
├── main.ts              # Entry point
├── package.json
├── tsconfig.json
└── mcp/
    └── example/
        └── index.ts     # Your services go here

Step 2: Define your tool

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

class SalesReportInput {
  @SchemaConstraint({ description: "Region to filter by", minLength: 1 })
  region!: string;

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

export class AnalyticsService {
  @Tool({
    description: "Get sales report data",
    inputClass: SalesReportInput
  })
  async getSalesReport(args: SalesReportInput) {
    const data = await fetchSalesData(args.region, args.range);

    // Return structured data - UI resource is registered
    // separately in the server manifest per MCP Apps spec
    return {
      region: args.region,
      totalRevenue: data.revenue,
      topProducts: data.products,
      chartData: data.chart
    };
  }
}

Step 3: Configure the server with observability

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

await createHTTPServer({
  name: "my-mcp-app",
  version: "1.0.0",
  port: 8080,
  cors: true,
  logging: true,       // tool calls, latency, errors - all tracked
  autoDiscover: true   // picks up everything in ./mcp automatically
});

Your server is live at http://localhost:8080/mcp.

Step 4: Add authentication - one decorator

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

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();

// Entire service is protected - token validated automatically
// from _meta.authorization.token in each request
@Authenticated(authProvider)
export class AnalyticsService {
  @Tool({
    description: "Get sales report - authenticated users only",
    inputClass: SalesReportInput
  })
  async getSalesReport(args: SalesReportInput) {
    // No token parsing needed - LeanMCP handles it
    return { data: await fetchSalesData(args.region) };
  }
}

The client calls your tool like this:

await mcpClient.callTool({
  name: "getSalesReport",
  arguments: { region: "APAC" },
  _meta: {
    authorization: {
      type: "bearer",
      token: "user-jwt-token"
    }
  }
});
// LeanMCP validates the token automatically.
// Your tool only runs if auth passes.
// No middleware code needed on your end.

Step 5: Add services as you grow

leanmcp add dashboard
# Creates mcp/dashboard/index.ts with boilerplate
# Auto-registers in main.ts
# Ready to customize immediately

---

MCP Apps vs GPT Apps

OpenAI's GPT Apps launched in October 2025 with an impressive partner list including Booking.com, Canva, Figma, and Spotify. But it's ChatGPT-only, proprietary, and controlled by one vendor.

MCP Apps is an open standard, jointly governed by the MCP UI Community Working Group.

	GPT Apps	MCP Apps	With LeanMCP
Platform	ChatGPT only	Claude, ChatGPT, VS Code, Goose	Both, one server
Standard	Proprietary (OpenAI)	Open (SEP-1865)	Supports both
Auth	Not included	Not included	@Authenticated decorator
Observability	Not included	Not included	logging: true
Multi-tenancy	Your problem	Your problem	Per-user API keys built in
Type safety	Manual	Manual	@SchemaConstraint decorators
Service discovery	Manual	Manual	autoDiscover: true

The same LeanMCP server serves both ecosystems without additional work. One codebase, full ecosystem coverage.

---

The Production Gap

Prototyping an MCP App is genuinely accessible. The official SDK (@modelcontextprotocol/ext-apps) ships with templates, and the useApp hook handles communication so you can focus on the interface.

Running one reliably at enterprise scale is a different problem. The MCP spec gives you the protocol. It does not give you:

• Multi-tenant auth - how do you authenticate each user separately?
• Per-user cost tracking - who is consuming your API budget?
• Secrets management - how do you inject API keys safely per-request?
• Audit trails - for compliance, who did what and when?
• Type-safe input validation - catch errors before they reach your tool logic
• Observability - when something breaks at 2am, how do you even know?

LeanMCP is purpose-built for this gap. It is the production runtime layer underneath your MCP App - the ground your agent runs on.

---

Real-World Use Cases

MCP Apps unlocks scenarios that simply were not practical as text exchanges:

• Data exploration - A sales analytics tool returns a live dashboard. Users filter by region, drill into accounts, and export reports without leaving the conversation.
• Configuration wizards - A deployment tool presents a form where selecting 'production' reveals additional security options. No sequential prompts required.
• Document review - A contract tool displays a PDF inline with highlighted clauses. Users click to approve or flag sections in real time.
• Commerce - Interactive product catalogs, size selectors, and cart flows embedded directly in agent conversations.
• Real-time monitoring - A server health tool shows live metrics without re-running the tool.

As of January 2026, MCP Apps is officially supported in Claude (web and desktop), ChatGPT, Goose, and VS Code Insiders. JetBrains, AWS, and Google DeepMind are actively integrating.

---

The Full Agent Stack

MCP Apps completes what is now a full agent platform:

Layer	Technology
Tools - what agents can do	MCP protocol
Auth - who can use them	OAuth in MCP spec
UI - what users see and interact with	MCP Apps (SEP-1865)
Runtime - how it all runs in production	LeanMCP

The ext-apps repository already includes working examples: threejs-server for 3D visualization, map-server for interactive maps, pdf-server for document viewing, and system-monitor-server for live dashboards.

---

Key Takeaways

• MCP Apps is the open, cross-platform standard for interactive AI agent UIs, backed by Anthropic, OpenAI, and the MCP community
• Unlike GPT Apps, it is platform-agnostic: write once, run in Claude, ChatGPT, VS Code, Goose, and more
• The builder experience is accessible - basic TypeScript knowledge and a working MCP server are enough to start
• The production gap (auth, observability, multi-tenancy, scaling) requires a dedicated runtime layer
• LeanMCP closes that gap: one server, both ecosystems, governance built in

---

Get Started

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

Links:

• GitHub: github.com/LeanMCP/leanmcp-sdk - open source, MIT licensed
• Docs: docs.leanmcp.com
• Website: leanmcp.com
• Discord: discord.com/invite/DsRcA3GwPy