Aplikasi MCP Mengubah Internet. Begini Cara Membuatnya! (Skybridge)
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Terjadi pergeseran paradigma besar di seluruh industri akibat kecerdasan buatan.
00:00:04Semakin banyak pengguna yang menggunakan chatbot saat ini untuk pencarian rutin atau riset,
00:00:10dan itulah mengapa konsep aplikasi MCP semakin populer.
00:00:14Daripada sekadar mengeluarkan berkas JSON atau dokumen markdown,
00:00:18lebih banyak aplikasi dan layanan beralih menyediakan widget interaktif yang berguna di dalam chatbot.
00:00:24Dan perusahaan Alpic baru-baru ini merilis kerangka kerja baru yang keren bernama SkyBridge
00:00:29yang membuatnya sangat mudah untuk membuat aplikasi MCP kustom Anda sendiri untuk berbagai macam kasus penggunaan.
00:00:35Jadi dalam video hari ini, kita akan melihat SkyBridge, melihat cara kerjanya, dan mencobanya sendiri.
00:00:41Ini akan sangat seru, jadi mari kita langsung bahas.
00:00:47Untuk benar-benar memahami mengapa SkyBridge begitu penting, Anda harus memahami cara kerja aplikasi baru ini.
00:00:53Saat Anda membangun aplikasi web tradisional, Anda membangunnya untuk satu pengguna, yaitu manusia.
00:00:58Tetapi dengan aplikasi MCP, Anda sebenarnya membangun untuk dua pengguna sekaligus, manusia dan asisten AI,
00:01:05karena keduanya berbagi antarmuka yang persis sama.
00:01:08Manusia dapat mengklik tombol, mengetik masukan, dan menggeser penggeser, dan LLM langsung melihat status tersebut.
00:01:15Sebaliknya, LLM dapat memperbarui data di latar belakang,
00:01:18dan UI berubah secara real-time tepat di depan Anda.
00:01:21Dan SkyBridge adalah kerangka kerja TypeScript sumber terbuka untuk itu yang menangani semua kerumitan di balik layar,
00:01:26penghubungan protokol, sinkronisasi status, dan aturan keamanan,
00:01:30sehingga Anda dapat fokus menulis kode React standar.
00:01:34Sekarang, jika Anda pernah mencoba membangun aplikasi MCP untuk ChatGPT atau Claude sebelumnya,
00:01:39Anda tahu bahwa siklus pengujian lokal dulunya sangat merepotkan.
00:01:43Anda harus menyiapkan terowongan publik secara manual, menyalin dan menempelkan konfigurasi,
00:01:47dan memulai ulang sesi obrolan Anda hanya untuk memperbaiki kesalahan kecil pada CSS.
00:01:52Namun bagian paling keren dari SkyBridge 1.0 adalah mereka merombak total panel kontrol DevTools.
00:01:59Sekarang, saat Anda menjalankan server pengembang lokal, server tersebut meluncurkan dasbor emulator di peramban Anda.
00:02:04Dan di dalam dasbor ini, Anda memiliki tiga alat yang bagus.
00:02:08Yang pertama adalah Alpik Playground,
00:02:11kotak pasir lokal tempat Anda dapat menguji alat dan mengubah widget React menggunakan penggantian modul langsung.
00:02:17Dan Anda dapat melihat perubahan secara instan tanpa menyentuh LLM sungguhan.
00:02:21Kedua, terdapat terowongan terintegrasi,
00:02:24yang memungkinkan Anda mengekspos server lokal melalui URL publik yang aman secara harfiah dengan satu klik.
00:02:30Jadi Anda tidak perlu repot-repot dengan penerowongan eksternal lagi.
00:02:33Cukup tempel URL ini ke pengaturan pengembang ChatGPT dan Anda siap menggunakannya.
00:02:37Dan yang ketiga adalah alat Beacon Audit.
00:02:40Dan ini sangat membantu jika Anda berencana mengirimkan aplikasi Anda ke toko publik.
00:02:44Alat ini memindai metadata, alat, dan kebijakan keamanan aplikasi Anda untuk mendeteksi pemicu penolakan umum
00:02:49sebelum Anda mengirimkan aplikasi untuk ditinjau.
00:02:52Dan yang paling keren adalah bahkan jika Anda belum pernah membuat aplikasi MCP,
00:02:56Anda dapat dengan mudah memasang keterampilan SkyBridge ke agen AI favorit Anda untuk langsung mulai.
00:03:02Jadi sekarang mari kita coba membuat aplikasi MCP kecil sendiri dan melihat cara kerjanya.
00:03:07Jadi untuk demo ini, saya telah membuat situs web e-commerce kecil ini
00:03:11tempat Anda dapat berbelanja berbagai lensa kamera.
00:03:14Dan ini pada dasarnya adalah toko berbasis React yang berfungsi penuh dengan keranjang dan fungsionalitas pembayaran.
00:03:19Dan sekarang saya ingin menambahkan aplikasi MCP untuk itu.
00:03:22Sehingga jika calon pelanggan menggunakan chatbot seperti ChatGPT atau Claude untuk mencari rekomendasi lensa kamera,
00:03:30aplikasi itu akan langsung memanggil aplikasi MCP kita untuk menampilkan daftar produk kepada pengguna.
00:03:36Jadi seperti yang saya katakan sebelumnya, cara termudah untuk memulai adalah dengan menginstal keterampilan SkyBridge.
00:03:42Dan kita dapat menginstalnya secara global atau hanya untuk repositori khusus kita.
00:03:46Dan untuk tujuan demo ini, saya akan melanjutkan dan menginstalnya di dalam repositori.
00:03:51Dan sekarang Anda dapat melihat kita memiliki direktori .agents dengan keterampilan SkyBridge di dalamnya.
00:03:57Dan yang harus saya lakukan sekarang adalah meminta Claude untuk membuatkan aplikasi MCP untuk toko e-commerce saya.
00:04:04Dan sebelum membuatnya, Claude akan menanyakan beberapa pertanyaan lanjutan tentang tujuan aplikasi tersebut
00:04:09untuk lebih memahami fungsionalitas apa yang perlu kita sertakan di dalamnya.
00:04:13Dan untuk demo ini, saya ingin aplikasi yang mencantumkan lensa berdasarkan apa yang dicari pengguna.
00:04:18Dan kemudian kita dapat memilihnya dan membandingkannya berdampingan serta menambahkannya ke keranjang kita
00:04:24dan menyediakan solusi pembayaran cepat bagi pelanggan kita.
00:04:28Dan itu pada dasarnya semua yang perlu saya lakukan.
00:04:29Dan sekarang saya biarkan Claude melakukan tugasnya.
00:04:32Dan dalam waktu sekitar beberapa menit, kita melihat bahwa Claude telah menghasilkan aplikasi MCP kita.
00:04:37Dan bagian paling keren adalah sekarang kita dapat membuka dasbor pengembang yang disediakan oleh SkyBridge
00:04:41dan mencobanya sendiri.
00:04:44Jadi sekarang jika kita membuka dasbor, kita dapat melihat tampilannya.
00:04:47Dan di sini kita memiliki alat pencarian lensa dan alat penempatan pesanan.
00:04:53Jadi pertama-tama, untuk pencarian lensa, saya akan memasukkan harga maksimum untuk lensa yang saya cari.
00:05:00Dan mari kita batasi hingga lima lensa mungkin.
00:05:03Dan hasilnya.
00:05:04Ditemukan 14 kecocokan yang harganya di bawah $2.000.
00:05:09Beginilah tampilan aplikasi di komputer.
00:05:12Kita juga dapat melihat pratinjau tampilan seluler.
00:05:14Terlihat bagus.
00:05:15Kita juga memiliki mode gelap dan mode terang.
00:05:18Dan di sini kita memiliki keluaran alat dan statusnya.
00:05:23Dan perhatikan apa yang terjadi jika saya memilih beberapa lensa.
00:05:26Seperti yang Anda lihat, statusnya diperbarui secara langsung, yang sangat keren.
00:05:31Jadi sekarang mari kita pilih tiga lensa.
00:05:34Dan sekarang jika kita klik bandingkan, kita akan dibawa ke layar perbandingan.
00:05:40Dan di sini kita dapat melihat ketiga lensa kita berdampingan dengan semua parameternya.
00:05:45Dan jika kita puas dengan pilihan ini, kita juga dapat pergi ke pembayaran.
00:05:49Dan ini berpindah ke tahap pembayaran di mana kita dapat memasukkan nama lengkap, email, dan alamat pengiriman serta melakukan pemesanan.
00:05:59Jadi seperti yang Anda lihat, dasbor ini sangat keren untuk menguji widget Anda guna melihat apakah semuanya berfungsi seperti yang diharapkan.
00:06:08Dan sekarang jika kita pergi ke Claude, dan di pengaturan, kita memiliki bagian yang disebut konektor.
00:06:16Dan kita harus mengklik sesuaikan.
00:06:19Dan untuk ini, Anda memerlukan URL terowongan.
00:06:21Jadi pastikan Anda telah mengaktifkan terowongan.
00:06:24Dan kita bisa menyalin URL ini.
00:06:26Dan di bagian konektor, Anda tinggal menambahkan konektor kustom.
00:06:31Berikan nama.
00:06:33Dan tempel URL terowongan tersebut.
00:06:38Dan klik tambah.
00:06:39Saya sudah menambahkannya di sini.
00:06:41Dan hal terakhir yang perlu Anda lakukan adalah mengklik hubungkan.
00:06:45Dan Anda juga dapat mengatur izin jika Anda ingin alat ini berjalan secara otomatis atau Anda ingin persetujuan dari pengguna.
00:06:53Dan kemudian kita bisa langsung memulai obrolan baru.
00:06:57Dan dalam obrolan baru tersebut, saya sekarang dapat meminta, berikan saya rekomendasi untuk lensa terbaik di bawah $2.000 untuk pemotretan potret.
00:07:05Dan kita sekarang dapat melihat bahwa ia mengatakan akan mencari katalog toko lensa untuk beberapa pilihan potret hebat di bawah $2.000.
00:07:12Dan lihat itu.
00:07:14Aplikasi MCP kita terbuka.
00:07:16Betapa kerennya itu?
00:07:18Dan kita dapat melakukan hal yang sama di sini.
00:07:20Kita dapat memilih beberapa lensa di sini.
00:07:24Dan kemudian pergi ke bagian perbandingan.
00:07:27Dan ia memiliki tabel perbandingan kecil ini.
00:07:32Satu-satunya hal yang saya perhatikan adalah kita memiliki ruang kosong ini dari status alat kita sebelumnya.
00:07:40Jadi ini mungkin sesuatu yang bisa Anda perbaiki di CSS.
00:07:43Tapi semuanya tampak hebat.
00:07:46Dan kita juga memiliki opsi untuk memeriksa.
00:07:49Dan kita sampai pada bagian pembayaran di mana kita dapat melakukan pemesanan.
00:07:54Jadi betapa kerennya ini?
00:07:57Dan terakhir, dan yang paling penting, untuk melihat apakah aplikasi Anda siap dipublikasikan ke toko aplikasi publik,
00:08:02kita juga dapat menjalankan audit aplikasi kita melalui dasbor pengembang dan memeriksa apakah kita memiliki masalah dengannya.
00:08:10Dan pada dasarnya, hanya itu.
00:08:11Hanya dalam beberapa menit, kita dapat membangun aplikasi MCP siap produksi dengan SkyBridge.
00:08:16Yang secara teoritis bisa kita kirimkan ke Toko Aplikasi AI.
00:08:20Jadi saya harap ini menunjukkan kepada Anda betapa mudahnya memulai dengan SkyBridge.
00:08:25Dan sejujurnya, ini terasa seperti masa depan web modern.
00:08:28Saya pikir kita akan mulai melihat lebih banyak aplikasi widget MCP interaktif ini di dalam chatbot kita.
00:08:34Jadi sangat bagus ada kerangka kerja seperti SkyBridge di luar sana yang membuat proses pembuatan aplikasi semacam ini jauh lebih mudah bagi kita para pengembang.
00:08:42Jadi begitulah, kawan.
00:08:44Itulah SkyBridge secara singkat.
00:08:46Jadi apa pendapat Anda tentang SkyBridge?
00:08:47Apakah Anda sudah mencobanya?
00:08:48Apakah Anda akan menggunakannya?
00:08:49Beri tahu kami di kolom komentar di bawah.
00:08:52Dan teman-teman, jika Anda menyukai jenis analisis teknis ini, beri tahu saya dengan menekan tombol suka di bawah video.
00:08:58Dan juga, jangan lupa untuk berlangganan saluran kami.
00:09:01Ini adalah Andrus dari BetterStack, dan sampai jumpa di video berikutnya.
00:09:16kamu