mcp

Über mcp

Die json-render MCP-Integration stellt json-render-Benutzeroberflächen als interaktive MCP-Apps innerhalb von MCP-fähigen Clients wie Claude, ChatGPT, Cursor und VS Code bereit. Auf der Serverseite erstellt createMcpApp() einen vollständigen McpServer, der ein render-ui-Tool sowie eine ui://-HTML-Ressource registriert; die Tool-Beschreibung enthält den Katalog-Prompt, damit das Modell weiß, wie es gültige UI-Spezifikationen generieren muss, und die HTML-Ressource ist eine mit Vite gebündelte Single-File-React-Anwendung.

Der Rendering-Vorgang läuft innerhalb eines Iframes. Der Client-Hook useJsonRenderApp() stellt über postMessage eine Verbindung zum Host her und gibt spec, loading, connected, error und callServerTool zurück, die von einer kleinen React-Ansicht an JSONUIProvider und Renderer übergeben werden. Das eigenständige Iframe-HTML wird durch das Bündeln der React-Anwendung mit Vite und vite-plugin-singlefile erzeugt, sodass alles in einer einzigen Datei ausgeliefert wird.

Neben dem Haupteinsprungspunkt bietet die Server-API registerJsonRenderTool und registerJsonRenderResource zum Einbinden von json-render in einen bestehenden Server, während die Client-API buildAppHtml hinzufügt. Das Dokument enthält sofort einsatzbereite Client-Konfigurationen für Cursor über .cursor/mcp.json und für Claude Desktop sowie eine Liste der erforderlichen Pakete für den Server (@json-render/mcp, @json-render/core, @modelcontextprotocol/sdk), den Iframe-Client (@json-render/react, @json-render/shadcn, react, react-dom) und die Build-Tools. Es eignet sich hervorragend für den Aufbau von MCP-Servern, die interaktive, komponentengesteuerte Benutzeroberflächen statt reinen Textausgaben präsentieren müssen.

Häufig gestellte Fragen (FAQ)

Welche MCP-Clients werden angesprochen?

Claude, ChatGPT, Cursor, VS Code und andere MCP-fähige Clients, die MCP-Apps hosten können.

Was richtet createMcpApp() ein?

Einen vollständigen McpServer, der ein render-ui-Tool und eine ui://-HTML-Ressource registriert. Die Tool-Beschreibung enthält den Katalog-Prompt, damit das Modell gültige Spezifikationen generieren kann.

Wie wird das Iframe-HTML erstellt?

Durch das Bündeln der React-Anwendung in eine einzige, eigenständige HTML-Datei unter Verwendung von Vite zusammen mit vite-plugin-singlefile.

Welcher Client-Hook rendert die Spezifikationen?

useJsonRenderApp() stellt über postMessage eine Verbindung zum Host her und gibt spec, loading, connected, error und callServerTool zurück, damit die React-Ansicht diese rendern kann.

Welche Pakete werden für den Server benötigt?

@json-render/mcp, @json-render/core und @modelcontextprotocol/sdk. Der Iframe-Client verwendet zusätzlich @json-render/react, @json-render/shadcn, react und react-dom.