Foto von Luke Chesser auf Unsplash Source

Anthropic und OpenAI, zwei Unternehmen, die sich sonst bei kaum etwas einig sind, haben sich auf eines geeinigt: KI-Chat-Fenster müssen echte Anwendungen darstellen können. MCP Apps (SEP-1865), die erste offizielle Erweiterung des Model Context Protocol, ermöglicht es MCP-Servern, interaktive HTML/CSS/JavaScript-Oberflächen zurückzugeben, die direkt in Claude, ChatGPT, VS Code und anderen MCP-Clients gerendert werden. Keine Markdown-Vorschauen, kein formatierter Text. Echte, in Sandboxes ausgeführte Web-Anwendungen mit Formularen, Diagrammen, Dashboards und bidirektionalem Datenfluss. Die Erweiterung wurde am 26. Januar 2026 mit 10 Launch-Partnern veröffentlicht, darunter Figma, Slack, Amplitude und Canva. Das GitHub-Repository hat bereits 1.900 Sterne gesammelt.

Das ist deshalb bedeutsam, weil es das Chat-Fenster von einem Ausgabeterminal in eine Anwendungsplattform verwandelt. Ein Analyse-Agent beschreibt nicht nur Ihre Kohortendaten, sondern rendert eine interaktive Heatmap zum Filtern. Ein Projektmanagement-Agent listet nicht Ihre Aufgaben auf, sondern zeigt ein Gantt-Diagramm, das Sie per Drag-and-Drop umplanen können.

Weiterlesen: MCP und A2A: Protokolle für KI-Agent-Kommunikation

Was MCP Apps sind und warum es sie gibt

Vor MCP Apps konnten MCP-Server Text, Bilder und strukturierte Daten zurückgeben. Mehr nicht. Wenn Ihr Tool Benutzereingaben benötigte (ein Formular, einen Bestätigungsdialog, einen Parameter-Regler), gab es zwei Möglichkeiten: aus dem Chat in eine separate Web-App wechseln oder das LLM Rückfragen in natürlicher Sprache stellen lassen und hoffen, dass der Nutzer genau die richtige Eingabe liefert. Beide Ansätze unterbrechen den Arbeitsfluss.

MCP Apps fügt dem Protokoll zwei Primitive hinzu. Erstens können Tools ein _meta.ui.resourceUri-Feld deklarieren, das auf eine ui://-Ressource verweist. Zweitens können Server UI-Ressourcen über das ui://-URI-Schema bereitstellen, die gebündeltes HTML, JavaScript und CSS enthalten. Wenn ein Tool eine UI-Referenz zurückgibt, lädt der Host-Client das HTML-Bundle herunter und rendert es in einem Sandbox-Iframe innerhalb der Konversation.

Die Spezifikation wurde am 21. November 2025 vorgeschlagen, zwei Monate lang mit über 25 substanziellen Kommentaren geprüft und am 28. Januar 2026 von Den Delimarsky gemergt. Bemerkenswert: Core-Maintainer von Anthropic und OpenAI haben die Spezifikation gemeinsam verfasst und dabei auf Community-Arbeiten des MCP-UI-Projekts und OpenAIs Apps SDK aufgebaut. Auch Entwickler von Postman, Shopify, HuggingFace und ElevenLabs waren beteiligt.

Das explizite Ziel aus der SEP-1865 Begründung: Fragmentierung verhindern, bei der “jeder Host leicht unterschiedliche Verhaltensweisen implementieren” könnte. Ein Standard, viele Clients.

Technische Funktionsweise von MCP Apps

Der Lebenszyklus einer MCP-App-Interaktion hat vier Phasen:

1. UI-Vorladen. Der Host-Client kann UI-Ressourcen vorab abrufen, bevor das Tool überhaupt aufgerufen wird. Das ermöglicht das Streaming von Tool-Eingaben an die App, während das LLM noch generiert, sodass die Oberfläche nahezu sofort erscheint.

2. Ressourcenabruf. Der Host lädt die HTML-Seite vom MCP-Server. Das ist typischerweise ein einzelnes Bundle mit eingebettetem JavaScript und CSS, wobei Apps externe Skripte von in _meta.ui.csp deklarierten Ursprüngen nachladen können.

