MCP Apps Next.js Starter

Ce qu'il fait

Ce kit de démarrage fournit un modèle pour créer des MCP Apps — des interfaces utilisateur interactives que les hôtes MCP rendent parallèlement aux appels d'outils. Il combine un frontend Next.js (servant d'interface utilisateur de widget) avec un point de terminaison de serveur MCP, permettant une passerelle fluide entre les résultats d'outils LLM et des composants React riches.

Fonctionnalités clés

• Hook useMcpApp préconfiguré pour une synchronisation facile de l'état entre l'hôte et l'interface utilisateur.
• Route de serveur MCP intégrée utilisant mcp-handler et @modelcontextprotocol/ext-apps.
• Mise en page prête pour iframe sandboxée avec middleware CORS pour un accès cross-origin sécurisé.
• Déploiement en un clic vers Vercel avec résolution automatique de BASE_URL.

Installation

1. Clonez le dépôt et exécutez pnpm install.
2. Définissez BASE_URL dans votre fichier .env (utilisez ngrok pour le développement local).
3. Déployez sur Vercel ou hébergez sur une URL HTTPS publique.
4. Ajoutez le point de terminaison /mcp à votre hôte MCP.

Hôtes supportés

• ChatGPT
• Cursor
• Claude.ai