CopilotKit: Masalah dengan Chatbot AI di Aplikasi SaaS

Bahasa IndonesiaالعربيةDeutschEnglishEspañolFrançaisहिन्दी日本語한국어PortuguêsРусский中文
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

00:00:00kebanyakan fitur dan aplikasi AI punya masalah yang sama; tampilannya bagus tapi sebenarnya cuma kotak obrolan
00:00:06yang ditempel di samping layar. Kamu minta sesuatu, dia kasih markdown, mungkin tabel
00:00:11atau beberapa paragraf yang menjelaskan pekerjaan yang masih harus kamu lakukan. Tapi bagaimana jika agen tersebut tidak
00:00:17hanya berbicara? Ini Copilot Kit. Dia bisa merender komponen nyata, membagikan status langsung dengan aplikasimu
00:00:23dan berhenti untuk meminta persetujuan sebelum mengubah apa pun. Jadi, bisakah ini membuat fitur AI terasa
00:00:29lebih seperti bagian dari produk? Mari kita cari tahu.
00:00:37Pertama-tama, banyak orang mengira mereka menambahkan AI ke aplikasi mereka, padahal yang sebenarnya mereka tambahkan adalah
00:00:43aplikasi kedua di dalam aplikasi mereka. Produkmu di sana, AI-nya di sana, dan pengguna harus
00:00:49menyalin konteks bolak-balik di kepala mereka untuk benar-benar menyelesaikan sesuatu. Itu tidak masalah jika yang kamu
00:00:54butuhkan hanyalah struktur tanya jawab dasar. Tapi begitu kamu ingin agen tersebut memperbarui status,
00:01:00memanggil alat, atau bekerja dengan pengguna dalam alur kerja nyata, kita mulai menemui kendala. Sekarang kamu membangun
00:01:07streaming event, sinkronisasi status, alur persetujuan, dan semua orang membangun hal yang sama dengan sedikit
00:01:14perbedaan. Copilot menangani masalah ini sejak awal, bukan “bagaimana membuat chatbot lain?”, pertanyaan yang lebih baik
00:01:20adalah “bagaimana membuat agen terasa asli di dalam aplikasi itu sendiri?”. Jadi, mari kita mulai dengan demonya,
00:01:26lalu saya akan bedah apa yang nyata, apa yang berguna, dan apa yang sedikit berlebihan. Jika Anda menikmati alat coding
00:01:32untuk mempercepat alur kerja Anda, pastikan untuk berlangganan. Kami selalu merilis video. Baiklah, sekarang
00:01:37lihat ini. Saya mulai dari terminal yang bersih dan kita bisa menjalankan instalasi yang saya dapatkan dari Copilot Kit.
00:01:42Ini akan menyiapkan aplikasi dan memberi saya titik awal yang berfungsi, sama seperti proyek lain yang benar-benar akan kita
00:01:49mulai. Bukan sekadar gelembung obrolan kosong, tapi bagian-bagian nyata. Bagian front-end sudah terhubung
00:01:56cukup agar saya bisa mulai menguji pengalaman sebenarnya yang kita inginkan. Sekarang saya masuk dan menjalankan mode
00:02:02pengembangan, dan inilah aplikasi yang berjalan secara lokal. Tentu saja, bagian ini tampak familier, ada permukaan obrolan,
00:02:09tapi bukan itu bagian yang menarik di sini. Bagian yang sangat keren adalah apa yang terjadi ketika
00:02:13agen terhubung ke UI. Saya akan mengajukan pertanyaan di antarmuka ini. Oke, itu dia,
00:02:21dan perhatikan hal besar di sini: agen tidak hanya menjawab dengan gumpalan teks, ia bisa melakukan streaming
00:02:26respons, bisa memanggil alat, dan bisa merender komponen nyata di dalam aplikasi. Itu perubahan besar pertama
00:02:32di sini dengan Copilot Kit. AI tidak hanya mendeskripsikan antarmuka, ia sekarang adalah
00:02:38bagian dari semuanya. Sekarang mari kita dorong lebih jauh. Saya akan mengajukan pertanyaan tindak lanjut di sini.
00:02:46Oke, dan inilah bagian yang dilewatkan oleh banyak agen lain. Sekarang agen kita berhenti sejenak, ia meminta
00:02:52persetujuan, dan meminta persetujuan adalah bagian yang penting. Itulah bagian yang sangat saya sukai karena
00:02:57dalam perangkat lunak nyata, kontrol bukanlah opsional. Pengguna kita masih perlu kata akhir dalam apa yang
00:03:03sedang terjadi. Demo yang keren, bukan? Sekarang, cara termudah menjelaskan Copilot Kit adalah: Copilot Kit
00:03:09adalah tumpukan front-end untuk aplikasi agentic. Ini bukan sekadar komponen obrolan, bukan sekadar pembungkus di sekitar
00:03:15API LLM lain. Ini memberi Anda potongan-potongan yang kita butuhkan untuk pengalaman AI yang hidup di dalam produk. Ada
00:03:23empat bagian untuk benar-benar dipahami di sini. Pertama adalah AGUI. Sekarang, AGUI adalah protokol berbasis event yang terbuka
00:03:31tentang bagaimana agen berbicara dengan front-end. Saat ini, alat agen memiliki masalah koneksi. Anda punya LangGraph,
00:03:37CrewAI, agen kustom, dan kerangka kerja baru apa pun yang diluncurkan pagi ini. Kita mencoba
00:03:43memasukkannya ke aplikasi kita. Lalu Anda punya aplikasi React, aplikasi seluler, dasbor, semua hal lain yang
00:03:48sedang terjadi. Itu banyak sekali hal yang harus disulap. Semua hal ini disulap tanpa protokol bersama.
00:03:55Setiap back-end membutuhkan kode kustom untuk setiap front-end. AGUI mencoba menjadi bahasa bersama antara
00:04:01agen dan antarmuka. Pesan, pembaruan status, panggilan alat, event UI, semuanya bergerak melalui aliran event yang umum.
00:04:07Kemudian kita punya UI generatif. Alih-alih model hanya mengembalikan teks, agen bisa
00:04:14memicu komponen nyata. Ini bukan HTML acak, ini hanya UI Anda yang dirender pada saat yang tepat. Kemudian adalah
00:04:22status bersama atau apa yang disebut Copilot Kit sebagai Co-Agents. Front-end dan back-end agen bisa berbagi status di kedua
00:04:29arah. Ketika pengguna mengubah sesuatu, agen bisa bereaksi. Ketika agen memperbarui sesuatu, UI bisa
00:04:35mencerminkannya. Ini sangat besar ketika kita membangun alat, dasbor, apa pun di mana pengguna dan agen
00:04:41bekerja pada objek yang sama. Terakhir adalah masalah human-in-the-loop. Ini salah satu bagian
00:04:47terpenting dari semua ini. Banyak agen, banyak demo agen, bisa bertindak seolah-olah pengalaman terbaik
00:04:52adalah otonomi penuh, tapi sebenarnya itu tidak selalu benar, bukan? Dalam produk nyata, pengguna menginginkan kekuatan dan
00:04:59kontrol. Konfirmasi sebelum mengirim, setujui sebelum membuat, pilih di antara opsi, semua hal tersebut. Dan Copilot
00:05:05memberi kita hal-hal untuk itu. Sekarang, Copilot bukanlah pilihan yang tepat untuk semua orang. Jika Anda membandingkannya
00:05:10dengan sesuatu seperti Vercel AI SDK, Copilot Kit lebih lengkap. Jika Anda menginginkan obrolan streaming,
00:05:17UI generatif, status bersama, dan pola persetujuan manusia langsung siap pakai, inilah Copilot Kit.
00:05:23Ini mendekati lapisan produk penuh. Vercel AI SDK lebih ringan, ia memberi Anda kontrol tingkat rendah yang lebih besar,
00:05:31jadi jika Anda ingin memiliki setiap bagian dari arsitekturnya, maka tentu, itu sejujurnya jauh lebih cocok. Sekarang jika
00:05:38Anda membandingkan Copilot Kit dengan membangun semuanya sendiri, di sinilah sulit untuk mengalahkannya,
00:05:43karena bagian tersulitnya bukanlah merender gelembung obrolan, itu sudah menjadi bagian yang mudah, bukan? Bagian
00:05:49tersulitnya adalah semua yang ada di sekitarnya. Tapi tentu saja dengan ini ada trade-off. Bisa terasa
00:05:54lebih berat daripada SDK AI minimal. Tentu saja Anda mengadopsi pola Copilot Kit. Juga, ini gratis
00:06:02sampai tingkat tertentu. Sejujurnya jika Anda bermain-main sendirian, oke, ini sangat keren. Tapi menjadi menjengkelkan ketika
00:06:08Anda ingin menggunakannya untuk skala besar karena semua itu tidak gratis. Juga, jika kalian tahu alternatif
00:06:14sumber terbuka yang lengkap untuk ini, berikan komentar dan beri tahu saya karena saya sedang mencari hal itu.
00:06:19Dengan Copilot Kit, Anda memang perlu memahami apa yang sumber terbuka, Anda perlu memahami apa yang memerlukan kunci,
00:06:25apa yang di-host, apa yang berbayar. Ini bukan sekadar kritik pada Copilot bahwa semuanya buruk, tetapi Anda perlu
00:06:32memahami apa yang gratis dan apa yang tidak. Jika Anda hanya butuh chatbot dukungan dasar, Copilot Kit mungkin
00:06:38berlebihan. Tapi jika Anda menginginkan sesuatu yang berfungsi sangat baik untuk UX agentic di mana agen bekerja dengan
00:06:44UI Anda di status aplikasi Anda, ini sangat keren. Jadi, haruskah Anda menggunakan Copilot Kit? Ya, coba jika
00:06:50Anda membangun AI dalam aplikasi yang serius, terutama jika Anda menggunakan React atau Next.js dan Anda ingin AI
00:06:56terasa seperti bagian dari produk, bukan sekadar panel samping. Ini sangat keren, Anda bisa menjalankannya dengan cepat
00:07:02dan dengan semua komponen yang kami miliki, itu membuatnya sangat praktis untuk dimasukkan ke dalam alur kerja. Jika Anda
00:07:07sudah membangun streaming, status, pemanggilan alat, dan switching UI sendiri, mungkin tidak sepadan. Dan jika fitur Anda
00:07:13benar-benar hanya bertanya dan mendapatkan jawaban, Copilot Kit akan sangat berlebihan untuk
00:07:19itu. Anda mungkin tidak memerlukan tumpukan front-end agentic penuh, gunakan saja sesuatu yang lebih ringan. Oke, luncurkan,
00:07:25lanjutkan. Jika Anda menikmati alat coding seperti ini, pastikan untuk berlangganan saluran Better Stack.
00:07:30Sampai jumpa di video berikutnya.