3. Sandbox-Rendering. Das HTML wird in einem Sandbox-Iframe innerhalb der Konversation gerendert. Die Sandbox verhindert, dass die App auf das DOM, die Cookies oder den Local Storage des übergeordneten Fensters zugreift. Eine Double-Iframe-Architektur fügt eine weitere Schicht hinzu: Ein äußerer Iframe auf einer Allowlist-Domain fungiert als Proxy, der innere Iframe hostet die nicht vertrauenswürdige App mit restriktiven CSP-Regeln.

4. Bidirektionale Kommunikation. App und Host kommunizieren über JSON-RPC via postMessage. Die App kann MCP-Server-Tools aufrufen (app.callServerTool()), den Kontext des Modells aktualisieren (app.updateModelContext()), Events loggen, Links im Browser des Nutzers öffnen und Folgenachrichten in die Konversation zurücksenden.

Ein minimaler MCP-App-Server sieht so aus:

import { McpServer } from "@modelcontextprotocol/sdk/server";

const server = new McpServer({ name: "demo-app" });

server.tool(
  "show_dashboard",
  { query: { type: "string" } },
  async ({ query }) => ({
    content: [{ type: "text", text: `Dashboard für: ${query}` }],
    _meta: {
      ui: { resourceUri: "ui://dashboard" }
    }
  })
);

server.resource("ui://dashboard", async () => ({
  contents: [{
    uri: "ui://dashboard",
    mimeType: "text/html",
    text: `<html><body>
      <script src="https://cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps"></script>
      <div id="app">Interaktives Dashboard</div>
    </body></html>`
  }]
}));

Der entscheidende Unterschied zu regulären MCP-Tools: Normale Tools geben Daten zurück, und die Konversation geht weiter. MCP Apps schaffen eine persistente, interaktive Sitzung, in der Nutzer mit der Oberfläche interagieren können, ohne eine weitere Nachricht einzutippen.

Weiterlesen: MCP vs. Function Calling: Wann brauchen Sie was?

Entwicklererfahrung: SDKs, Templates und über 15 Beispiele

Das npm-Paket @modelcontextprotocol/ext-apps liefert alles Nötige mit. Die zentrale App-Klasse übernimmt das postMessage-Protokoll, aber Sie sind nicht darauf festgelegt: Sie können die JSON-RPC-Kommunikation auch direkt implementieren.

Framework-Unterstützung ist breit: Offizielle Starter-Templates gibt es für React, Vue, Svelte, Preact, Solid und Vanilla JavaScript. Das Build-System nutzt Bun, Tests laufen über Playwright, und die API-Dokumentation wird via TypeDoc unter apps.extensions.modelcontextprotocol.io generiert.

Für React bietet das Paket Hooks wie useApp (Verbindungslebenszyklus) und useHostStyles (Übernahme des Host-Themes), sodass Ihre MCP App den Dunkelmodus von Claude oder das visuelle Design von ChatGPT ohne manuelles CSS übernehmen kann.

Das Repository enthält über 15 Beispielserver für reale Anwendungsfälle:

BeispielserverFunktion
threejs-server3D-Szenen-Rendering im Chat
map-serverInteraktiver CesiumJS-Globus
pdf-serverDokumentenviewer mit Annotationen
system-monitor-serverLive-CPU/Speicher-Dashboard
cohort-heatmap-serverAnalyse-Visualisierung
scenario-modeler-serverWas-wäre-wenn-Geschäftsmodellierung

Vier KI-Coding-Agent-Skills sind im SDK enthalten: create-mcp-app (von Grund auf erstellen), migrate-oai-app (OpenAI Apps konvertieren), add-app-to-server (UI zu bestehenden MCP-Servern hinzufügen) und convert-web-app (beliebige Web-App in MCP App umwandeln). Das Migrationstool spricht Bände: Es signalisiert, wie schnell sich das Ökosystem auf diesen Standard konsolidiert hat.

Sicherheit: Fremder Code in Ihrem Chat-Fenster

The Register formulierte es direkt: “Running UI from MCP servers means running code you didn’t write.” Die Sorge ist berechtigt. MCP Apps führen effektiv Drittanbieter-Web-Anwendungen in Ihrem sensibelsten Arbeitsbereich aus.

