Les applications MCP changent Internet. Voici comment en créer une ! (Skybridge)
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술
스크립트
00:00:00Il y a un énorme changement de paradigme qui s'opère dans toute l'industrie à cause de l'IA.
00:00:04De plus en plus d'utilisateurs utilisent des chatbots de nos jours pour leurs recherches ou requêtes habituelles,
00:00:10et c'est pourquoi le concept d'applications MCP devient de plus en plus populaire.
00:00:14Au lieu de cracher un fichier JSON ou un document Markdown,
00:00:18de plus en plus d'applications et de services basculent vers la fourniture de widgets interactifs et utiles dans un chatbot.
00:00:24Et l'entreprise Alpic a récemment publié un nouveau framework sympa appelé SkyBridge
00:00:29qui permet de créer très facilement vos propres applications MCP personnalisées pour toutes sortes de cas d'usage.
00:00:35Donc dans la vidéo d'aujourd'hui, nous allons découvrir SkyBridge, voir comment il fonctionne et l'essayer par nous-mêmes.
00:00:41Ça va être très amusant, alors plongeons-nous dedans.
00:00:47Pour vraiment comprendre pourquoi SkyBridge est si important, vous devez comprendre comment fonctionnent ces nouvelles applications.
00:00:53Lorsque vous créez une application web traditionnelle, vous la construisez pour un seul utilisateur, l'humain.
00:00:58Mais avec une application MCP, vous construisez en fait pour deux utilisateurs à la fois, l'humain et l'assistant IA,
00:01:05parce qu'ils partagent tous les deux exactement la même interface.
00:01:08L'humain peut cliquer sur des boutons, saisir des entrées et déplacer des curseurs, et le LLM voit instantanément cet état.
00:01:15Et inversement, le LLM peut mettre à jour les données en arrière-plan,
00:01:18et l'interface utilisateur change en temps réel juste sous vos yeux.
00:01:21Et SkyBridge est un framework TypeScript open source qui gère toute la plomberie complexe,
00:01:26le pontage de protocoles, la synchronisation des états et les règles de sécurité,
00:01:30afin que vous puissiez vous concentrer uniquement sur l'écriture de code React standard.
00:01:34Maintenant, si vous avez déjà essayé de créer des applications MCP pour ChatGPT ou Claude auparavant,
00:01:39vous savez que la boucle de test locale était un véritable casse-tête.
00:01:43Vous deviez configurer manuellement des tunnels publics, faire du copier-coller de configurations,
00:01:47et redémarrer vos sessions de chat juste pour corriger une minuscule faute de frappe CSS.
00:01:52Mais la partie la plus cool de SkyBridge 1.0 est qu'il a complètement repensé le panneau de contrôle DevTools.
00:01:59Maintenant, lorsque vous lancez votre serveur de développement local, il démarre un tableau de bord émulateur dans votre navigateur.
00:02:04Et à l'intérieur de ce tableau de bord, vous disposez de trois superbes outils.
00:02:08Le premier est le Playground Alpik,
00:02:11un bac à sable local où vous pouvez tester vos outils et peaufiner vos widgets React en utilisant le remplacement de module à chaud en direct.
00:02:17Et vous pouvez voir les modifications instantanément sans même toucher à un vrai LLM pour l'instant.
00:02:21Et deuxièmement, il y a un tunnel intégré,
00:02:24qui vous permet, littéralement en un seul clic, d'exposer votre serveur local via une URL publique sécurisée.
00:02:30Vous n'avez donc plus besoin de vous embêter avec le tunneling externe.
00:02:33Il vous suffit de coller cette URL dans les paramètres développeur de ChatGPT et vous êtes en ligne.
00:02:37Et le troisième est l'outil Beacon Audit.
00:02:40Et c'est un outil indispensable si vous prévoyez de soumettre vos applications à des stores publics.
00:02:44Il analyse les métadonnées, les outils et les politiques de sécurité de votre application pour détecter les motifs de rejet courants
00:02:49avant de soumettre votre application pour examen.
00:02:52Et le plus cool, c'est que même si vous n'avez jamais créé d'application MCP,
00:02:56vous pouvez facilement installer la compétence SkyBridge sur votre agent IA préféré pour commencer instantanément.
00:03:02Alors maintenant, essayons de construire une petite application MCP par nous-mêmes et de voir comment cela fonctionne.
00:03:07Donc pour cette démo, j'ai pris lesdevant et créé ce petit site e-commerce
00:03:11où vous pouvez acheter différents objectifs d'appareil photo.
00:03:14Et c'est essentiellement une boutique entièrement construite en React avec un panier et une fonctionnalité de paiement.
00:03:19Et maintenant, je veux y ajouter une application MCP.
00:03:22De sorte que si un client potentiel utilise un chatbot comme ChatGPT ou Claude pour rechercher des recommandations d'objectifs,
00:03:30il appellera immédiatement notre application MCP pour afficher nos listes de produits pour l'utilisateur final.
00:03:36Donc comme je l'ai dit avant, le moyen le plus simple de commencer est simplement d'installer la compétence SkyBridge.
00:03:42Et nous pouvons l'installer globalement ou juste pour notre dépôt spécifique.
00:03:46Et pour les besoins de cette démo, je vais l'installer dans le dépôt.
00:03:51Et maintenant vous pouvez voir que nous avons ce répertoire .agents avec la compétence SkyBridge présente.
00:03:57Et tout ce que j'ai à faire maintenant, c'est de demander à Claude de me créer une application MCP pour ma boutique e-commerce.
00:04:04Et avant de la construire, Claude va d'abord me poser quelques questions de suivi sur l'intention de l'application
00:04:09pour mieux comprendre quel type de fonctionnalités nous devons y inclure.
00:04:13Et pour cette démo, je veux une application qui répertorie les objectifs en fonction de ce que l'utilisateur recherche.
00:04:18Et ensuite nous pouvons les sélectionner et les comparer côte à côte et aussi les ajouter à notre panier
00:04:24et fournir une solution de paiement rapide pour nos clients.
00:04:28Et c'est fondamentalement tout ce que j'ai à faire.
00:04:29Et maintenant je laisse simplement Claude faire son travail.
00:04:32Et en quelques minutes environ, nous voyons que Claude a généré notre application MCP.
00:04:37Et la partie la plus cool est que nous pouvons maintenant ouvrir le tableau de bord de développement fourni par SkyBridge
00:04:41et l'essayer par nous-mêmes.
00:04:44Alors maintenant, si nous ouvrons le tableau de bord, nous pouvons voir à quoi il ressemble.
00:04:47Et ici nous avons notre outil de recherche d'objectifs et l'outil de passage de commande.
00:04:53Alors tout d'abord, pour la recherche d'objectifs, je vais simplement insérer le prix maximum pour les objectifs que je recherche.
00:05:00Et limitons cela à cinq objectifs peut-être.
00:05:03Et voilà.
00:05:04Il a trouvé 14 correspondances qui sont sous les 2 000 $.
00:05:09Voici à quoi ressemble l'application sur ordinateur.
00:05:12Nous pouvons également prévisualiser la vue mobile.
00:05:14Ça a l'air bien.
00:05:15Nous avons aussi un mode sombre et un mode clair.
00:05:18Et ici nous avons la sortie de l'outil et l'état.
00:05:23Et regardez ce qui se passe si je sélectionne certains des objectifs.
00:05:26Comme vous pouvez le voir, l'état se met à jour à la volée, ce qui est super cool.
00:05:31Alors maintenant, choisissons trois objectifs.
00:05:34Et maintenant, si nous cliquons sur comparer, nous arrivons à l'écran de comparaison.
00:05:40Et ici nous pouvons voir nos trois objectifs côte à côte avec tous les paramètres.
00:05:45Et si nous sommes satisfaits de cette sélection, nous pouvons également aller au paiement.
00:05:49Et cela passe à l'étape du paiement où nous pouvons entrer notre nom complet, notre e-mail, notre adresse de livraison et passer notre commande.
00:05:59Donc comme vous pouvez le voir, ce tableau de bord est vraiment cool pour tester vos widgets afin de voir si tout fonctionne comme prévu.
00:06:08Et maintenant, si nous allons sur Claude, et dans les paramètres, nous avons cette section appelée connecteurs.
00:06:16Et nous devons cliquer sur personnaliser.
00:06:19Et pour cela, vous aurez besoin de l'URL du tunnel.
00:06:21Assurez-vous donc d'avoir activé le tunnel.
00:06:24Et nous pouvons simplement copier cette URL.
00:06:26Et dans la section des connecteurs, vous avez juste à ajouter un connecteur personnalisé.
00:06:31Donnez un nom.
00:06:33Et coller l'URL de ce tunnel.
00:06:38Et cliquez simplement sur ajouter.
00:06:39Je l'ai déjà ajouté ici.
00:06:41Et la dernière chose à faire est de cliquer sur connecter.
00:06:45Et vous pouvez également définir les autorisations si vous voulez que ces outils s'exécutent automatiquement ou si vous voulez une approbation de l'utilisateur.
00:06:53Et ensuite nous pouvons simplement continuer et démarrer un nouveau chat.
00:06:57Et dans le nouveau chat, je peux maintenant demander, donne-moi quelques recommandations pour les meilleurs objectifs sous 2 000 $ pour la prise de portraits.
00:07:05Et nous pouvons maintenant voir qu'il indique qu'il va chercher dans le catalogue de la boutique d'objectifs de superbes options de portrait sous 2 000 $.
00:07:12Et regardez ça.
00:07:14Il a ouvert notre application MCP.
00:07:16C'est génial, non ?
00:07:18Et nous pouvons faire la même chose ici.
00:07:20Nous pouvons sélectionner certains des objectifs ici.
00:07:24Et ensuite aller dans la section de comparaison.
00:07:27Et il possède ce petit tableau de comparaison.
00:07:32La seule chose que j'ai remarquée est que nous avons cet espace blanc provenant de l'état précédent de notre outil.
00:07:40C'est donc probablement quelque chose que vous pouvez corriger en CSS.
00:07:43Mais tout a l'air super.
00:07:46Et nous avons aussi l'option de passer à la caisse.
00:07:49Et nous arrivons à la section de paiement où nous pouvons passer notre commande.
00:07:54Alors, n'est-ce pas formidable ?
00:07:57Et enfin, et plus important encore, pour voir si votre application est prête à être publiée sur les stores publics,
00:08:02nous pouvons également exécuter un audit de notre application via le tableau de bord développeur et vérifier si nous avons des problèmes avec.
00:08:10Et fondamentalement, c'est tout.
00:08:11En quelques minutes seulement, nous avons pu construire une application MCP prête pour la production avec SkyBridge.
00:08:16Que nous pourrions théoriquement soumettre à l'App Store de l'IA.
00:08:20J'espère donc que cela vous montre à quel point il est facile de démarrer avec SkyBridge.
00:08:25Et honnêtement, on dirait bien le futur du web moderne.
00:08:28Je pense que nous allons commencer à voir de plus en plus de ces applications de widgets MCP interactifs dans nos chatbots.
00:08:34Il est donc agréable qu'il existe des frameworks comme SkyBridge qui rendent le processus de création de ce type d'applications tellement plus facile pour nous, les développeurs.
00:08:42Voilà donc, les amis.
00:08:44C'est SkyBridge en bref.
00:08:46Alors que pensez-vous de SkyBridge ?
00:08:47L'avez-vous essayé ?
00:08:48Allez-vous l'utiliser ?
00:08:49Faites-le-nous savoir dans la section des commentaires ci-dessous.
00:08:52Et les amis, si vous aimez ce genre d'analyses techniques, faites-le-moi savoir en pulvérisant ce bouton J'aime sous la vidéo.
00:08:58Et aussi, n'oubliez pas de vous abonner à notre chaîne.
00:09:01C'était Andrus de BetterStack, et je vous vois dans les prochaines vidéos.
00:09:16vous