Key Takeaway

CopilotKit mengubah AI dari sekadar panel obrolan menjadi bagian integral aplikasi melalui protokol AGUI, kemampuan render komponen UI generatif, dan kontrol persetujuan pengguna secara langsung.

Highlights

  • Kebanyakan chatbot AI saat ini terbatas pada kotak obrolan di samping layar yang tidak terintegrasi langsung dengan antarmuka aplikasi.

  • CopilotKit menyediakan tumpukan front-end untuk aplikasi agentic yang mampu merender komponen nyata dan berbagi status aplikasi secara langsung.

  • Protokol AGUI memungkinkan komunikasi berbasis event antara agen AI dan berbagai jenis front-end tanpa perlu kode kustom untuk setiap integrasi.

  • Fitur human-in-the-loop memungkinkan pengguna untuk meninjau dan menyetujui tindakan agen sebelum perubahan status dilakukan dalam produk nyata.

  • CopilotKit bersifat berbayar untuk penggunaan skala besar, berbeda dengan SDK AI yang lebih ringan dan memberikan kontrol tingkat rendah bagi pengembang.

Timeline

Batasan Chatbot AI Konvensional

  • Chatbot AI tradisional sering kali berupa kotak obrolan terpisah yang memaksa pengguna menyalin konteks secara manual.
  • Pembuatan fitur AI yang kompleks seperti pembaruan status dan alur kerja nyata membutuhkan sinkronisasi status dan alur persetujuan yang rumit.