Für DACH-Unternehmen verschärft sich die Frage zusätzlich: Wenn ein MCP-App-Server personenbezogene Daten verarbeitet, die über das Chat-Fenster fließen, greifen die DSGVO-Anforderungen an Auftragsverarbeitung. Die Datenschutzkonferenz hat klargestellt, dass KI-gestützte Datenverarbeitung unter die bestehenden Regeln fällt. Unternehmen müssen prüfen, welche Daten über postMessage an Drittanbieter-Apps gelangen.

Das Verteidigungsmodell ist mehrschichtig:

Iframe-Sandboxing. Alle UIs laufen in Sandbox-Iframes mit allow-scripts allow-same-origin, aber ohne Zugriff auf das übergeordnete Fenster. Die Double-Iframe-Architektur bedeutet: Selbst wenn die innere App ihre Sandbox verlässt, trifft sie auf eine zweite Grenze mit anderem Origin.

Deklarative CSP. Jede App deklariert über Metadatenfelder, welche externen Domains sie benötigt: connectDomains, resourceDomains, frameDomains, baseUriDomains. Der Host konstruiert CSP-Header dynamisch aus diesen Deklarationen mit restriktiven Standardwerten.

Auditierbare Kommunikation. Jede Nachricht zwischen App und Host läuft über den JSON-RPC-postMessage-Kanal, der vollständig protokollierbar ist. Enterprise-Deployments können exakt überwachen, welche Daten zwischen App und KI-Modell fließen.

Nutzereinwilligung. Hosts können für UI-initiierte Tool-Aufrufe eine explizite Genehmigung des Nutzers verlangen. Wenn eine Figma-MCP-App eine neue Designdatei erstellen will, sieht der Nutzer einen Bestätigungsdialog.

Weiterlesen: MCP unter Beschuss: CVEs, Tool Poisoning und wie Sie Ihre KI-Agent-Integrationen absichern

Launch-Partner und Client-Unterstützung

Zehn Unternehmen starteten am ersten Tag mit MCP-Apps-Integrationen:

PartnerWas Nutzer im Chat erhalten
AmplitudeInteraktive Analyse-Diagramme erstellen und erkunden
AsanaKonversationen in Projekte, Aufgaben und Zeitpläne umwandeln
BoxDateien durchsuchen, Dokumente anzeigen, Erkenntnisse extrahieren
CanvaPräsentationen mit Echtzeit-Branding gestalten
ClayUnternehmen recherchieren, personalisierte Ansprachen entwerfen
FigmaFlussdiagramme und Diagramme in FigJam generieren
HexDaten abfragen, interaktive Diagramme mit Quellenangaben
monday.comBoards verwalten, Aufgaben zuweisen, Status aktualisieren
SlackKonversationen durchsuchen, formatierte Nachrichten entwerfen
SalesforceDemnächst über Agentforce 360

Client-Unterstützung umfasst bereits die wichtigsten Plattformen: Claude (Web und Desktop), ChatGPT (zeitgleich ausgerollt), VS Code mit GitHub Copilot (Insiders-Channel), Goose, Postman und MCPJam. Die plattformübergreifende Geschichte unterscheidet MCP Apps von herstellergebundenen Alternativen. Eine Figma-MCP-App bauen, überall nutzen.

MCP Apps vs. Google A2UI vs. Custom GPTs

Drei Ansätze für Agent-UI konkurrieren derzeit, und sie verkörpern grundlegend verschiedene Philosophien.

MCP Apps (Anthropic + OpenAI): Senden opake HTML/JavaScript-Bundles. Der Host rendert sie in Sandbox-Iframes. Volle gestalterische Freiheit für Entwickler. Der Nachteil: Apps sehen aus und verhalten sich wie eingebettete Webseiten, nicht wie native Komponenten, und die Iframe-Grenze erzeugt einen visuellen Bruch zum Host-Design.

Google A2UI (angekündigt Dezember 2025): Sendet deklarative JSON-Blueprints, die Komponentenbäume beschreiben. Clients rendern mit nativen Widgets (Flutter, SwiftUI, React-Komponenten). Das Ergebnis übernimmt automatisch Theme und Barrierefreiheitsmerkmale des Hosts. Google beschreibt es als “sicher wie Daten, aber ausdrucksstark wie Code.” Der Nachteil: beschränkt auf die vom Client unterstützte Komponentenmenge; kein beliebiges HTML-Rendering.

