MCP-Apps verändern das Internet. So baust du eine! (Skybridge)
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Wegen der KI findet branchenweit ein riesiger Paradigmenwechsel statt.
00:00:04Immer mehr Nutzer verwenden heutzutage Chatbots für ihre alltäglichen Suchen oder Recherchen.
00:00:10Deshalb wird das Konzept von MCP-Apps immer beliebter.
00:00:14Anstatt eine JSON-Datei oder ein Markdown-Dokument auszugeben,
00:00:18stellen mehr Apps und Dienste auf interaktive und hilfreiche Widgets innerhalb eines Chatbots um.
00:00:24Und das Unternehmen Alpic hat kürzlich ein cooles neues Framework namens SkyBridge veröffentlicht,
00:00:29das es super einfach macht, eigene benutzerdefinierte MCP-Apps für die verschiedensten Anwendungsfälle zu erstellen.
00:00:35Deshalb schauen wir uns SkyBridge im heutigen Video an, sehen, wie es funktioniert, und probieren es selbst aus.
00:00:41Das wird eine Menge Spaß machen, also stürzen wir uns hinein.
00:00:47Um wirklich zu verstehen, warum SkyBridge so eine große Sache ist, muss man verstehen, wie diese neuen Apps funktionieren.
00:00:53Wenn Sie eine herkömmliche Web-App erstellen, bauen Sie diese für einen einzigen Benutzer: den Menschen.
00:00:58Aber mit einer MCP-App bauen Sie eigentlich für zwei Benutzer gleichzeitig – den Menschen und den KI-Assistenten –,
00:01:05weil sie sich genau dieselbe Benutzeroberfläche teilen.
00:01:08Der Mensch kann auf Buttons klicken, Eingaben machen und Regler verschieben, und das LLM sieht diesen Zustand sofort.
00:01:15Umgekehrt kann das LLM die Daten im Hintergrund aktualisieren,
00:01:18und die Benutzeroberfläche ändert sich in Echtzeit direkt vor Ihren Augen.
00:01:21SkyBridge ist ein Open-Source-TypeScript-Framework dafür, das all die komplexe Logik übernimmt,
00:01:26die Protokollüberbrückung, die Bundessynchronisation und die Sicherheitsregeln,
00:01:30sodass Sie sich einfach auf das Schreiben von Standard-React-Code konzentrieren können.
00:01:34Wenn Sie schon einmal versucht haben, MCP-Apps für ChatGPT oder Claude zu erstellen,
00:01:39wissen Sie, dass die lokale Testschleife früher ein gewaltiges Kopfzerbrechen war.
00:01:43Man musste manuell öffentliche Tunnels einrichten, Konfigurationen kopieren und einfügen
00:01:47und seine Chat-Sitzungen neu starten, nur um einen winzigen CSS-Tippfehler zu beheben.
00:01:52Das Coolste an SkyBridge 1.0 ist jedoch, dass das DevTools-Kontrollpanel völlig neu gestaltet wurde.
00:01:59Wenn Sie jetzt Ihren lokalen Entwicklungsserver starten, öffnet sich ein Emulator-Dashboard in Ihrem Browser.
00:02:04Und in diesem Dashboard stehen Ihnen drei tolle Tools zur Verfügung.
00:02:08Das erste ist der Alpik Playground,
00:02:11eine lokale Sandbox, in der Sie Ihre Tools testen und Ihre React-Widgets über Live-Hot-Module-Replacement anpassen können.
00:02:17Dabei sehen Sie die Änderungen sofort, ohne auch nur ein echtes LLM zu berühren.
00:02:21Zweitens gibt es einen integrierten Tunnel,
00:02:24mit dem Sie Ihren lokalen Server buchstäblich mit einem einzigen Klick über eine sichere öffentliche URL freigeben können.
00:02:30Sie müssen sich also nicht mehr mit externem Tunneling herumschlagen.
00:02:33Fügen Sie diese URL einfach in die Entwicklereinstellungen von ChatGPT ein und Sie sind online.
00:02:37Und drittens gibt es das Beacon-Audit-Tool.
00:02:40Das ist ein Lebensretter, wenn Sie vorhaben, Ihre Apps in öffentlichen Stores einzureichen.
00:02:44Es scannt die Metadaten, Tools und Sicherheitsrichtlinien Ihrer App, um häufige Ablehnungsgründe abzufangen,
00:02:49bevor Sie Ihre App zur Überprüfung einreichen.
00:02:52Das Coolste daran ist, dass Sie, selbst wenn Sie noch nie eine MCP-App erstellt haben,
00:02:56einfach die SkyBridge-Fähigkeit auf Ihrem bevorzugten KI-Agenten installieren können, um sofort loszulegen.
00:03:02Versuchen wir nun also, eine kleine MCP-App selbst zu bauen und zu sehen, wie sie funktioniert.
00:03:07Für diese Demo habe ich diese kleine E-Commerce-Website vorbereitet,
00:03:11auf der Sie nach verschiedenen Kameraobjektiven shoppen können.
00:03:14Im Grunde ist es ein vollständig aufgebauter React-basierter Shop mit Warenkorb und Checkout-Funktionalität.
00:03:19Und jetzt möchte ich dafür eine MCP-App hinzufügen.
00:03:22Wenn also ein potenzieller Kunde einen Chatbot wie ChatGPT oder Claude verwendet, um nach Empfehlungen für Kameraobjektive zu suchen,
00:03:30wird dieser sofort unsere MCP-App aufrufen, um dem Endbenutzer unsere Produktlisten anzuzeigen.
00:03:36Wie ich bereits sagte, ist der einfachste Weg, um zu beginnen, einfach die SkyBridge-Erweiterung zu installieren.
00:03:42Wir können sie global oder nur für unser spezifisches Repo installieren.
00:03:46Für diesen Demozweck werde ich sie direkt im Repo installieren.
00:03:51Und jetzt sehen Sie, dass wir dieses .agents-Verzeichnis mit der vorhandenen SkyBridge-Fähigkeit haben.
00:03:57Alles, was ich jetzt tun muss, ist Claude zu bitten, mir eine MCP-App für meinen E-Commerce-Shop zu bauen.
00:04:04Bevor Claude sie baut, stellt es mir zunächst einige Rückfragen zum Zweck der App,
00:04:09um besser zu verstehen, welche Art von Funktionalität wir darin integrieren müssen.
00:04:13Für diese Demo möchte ich eine App haben, die Objektive basierend darauf auflistet, wonach der Benutzer sucht.
00:04:18Dann können wir sie auswählen und direkt miteinander vergleichen sowie sie in unseren Warenkorb legen.
00:04:24und unseren Kunden eine schnelle Checkout-Lösung anbieten.
00:04:28Das ist im Grunde alles, was ich tun muss.
00:04:29Jetzt lasse ich Claude einfach seine Arbeit machen.
00:04:32Nach ein paar Minuten sehen wir, dass Claude unsere MCP-App generiert hat.
00:04:37Das Coolste daran ist, dass wir jetzt das von SkyBridge bereitgestellte Entwickler-Dashboard öffnen.
00:04:41und es selbst ausprobieren können.
00:04:44Wenn wir das Dashboard öffnen, sehen wir, wie es aussieht.
00:04:47Hier haben wir unser Tool zum Suchen von Objektiven und das Tool zum Aufgeben von Bestellungen.
00:04:53Zuerst gebe ich für das Suchwerkzeug für Objektive den Höchstpreis für die Objektive ein, die ich suche.
00:05:00Und beschränken wir es vielleicht auf fünf Objektive.
00:05:03Und da haben Sie es.
00:05:04Es wurden 14 Treffer gefunden, die unter 2.000 US-Dollar liegen.
00:05:09So sieht die App auf dem Desktop aus.
00:05:12Wir können auch eine Vorschau der mobilen Ansicht anzeigen.
00:05:14Sieht gut aus.
00:05:15Wir haben auch einen Dark Mode und einen Light Mode.
00:05:18Hier haben wir die Tool-Ausgabe und den Zustand.
00:05:23Beobachten Sie, was passiert, wenn ich einige der Objektive auswähle.
00:05:26Wie Sie sehen, aktualisiert sich der Zustand direkt im laufenden Betrieb, was super cool ist.
00:05:31Wählen wir nun also drei Objektive aus.
00:05:34Wenn wir auf Vergleichen klicken, gelangen wir nun zum Vergleichsbildschirm.
00:05:40Hier sehen wir alle unsere drei Objektive nebeneinander mit allen Parametern.
00:05:45Wenn wir mit dieser Auswahl zufrieden sind, können wir auch zur Kasse gehen.
00:05:49Dies führt uns zum Checkout, wo wir unseren vollständigen Namen, unsere E-Mail-Adresse und Lieferadresse eingeben und unsere Bestellung aufgeben können.
00:05:59Wie Sie sehen, ist dieses Dashboard wirklich klasse, um Ihre Widgets zu testen und zu sehen, ob alles wie erwartet funktioniert.
00:06:08Wenn wir nun zu Claude und in die Einstellungen gehen, haben wir diesen Bereich namens Connectors.
00:06:16Dort müssen wir auf Anpassen klicken.
00:06:19Dafür benötigen Sie die Tunnel-URL.
00:06:21Stellen Sie also sicher, dass Sie den Tunnel aktiviert haben.
00:06:24Wir können diese URL einfach kopieren.
00:06:26Und im Abschnitt für die Konnektoren müssen Sie einfach einen benutzerdefinierten Konnektor hinzufügen.
00:06:31Vergeben Sie einen Namen.
00:06:33Und fügen Sie diese Tunnel-URL ein.
00:06:38Klicken Sie einfach auf Hinzufügen.
00:06:39Ich habe ihn hier bereits hinzugefügt.
00:06:41Das Letzte, was Sie tun müssen, ist auf Verbinden zu klicken.
00:06:45Sie können auch die Berechtigungen festlegen, wenn diese Tools automatisch ausgeführt werden sollen oder Sie eine Genehmigung des Benutzers wünschen.
00:06:53Dann können wir einfach einen neuen Chat starten.
00:06:57In dem neuen Chat kann ich jetzt fragen: Gib mir einige Empfehlungen für die besten Objektive unter 2.000 US-Dollar für Porträtaufnahmen.
00:07:05Wir können nun sehen, dass er sagt, er werde den Objektivshop-Katalog nach tollen Porträtoptionen unter 2.000 US-Dollar durchsuchen.
00:07:12Und sehen Sie sich das an.
00:07:14Er hat unsere MCP-App geöffnet.
00:07:16Wie cool ist das bitte?
00:07:18Wir können hier dieselben Dinge tun.
00:07:20Wir können einige der Objektive hier auswählen.
00:07:24Und dann in den Vergleichsbereich wechseln.
00:07:27Und es enthält diese kleine Vergleichstabelle.
00:07:32Das Einzige, was mir aufgefallen ist, ist, dass wir diesen weißen Bereich vom vorherigen Zustand unseres Tools haben.
00:07:40Das ist also wahrscheinlich etwas, das man in CSS beheben kann.
00:07:43Aber alles sieht großartig aus.
00:07:46Und wir haben auch die Option, zur Kasse zu gehen.
00:07:49Wir gelangen zum Checkout-Bereich, wo wir unsere Bestellung aufgeben können.
00:07:54Wie cool ist das denn?
00:07:57Und zu guter Letzt, und am wichtigsten, um zu sehen, ob Ihre App bereit ist, in den öffentlichen App-Stores veröffentlicht zu werden,
00:08:02können wir auch ein Audit unserer App über das Entwickler-Dashboard ausführen und prüfen, ob wir Probleme damit haben.
00:08:10Das war es im Grunde schon.
00:08:11In nur wenigen Minuten konnten wir mit SkyBridge eine produktionsbereite MCP-App erstellen.
00:08:16Die wir theoretisch im AI App Store einreichen könnten.
00:08:20Ich hoffe, dies zeigt Ihnen, wie einfach es ist, mit SkyBridge loszulegen.
00:08:25Und ehrlich gesagt fühlt es sich an wie die Zukunft des modernen Webs.
00:08:28Ich denke, wir werden sehen, wie immer mehr dieser interaktiven MCP-Widget-Apps in unseren Chatbots auftauchen.
00:08:34Es ist also schön, dass es Frameworks wie SkyBridge gibt, die uns Entwicklern den Prozess der Erstellung solcher Apps so viel einfacher machen.
00:08:42Da haben Sie es also, Leute.
00:08:44Das ist SkyBridge auf den Punkt gebracht.
00:08:46Was halten Sie von SkyBridge?
00:08:47Haben Sie es ausprobiert?
00:08:48Werden Sie es nutzen?
00:08:49Lassen Sie es uns unten in den Kommentaren wissen.
00:08:52Und Leute, wenn ihr diese Art von technischen Analysen mögt, lasst es mich wissen, indem ihr den Daumen-nach-oben-Button unter dem Video zerschmettert.
00:08:58Vergesst auch nicht, unseren Kanal zu abonnieren.
00:09:01Das war Andrus von BetterStack, und wir sehen uns in den nächsten Videos.
00:09:16ihr