mcp

À propos de mcp

L'intégration MCP json-render expose les interfaces utilisateur json-render en tant qu'applications MCP interactives au sein de clients compatibles avec MCP, tels que Claude, ChatGPT, Cursor et VS Code. Côté serveur, createMcpApp() construit un McpServer complet qui enregistre un outil render-ui ainsi qu'une ressource HTML ui:// ; la description de l'intègre le prompt du catalogue afin que le modèle sache comment émettre des spécifications d'interface valide, et la ressource HTML est une application React mono-fichier groupée avec Vite.

Le processus de rendu s'exécute dans un iframe. Le hook client useJsonRenderApp() se connecte à l'hôte via postMessage et retourne spec, loading, connected, error, et callServerTool, que transmet à JSONUIProvider et Renderer. Le HTML de l'iframe autonome est produit en groupant l'application React avec Vite et vite-plugin-singlefile, de sorte que tout soit livré dans un seul fichier.

Au-delà du point d'entrée principal, l'API serveur expose registerJsonRenderTool et registerJsonRenderResource pour connecter json-render à un serveur existant, tandis que l'API client ajoute buildAppHtml. Le document inclut des configurations client prêtes à l'emploi pour Cursor via .cursor/mcp.json et pour Claude Desktop, et liste les ensembles d'installation pour le serveur (@json-render/mcp, @json-render/core, @modelcontextprotocol/sdk), le client iframe (@json-render/react, @json-render/shadcn, react, react-dom), et les outils de construction. Il convient lors de la création de serveurs MCP qui doivent présenter des interfaces utilisateur interactives et basées sur des composants plutôt que des sorties de texte brut.

FAQ

Quels clients MCP sont ciblés ?

Claude, ChatGPT, Cursor, VS Code et d'autres clients compatibles avec MCP capables d'héberger des applications MCP.

Que configure createMcpApp() ?

Un McpServer complet qui enregistre un outil render-ui et une ressource HTML ui://. La description de l'outil contient le prompt du catalogue afin que le modèle puisse générer des spécifications valides.

Comment le HTML de l'iframe est-il construit ?

En groupant l'application React dans un seul fichier HTML autonome à l'aide de Vite conjointement avec vite-plugin-singlefile.

Quel hook client rend les spécifications ?

useJsonRenderApp() se connecte à l'hôte via postMessage et retourne spec, loading, connected, error, et callServerTool pour que la vue React puisse les rendre.

Quels packages sont requis pour le serveur ?

@json-render/mcp, @json-render/core et @modelcontextprotocol/sdk. Le client iframe utilise également @json-render/react, @json-render/shadcn, react et react-dom.