OpenAI Custom GPTs / Actions: Plattformgebundene Integrationen, die nur in ChatGPT funktionieren. OpenAI hat MCP Apps als Basis für ihr Apps SDK übernommen und damit eingestanden, dass der Walled-Garden-Ansatz verloren hat. Ihre Apps-SDK-Dokumentation referenziert MCP als zugrundeliegenden Standard.

Für deutsche Unternehmen, die unter dem EU AI Act arbeiten, bieten MCP Apps durch ihre auditierbare postMessage-Schicht einen Transparenzvorteil. Die Protokollierbarkeit jeder Interaktion zwischen App und Modell erleichtert die Nachweispflichten, die ab August 2026 für Hochrisiko-KI-Systeme gelten.

Bedeutung für das Agenten-Ökosystem

MCP Apps verschieben das Interaktionsmodell von “Chat mit Tools” zu “Chat als Betriebssystem.” Das Chat-Fenster wird zur Oberfläche, auf der Anwendungen laufen, mit dem KI-Modell als Orchestrierungsschicht.

Für Entwickler ist die nächste Aktion klar: Wenn Sie einen MCP-Server betreiben, prüfen Sie, ob Ihre Tools von einer visuellen Oberfläche profitieren würden. Datenabfragen, Konfigurationsassistenten, Dokumentvorschauen und Monitoring-Dashboards sind naheliegende Kandidaten. Das SDK macht das Hinzufügen von UI zu einem bestehenden Server zu einer Sache von Stunden, nicht Wochen.

Die 1.900 Sterne und 596 Commits in zwei Monaten zeigen: Das ist kein Papierstandard, sondern produktiv eingesetzter Code. Ob der Sandbox-Iframe-Ansatz den Sicherheitsanforderungen deutscher Unternehmen standhält, oder ob Googles deklaratives A2UI-Modell als sicherere Alternative an Boden gewinnt, bleibt die offene Frage für die zweite Jahreshälfte 2026.

Häufig gestellte Fragen

Was sind MCP Apps?

MCP Apps (SEP-1865) sind die erste offizielle Erweiterung des Model Context Protocol. Sie ermöglichen MCP-Servern, interaktive HTML/CSS/JavaScript-Benutzeroberflächen zurückzugeben, die direkt in KI-Chat-Fenstern wie Claude und ChatGPT gerendert werden. Statt reiner Textausgabe können Agents Dashboards, Formulare und Visualisierungen anzeigen.

Welche KI-Clients unterstützen MCP Apps?

Anfang 2026 werden MCP Apps von Claude (Web und Desktop), ChatGPT (wird ausgerollt), VS Code mit GitHub Copilot (Insiders-Channel), Goose, Postman und MCPJam unterstützt. Die plattformübergreifende Unterstützung bedeutet, dass eine einzelne MCP App auf mehreren KI-Assistenten funktioniert.

Sind MCP Apps sicher und DSGVO-konform?

MCP Apps nutzen ein mehrschichtiges Sicherheitsmodell mit Sandbox-Iframes (Double-Iframe-Architektur), deklarativer Content Security Policy pro App, auditierbarer JSON-RPC-Kommunikation und Nutzereinwilligung für Tool-Aufrufe. Für die DSGVO-Konformität müssen Unternehmen zusätzlich prüfen, welche personenbezogenen Daten über die postMessage-Schnittstelle an Drittanbieter-Apps fließen.

Wie unterscheiden sich MCP Apps von Google A2UI?

MCP Apps senden opake HTML/JavaScript-Bundles, die in Sandbox-Iframes gerendert werden und volle gestalterische Freiheit bieten. Google A2UI sendet deklarative JSON-Blueprints, die mit nativen Widgets gerendert werden und automatisch das Host-Theme und Barrierefreiheitsmerkmale übernehmen. MCP Apps bieten mehr Flexibilität, A2UI engere Integration mit nativen Plattformen.

Wie erstelle ich eine MCP App?

Installieren Sie das npm-Paket @modelcontextprotocol/ext-apps, nutzen Sie eines der sechs Framework-Starter-Templates (React, Vue, Svelte, Preact, Solid oder Vanilla JS) und fügen Sie eine ui://-Ressource zu Ihrem MCP-Server hinzu. Das SDK bietet eine App-Klasse für die Kommunikation und React-Hooks wie useApp für das Lifecycle-Management.