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. In Langdock erscheint der iframe nach dem Tool-Aufruf als eigenständiger Output im Chat. Auf dem Desktop kannst du ihn in der Seitenansicht öffnen oder im Chat anzeigen.

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.

MCP Apps im Chat anzeigen

Wenn ein MCP-Tool eine UI-Ressource deklariert, zeigt Langdock die zugehörige MCP App nach Abschluss des Tools als eigenständige Ausgabe im Chat an. Die App erscheint außerhalb der Details des Aufrufs. Standard-MCP-Tools ohne UI-Ressource zeigen weiterhin ihre reguläre Ausgabe. Auf dem Desktop wählst du In der Seitenansicht öffnen, um die App in einer größenveränderbaren Seitenansicht zu öffnen und gleichzeitig im Chat weiterzuarbeiten. Wähle Im Chat anzeigen, um sie zurück in den Chat zu verschieben.

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 sie und rendert sie in einem sandboxed iframe als eigenständigen Output im Chat. Auf dem Desktop kannst du sie auch in der Seitenansicht öffnen.

// 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.

Erste Schritte

Chat

Skills

Dateien

Agenten

Workflows

Integrationen

Microsoft Plugins

Modelle & Limits

Anleitungen

Account

Ressourcen

Fehlerbehebung

MCP-Server mit MCP Apps bauen

Was ist MCP Apps?

So funktioniert es

MCP Apps im Chat anzeigen

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

​MCP Apps im Chat anzeigen

​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

MCP Apps im Chat anzeigen

Sicherheitsmodell

Eigene MCP App bauen

Beispiel: ServiceNow MCP Server

Verbindung zu Langdock

Verwandte Dokumentation