From Text to Interaction: A Software Engineer's Guide to the MCP Apps Protocol

modelcontextprotocol/ext-apps

The Model Context Protocol (MCP) Apps extension changes that. It allows AI models to not just send text back, but to serve embedded UI components directly into the chat interface.

Think of MCP Apps as a bridge between an AI server and a frontend. Instead of the AI just saying, "I've updated your database," it can pop up a mini-dashboard or a data grid right in the chat that allows you to filter, edit, and confirm changes.

It’s essentially a standard for Micro-Frontends served via MCP.

Rich Interactivity
Stop squinting at JSON blocks. You can render charts, interactive maps, or complex forms.

Contextual Control
Users can interact with the app in a way that provides structured data back to the AI, reducing "hallucinations" caused by messy text prompts.

Standardization
Using a single protocol means you don't have to rebuild the UI logic for every different AI platform. Build the "App" once on your MCP server, and any compatible client can render it.

The flow follows a simple request-response pattern within the MCP framework

Discovery
The client asks the MCP server what "Apps" it supports.

Invocation
The AI decides it needs a specific UI (e.g., a "Deployment Tracker").

Rendering
The server sends a definition (often a web component or a specific schema) that the client's UI container displays.

To get started, you'll need the MCP TypeScript SDK. Here is a conceptual look at how you might define an "App" on your server.

Imagine you want to create a simple "Ticket Viewer" app.

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { ListAppsRequestSchema, GetAppRequestSchema } from "@modelcontextprotocol/sdk/types.js";

const server = new Server({
  name: "ticket-manager",
  version: "1.0.0",
});

// 1. List available apps
server.setRequestHandler(ListAppsRequestSchema, async () => {
  return {
    apps: [
      {
        id: "ticket-list",
        name: "Jira Ticket Viewer",
        description: "View and edit status of current sprint tickets",
      },
    ],
  };
});

// 2. Provide the app content (the UI definition)
server.setRequestHandler(GetAppRequestSchema, async (request) => {
  if (request.params.id === "ticket-list") {
    return {
      content: {
        type: "html", // Or a specific UI framework format
        value: "<div><h3>Ticket #101</h3><button onclick='fix()'>Resolve</button></div>",
      },
    };
  }
  throw new Error("App not found");
});

You would host this server as a standard MCP server (via stdio or HTTP). When a user asks, "What's the status of my tickets?", the AI can trigger the ticket-list app.

Explore the Repo
Head over to the modelcontextprotocol/ext-apps repository to see the latest spec definitions.

Install the SDK
Use npm install @modelcontextprotocol/sdk.

Build a Tool First
Most people start by building a standard MCP tool. Once that's working, adding an "App" layer on top is the natural next step for a better UX.

It’s an exciting time to be building in the AI space—moving from "Chatbots" to "AI-Native Operating Systems."