Banyak aplikasi AI saat ini hanya berfungsi sebagai antarmuka tanya jawab dasar yang tidak terhubung dengan logika aplikasi utama. Masalah muncul ketika agen perlu berinteraksi dengan produk, yang memaksa pengembang membangun sistem streaming event dan sinkronisasi status secara mandiri dan berulang.

Fungsionalitas Utama CopilotKit

  • Agen dalam CopilotKit mampu melakukan streaming respons dan merender komponen UI nyata di dalam aplikasi.
  • Sistem memerlukan persetujuan manual dari pengguna sebelum agen melakukan perubahan pada perangkat lunak.

Demonstrasi menunjukkan agen yang tidak hanya menjawab dengan teks, tetapi juga berinteraksi langsung dengan komponen front-end. Kontrol pengguna menjadi prioritas dengan adanya fitur konfirmasi yang memastikan pengguna memiliki keputusan akhir atas tindakan agen.

Arsitektur Agen dan Protokol AGUI

  • AGUI berfungsi sebagai protokol terbuka untuk menyatukan komunikasi antara agen dan antarmuka front-end.
  • Status bersama memungkinkan sinkronisasi dua arah antara front-end dan back-end agen secara real-time.

CopilotKit menyediakan protokol AGUI untuk mengatasi masalah fragmentasi koneksi antara berbagai framework agen seperti LangGraph atau CrewAI dengan aplikasi web. Dengan status bersama, UI dan agen dapat mencerminkan perubahan yang terjadi pada objek yang sama secara serentak.

Evaluasi dan Pertimbangan Penggunaan

  • CopilotKit lebih lengkap dibandingkan Vercel AI SDK, namun SDK yang lebih ringan mungkin lebih cocok jika pengembang membutuhkan kontrol tingkat rendah.
  • Penggunaan CopilotKit berpotensi berlebihan untuk chatbot dukungan dasar yang hanya memerlukan tanya jawab sederhana.

Pilihan antara CopilotKit dan solusi lain bergantung pada kompleksitas produk yang dibangun. Meskipun CopilotKit mempercepat pengembangan fitur AI yang terintegrasi, terdapat trade-off berupa biaya lisensi untuk skala besar dan ketergantungan pada pola yang ditentukan oleh platform tersebut.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video