MCP-Server mit MCP Apps bauen

Was ist MCP Apps?

MCP Apps ist eine offizielle Erweiterung des Model Context Protocols, mit der MCP-Server interaktive HTML/JavaScript-Oberflächen zurückgeben können. Diese werden direkt in der Host-Anwendung (Langdock, Claude Desktop, VS Code usw.) gerendert, statt nur reinen Text.

MCP vs MCP AppsStandard-MCP-Tools geben Text oder strukturierte Daten zurück. MCP Apps Tools können zusätzlich eine vollständig interaktive UI zurückgeben, etwa Formulare, Dashboards oder Visualisierungen, die direkt im Chat gerendert werden.

So funktioniert es

Tool deklariert eine UI-Ressource

Deine Tool-Definition enthält ein _meta.ui.resourceUri, das auf eine ui://-Ressource verweist, die dein MCP-Server bereitstellt. Das signalisiert kompatiblen Hosts, dass das Tool eine UI-Komponente hat.

Host lädt und rendert die UI

Wenn das LLM das Tool aufruft, lädt der Host das HTML von deinem Server und rendert es in einem sandboxed iframe direkt im Chat.

Bidirektionale Kommunikation

UI und Host kommunizieren über JSON-RPC via postMessage. Deine App kann Tool-Aufrufe anstoßen, den Kontext des Modells aktualisieren und Ergebnisse empfangen, ohne den Chat zu verlassen.

Sicherheitsmodell

MCP Apps läuft in einer Sandbox-Umgebung. Der Host kontrolliert, worauf deine App zugreifen darf:

Schicht	Was sie macht
Iframe-Sandbox	Isoliert die App vom Eltern-Tab und anderen Tabs
Vordeklarierte Ressourcen	Hosts prüfen das HTML vor dem Rendern
Auditierbares JSON-RPC	Jede App-zu-Host-Kommunikation ist protokollierbar
Nutzerzustimmung	Tool-Aufrufe aus der App brauchen weiterhin die Bestätigung des Nutzers

Eigene MCP App bauen

Das offizielle SDK ist @modelcontextprotocol/ext-apps. Es funktioniert mit React, Vue, Svelte, Solid, Preact und Vanilla-JavaScript. Das Kernmuster: Ein Tool gibt _meta.ui.resourceUri zurück, das auf eine ui://-Ressource zeigt, die dein Server als HTML ausliefert. Langdock lädt diese und rendert sie in einem sandboxed iframe direkt im Chat.

// Tool deklariert eine UI-Ressource
server.tool("render_form", { /* schema */ }, async (input) => ({
  content: [{ type: "text", text: "Formular wird geöffnet..." }],
  _meta: { ui: { resourceUri: "ui://my-form" } }
}));

// Server liefert das HTML aus
server.resource("ui://my-form", async () => ({
  contents: [{ uri: "ui://my-form", mimeType: "text/html", text: "<html>...</html>" }]
}));

MCP Apps Dokumentation

Offizielle Spezifikation, SDK-Referenz und Framework-Guides

ext-apps auf GitHub

SDK-Quellcode, Beispiele und Issue-Tracker

Beispiel: ServiceNow MCP Server

Der Langdock ServiceNow MCP Server ist eine Referenzimplementierung. Sie zeigt, wie sich OAuth Dynamic Client Registration (DCR) mit MCP Apps Formularen kombinieren lässt, um ServiceNow-Einträge direkt aus Langdock heraus zu erstellen. Er stellt drei Tools bereit:

Tool	Beschreibung
`get_form_fields`	Lädt verfügbare Felder aus einer ServiceNow-Tabelle
`render_form`	Gibt ein interaktives MCP Apps Formular zurück, optional vorausgefüllt aus dem Chat-Kontext
`submit_form`	Erstellt einen Eintrag in ServiceNow aus den eingereichten Formulardaten

servicenow-mcp-server

Referenzimplementierung mit OAuth DCR und MCP Apps Formularen für ServiceNow

Verbindung zu Langdock

Sobald dein MCP-Server läuft, verbindest du ihn wie jeden anderen MCP-Server mit Langdock. Im MCP Integrations-Guide findest du die Einrichtungsschritte inklusive Authentifizierungsoptionen.

​Was ist MCP Apps?

​So funktioniert es

​Sicherheitsmodell

​Eigene MCP App bauen

MCP Apps Dokumentation

ext-apps auf GitHub

​Beispiel: ServiceNow MCP Server

servicenow-mcp-server

​Verbindung zu Langdock

​Verwandte Dokumentation

Was ist MCP Apps?

So funktioniert es

Sicherheitsmodell

Eigene MCP App bauen

Beispiel: ServiceNow MCP Server

Verbindung zu Langdock

Verwandte Dokumentation