UI Generatif... dengan Python? — Jeremiah Lowin, Prefect

AAI Engineer
컴퓨터/소프트웨어AI/미래기술

스크립트

00:00:00Terima kasih semuanya sudah datang. Hari ini saya akan membahas salah satu perangkat lunak paling aneh
00:00:18yang pernah saya tulis. Ini semacam berada di batas dari berbagai hal yang telah saya bawa
00:00:22ke dunia ini. Jadi mari bergabung bersama saya. Kita akan mencoba mengambil pendekatan yang paling masuk akal
00:00:27terhadap hal sangat aneh yang dimungkinkan oleh agen di MCP dan hal lainnya. Dan sebagai permulaan,
00:00:34saya ingin berbicara tentang aplikasi MCP. Saya tidak tahu apakah ada di antara kalian yang sempat mengikuti
00:00:38sesi bincang-bincang lain tadi, mungkin yang baru saja diberikan oleh Ido dan Liat sekitar satu jam lalu. Coba angkat tangan,
00:00:44siapa yang familiar dengan aplikasi MCP. Oke, ini mungkin audiens terbaik yang pernah saya beri materi ini,
00:00:52sebenarnya. Jadi itu luar biasa. Bagi yang tidak mengangkat tangan, aplikasi MCP adalah
00:00:57ekstensi dari protokol MCP yang diperkenalkan, saya rasa, pada Januari tahun ini. Dan gagasan utamanya,
00:01:02ini adalah siklus permintaan-tanggapan tipikal untuk alat MCP. Pengguna membuat permintaan ke agen. Lalu
00:01:10agen memutuskan untuk menggunakan alat MCP yang di-host di server MCP. Hasil alat tersebut dikembalikan
00:01:16ke dalam konteks agen. Dan agen memilih untuk membentuk tanggapan dan mengirimkannya ke pengguna. Jadi,
00:01:23pada dasarnya, server MCP adalah cara fantastis untuk menambahkan fungsi dan logika bisnis ke agen Anda,
00:01:28tetapi tidak pernah ada koneksi langsung antara pengguna dan server MCP. Semuanya selalu melalui otak agen
00:01:34dan, yang lebih penting, melalui jendela konteks agen. Jadi, aplikasi MCP adalah perpanjangan dari ini,
00:01:40yang memungkinkan kita untuk benar-benar melewati agen. Sebagai gantinya, yang terjadi adalah sebagai berikut:
00:01:44pengguna meminta sesuatu dari agen, agen menggunakan alat, tetapi alih-alih permintaan alat itu kembali
00:01:49ke agen, itu dikirimkan ke pengguna. Dan dikirimkan sebagai HTML, CSS, JavaScript. Itu adalah UI penuh.
00:01:55Dan itu bisa berupa apa saja yang Anda inginkan. Jadi, gagasan utamanya adalah Anda memiliki cara untuk membuat, untuk pada dasarnya memasukkan
00:02:01internet ke dalam agen Anda, bisa dibilang begitu. Anda dapat mengirimkan UI kustom apa pun yang bermerek dan berguna sesuai keinginan. Anda dapat
00:02:08memberikan pengalaman interaktif apa pun kepada pengguna yang mereka inginkan. Dan kemudian pengguna, seperti yang bisa Anda lihat di
00:02:12diagram, kini dapat berinteraksi dengan aplikasi tersebut. Mereka dapat menggunakan alat-alatnya. Mereka dapat mengirim
00:02:17informasi kembali ke backend yang di-host di aplikasi tersebut, dan benar-benar mendapatkan pengalaman penuh. Jadi, Anda bisa membayangkan
00:02:21memesan meja di restoran, atau mengubah kursi di pesawat, atau berinteraksi dengan jadwal.
00:02:28Bagi para insinyur AI, ada banyak hal yang dapat Anda lakukan sebagai pengguna sekarang di mana agen memfasilitasinya,
00:02:33tetapi Anda akan berinteraksi sebagai manusia. Dan ada ekstensi yang akan segera hadir. Ini akan
00:02:37dirilis pada rilis MCP bulan Juli, di mana agen sebenarnya dapat berinteraksi dengan aplikasi tersebut juga. Dan ini
00:02:43akan membuka beberapa kasus penggunaan yang sangat menarik yang tidak akan kita bahas hari ini, tetapi Anda dapat
00:02:47secara hipotetis bermain catur melawan agen sekarang dalam aplikasi visual di mana Anda melangkah,
00:02:52dan kemudian agen berinteraksi dengan aplikasi tersebut juga. Jadi, saya pikir itu akan membuka dunia
00:02:55kemungkinan baru. Nah, beberapa dari Anda mungkin tahu kerangka kerja yang saya buat dan perusahaan saya
00:03:03pelihara bernama FastMCP. FastMCP adalah salah satu cara paling populer untuk membangun server MCP. Jadi, setiap kali ada hal baru
00:03:09dan keren yang hadir di dunia MCP, hal pertama yang saya tanyakan adalah, bagaimana cara saya menyampaikannya kepada pengguna kami?
00:03:16Dan salah satu hal paling penting yang harus saya bagikan kepada Anda tentangbasis pengguna kami adalah mereka
00:03:20kebanyakan adalah insinyur Python. Jadi, ini sedikit menjadi masalah ketika kita ingin mengirimkan
00:03:27ujung depan dan UI, karena bagaimana kita sebenarnya akan melakukannya? Dan ini adalah momen dalam pembicaraan
00:03:31di mana saya mengungkapkan bahwa saya tidak ingat persis apa slide berikutnya, jadi kita akan mengintipnya.
00:03:35Tidak, kita akan kembali. Kita sekarang memiliki tantangan. Bagaimana cara kita membuat para insinyur Python membangun
00:03:42UI yang sesuai praktik terbaik, yang interaktif, yang indah, yang berguna, tanpa
00:03:50berpura-pura bahwa kita akan melakukan sesuatu yang konyol, sesuatu yang telah dicoba, dan memasukkan semua
00:03:54ujung depan, seluruh ekosistem, semuanya ke dalam Python dalam semacam sistem Frankenstein yang aneh, berkompromi,
00:04:00dan sembarangan. Jadi saya benar-benar bergelut dengan ini. Saya butuh,
00:04:04saya sangat butuh, saya merasa punya kewajiban untuk menemukan cara menyampaikan ini. Tapi saya tidak bisa, saya tidak bisa berpura-pura kita
00:04:10akan mengirimkan React di Python. Itu tidak akan berhasil. Jadi, kami memikirkan cukup dalam tentang siapa
00:04:15pengguna kita di ekosistem Fast MCP? Siapa para pengembang Python ini yang cenderung berada di perusahaan?
00:04:20Apa yang mereka lakukan dan untuk apa mereka membutuhkan UI ini? Untuk apa mereka membutuhkan aplikasi MCP ini?
00:04:25Yang tidak mereka butuhkan adalah UI kustom tingkat konsumen yang bermerek penuh. Bukan itu yang dilakukan orang-orang ini. Yang terutama
00:04:34menjadi tugas mereka adalah berbagi informasi di seluruh organisasi mereka, untuk mengumpulkan
00:04:38informasi di seluruh organisasi mereka. Jadi hal itu mengubah sifat dari apa yang kita harapkan mereka lakukan
00:04:43dalam kerangka kerja aplikasi MCP. Dan batasan itu menjadi sangat berguna. Jadi, pada dasarnya, kita mengharapkan
00:04:48mereka melakukan hal-hal seperti membuat tabel, mengumpulkan informasi melalui formulir,
00:04:53dan mereka ingin membagikan grafik. Jadi, pada dasarnya, dengan batasan ini,
00:04:58kita dapat memperkenalkan perangkat lunak yang kita buka sumbernya beberapa bulan lalu dan ternyata cukup
00:05:03populer di kalangan ini bernama Prefab. Dan itu adalah kerangka kerja pembangunan UI terlingkup untuk tujuan
00:05:11menyampaikan UI melalui agen untuk seperangkat tujuan yang saya sebutkan tadi. Jadi, ini adalah kartu halo
00:05:17dunia. Anda mungkin melihat ini di kerangka kerja ujung depan mana pun. Secara harfiah yang mana saja. Akan ada sesuatu
00:05:22yang terlihat seperti ini dan ada di situs web mereka dan Anda mengetik nama Anda dan itu memperbarui secara langsung.
00:05:27Tetapi, tentu saja, hal yang aneh tentang yang satu ini adalah kode yang menghasilkan itu sepenuhnya ditulis
00:05:31dalam Python. Jadi, saya berharap Anda merasakan apa yang saya rasakan ketika melihat ini, yaitu kombinasi yang sangat aneh
00:05:38antara, ya, itu keren dan ini benar-benar membuat saya takut. Rasa ya, itu keren
00:05:44berasal dari fakta bahwa saya pikir ada sesuatu tentang kode ini, bahkan jika Anda tidak dapat melihatnya dari dekat, saya bisa
00:05:48membuatnya sedikit lebih besar, ada sesuatu tentang ini yang, seperti, cukup masuk akal. Anda dapat melihat
00:05:52struktur UI dalam kode, tetapi ada juga sesuatu tentangnya yang jelas asing dan sedikit
00:05:58aneh. Dan kita sampai pada kesimpulan ini ketika Anda merasakan itu, saat Anda melihatnya, yaitu
00:06:04ketika Anda menyusun ujung depan dengan Python, itu sebenarnya mulai terasa bagus selama kita membatasi
00:06:09tantangannya dengan benar. Kita tidak mencoba membangun ujung depan dari awal. Kita mencoba menyusun ujung depan
00:06:15dari sekumpulan komponen kelas dunia yang dirancang dengan baik. Dan begitulah cara kita menjaga pagar pembatas,
00:06:20dan begitulah cara kita mengingat pengguna. Pengguna di sini tidak mencoba melakukan sesuatu yang sembarangan.
00:06:24Mereka mencoba mengambil ujung depan yang terstruktur dengan baik dan menyajikannya kepada siapa pun yang mereka
00:06:29kirimi itu. Jadi ini tur singkat tentang DSL tersebut. Terutama, kita menggunakan manajer konteks. Bagi
00:06:34Anda yang tahu FastMCP, Anda tahu bahwa bisa dibilang Anda dapat mereduksi FastMCP dan berkata,
00:06:39inovasi inti dari FastMCP adalah kita menggunakan dekorator Python untuk membangun seluruh server MCP.
00:06:44Jadi jika Anda ingin mengambil pendekatan reduktif yang sama ke prefab, Anda dapat mengatakan, kita menggunakan manajer konteks untuk
00:06:48membangun seluruh UI. Dan dengan menyarangkan komponen sebagai manajer konteks, seperti yang Anda lihat di sini, kita sedang membangun
00:06:55struktur yang persis sama di UI. Rasanya sangat alami saat Anda membacanya. Anda dapat melihat bagaimana hal-hal
00:07:01disusun. Setiap elemen UI, setiap komponen, yang merupakan komponen shad-sian yang indah
00:07:06ketika dirender, seperti yang bisa Anda lihat di sini, adalah kelas yang Anda instansiasi. Anda dapat memparameterisasinya. Anda dapat
00:07:11memberinya hal-hal seperti kelas CSS dan membuatnya terlihat sesuai keinginan. Dan kemudian hal terakhir, yang tidak
00:07:17cukup waktu untuk kita jelajahi hari ini, adalah variabel reaktif ini. Saya akan menunjukkan demonya
00:07:21kepada Anda sebentar lagi. Tapi pada dasarnya, kita memiliki cara penuh untuk membuat interaktivitas sisi klien
00:07:26dan mengikat data antar komponen yang memungkinkan Anda membangun pengalaman yang sangat kaya ini, sekali lagi,
00:07:31tanpa harus sepenuhnya masuk ke dunia JavaScript dan meninggalkan ekosistem yang sangat dikuasai oleh basis pengguna saya,
00:07:36setidaknya. Dan ini adalah alur yang pada dasarnya diekspos oleh prefab.
00:07:42Kami menggunakan DSL Python yang baru saja saya bagikan kepada Anda. Kami menggunakannya untuk membangun representasi
00:07:46deklaratif dari sebuah UI. Itu kemudian diserialisasikan ke dalam protokol JSON. Dan protokol JSON itu
00:07:53pada akhirnya dirender oleh aplikasi React, yang di-host sebagai aplikasi MCP aktual. Jadi ini akan membuka
00:07:59banyak kemungkinan bagi kita yang, sekali lagi, akan saya tunjukkan dalam sedetik. Tapi kunci
00:08:02untuk semuanya ini adalah JSON di tengah. Python sebenarnya adalah kebetulan yang saya temukan
00:08:07setelah kejadian itu karena itu adalah hal idiosinkratik yang aneh yang saya inginkan. Poin dari ini adalah,
00:08:10“Bisakah kita membuat representasi UI yang dapat diserialisasikan?” Dan itulah protokol JSON tersebut.
00:08:17Dan karena itu dapat diserialisasikan, saya dapat menghasilkannya dari agen. Saya dapat mengirimkannya ke agen. Saya dapat menghasilkannya
00:08:22sebagai manusia dan meminta agen untuk memodifikasinya. Ada semua hal keren ini yang terjadi karena
00:08:26representasi perantara dalam JSON tersebut. Dan kemudian ketika DSL Python baru saja keluar dari ini dan sangat
00:08:31indah serta mudah digunakan, saya merasa kita memiliki sesuatu. Jadi kita memiliki dokumen ini. Dan untuk
00:08:37membuktikan poin tersebut, ini adalah batasan lain yang kita ambil. Saya bahkan tidak tahu apa ini. Ini adalah
00:08:42dokumen untuk komponen tabel data di Prefab. Saya pikir ada 130 atau 140 komponen yang kami sediakan yang dapat
00:08:47Anda susun menjadi bentuk arbitrer. Dokumen untuk Prefab 100% dirender di Prefab. Jadi tabel data
00:08:55yang ada di sini dalam penggunaan dasar, itu dirender secara langsung di Prefab. Kode Python, Anda dapat melihatnya menyusup di
00:09:01bagian bawah layar. Kode Python itu sedang dirender secara langsung oleh perender untuk menghasilkan itu.
00:09:05Jika mau, Anda dapat mengambil contoh apa pun di dokumen Prefab, Anda dapat mengklik tautan, memasukkannya ke
00:09:09taman bermain dan Anda dapat mengedit kodenya secara langsung, kode Python secara langsung, dan Anda akan melihat UI diperbarui. Dan lagi,
00:09:15ini sangat aneh. Jika Anda merasa sedikit tidak nyaman tentang ini, itu tidak apa-apa. Ini menjadi
00:09:20jauh lebih masuk akal ketika kita membatasi masalahnya dan ingat bahwa kita menyusun antarmuka
00:09:24daripada membangunnya. Jadi, saya ingin membawa ini kembali ke topik awal saya, yaitu server MCP
00:09:29dan lebih khusus lagi, aplikasi MCP. Silakan gunakan Prefab untuk masalah front-end apa pun yang Anda miliki.
00:09:34Tim saya mulai menggunakannya untuk aplikasi data interaktif kecil dan hal-hal untuk dijelajahi.
00:09:39Mereka telah membuat presentasi darinya. Kami menyediakan tema mode gelap yang jujur saja mirip dengan yang
00:09:43saya tunjukkan sekarang untuk membuat slide dan presentasi. Anda bisa melakukan banyak hal dengannya. Tapi alasan
00:09:48kami membangunnya, kasus penggunaan yang dipenuhinya adalah untuk server MCP. Jadi saya ingin memberi Anda tur singkat
00:09:54tentang tiga cara yang dapat Anda gunakan, tiga cara yang semakin canggih yang dapat Anda gunakan di
00:09:58server MCP Anda. Yang pertama adalah membangun alat interaktif. Seperti yang saya tunjukkan di awal pembicaraan,
00:10:04biasanya alat MCP adalah sesuatu yang dipanggil oleh agen Anda dan agen mendapatkan hasilnya dan Anda tidak dapat
00:10:09berinteraksi dengannya sama sekali. Jadi, apa cara termudah bagi kita untuk memajukan fungsionalitas interaktif itu?
00:10:14Saya akan menunjukkannya di sini. Ini adalah alat Fast MCP. Alat ini telah didekorasi dengan dekorator alat, seperti yang Anda lihat,
00:10:20dan ini hanyalah fungsi Python yang mengembalikan beberapa informasi. Perlu diingat, informasi ini akan masuk ke
00:10:24agen, bukan pengguna. Jika kita ingin mengubahnya menjadi alat yang sepenuhnya interaktif dengan Prefab,
00:10:30kita akan membuat satu perubahan. Alih-alih mengembalikan kamus Python di akhir, yang akan masuk ke agen,
00:10:36kita akan mengembalikan komponen Prefab. Dalam hal ini, itu adalah tabel data. Inilah yang baru saja saya
00:10:40tunjukkan dokumentasinya beberapa saat lalu. Dan ketika kita mengembalikan komponen Prefab ini, Fast MCP akan secara otomatis
00:10:46mendeteksinya. Ia akan secara otomatis menyimpulkan bahwa Anda benar-benar ingin mengembalikan aplikasi MCP, dan ia akan menyiapkan
00:10:51semua mekanisme untuk mendapatkan HTML, JavaScript, CSS, perender, semuanya agar
00:10:55pengguna Anda akan melihat tabel data. Beginilah bentuknya dalam praktiknya. Ini menggunakan klien Goose,
00:11:00yang merupakan klien yang sangat bagus. Saya meminta server yang memiliki fungsi yang baru saja saya tunjukkan, tunjukkan direktori
00:11:06tim, dan yang muncul—ini akan lebih baik sebagai GIF, mohon maaf—tetapi yang muncul adalah
00:11:10komponen tabel data yang sepenuhnya interaktif. Ini mendukung pencarian, pemfilteran, pengurutan, penomoran halaman,
00:11:16dan semua hal ini. Dan semuanya, seperti yang saya tunjukkan tadi, cukup kembalikan kelas tabel data,
00:11:21dan semua ini akan diurus. Kita bisa melangkah lebih jauh. Bagaimana jika, selain tabel data,
00:11:26kita ingin menampilkan diagram lingkaran tepat di sebelah tabel data yang merinci direktori tim ini?
00:11:30Seperti yang bisa Anda bayangkan, kodenya sangat, sangat mirip. Alih-alih hanya tabel data, kita sekarang akan
00:11:35mengimpor kisi dan diagram lingkaran, dan jika Anda melihat di bagian bawah, Anda akan melihat bahwa kita menyusun diagram
00:11:40lingkaran dan tabel data ke dalam sebuah kisi secara sangat alami dengan pengelola konteks, dan inilah
00:11:45hasilnya. Kita sekarang mendapatkan diagram lingkaran di sebelah tabel data kita. Jadi ini mengikuti prinsip yang benar-benar
00:11:51kami coba pegang teguh dalam banyak perangkat lunak kami di Prefect, yaitu satu baris kode, satu perubahan besar yang kentara.
00:11:55Kami mencoba menjaga kerumitan tersebut tetap bertahap, sehingga ini memenuhi banyak hal yang menurut saya sangat
00:11:59penting tentang kerangka kerja dan DSL. Ini sangat cepat, karena kita tidak punya waktu untuk membahasnya,
00:12:05ini hanyalah contoh yang saya gabungkan dan rekam dari interaktivitas sisi klien sepenuhnya,
00:12:09di mana semua kontrol ini terhubung, semuanya memperbarui, teks memperbarui, nilai memperbarui,
00:12:15tidak ada JavaScript yang ditulis. Ini hanyalah beberapa kelas yang disatukan yang semuanya memiliki
00:12:19atribut yang sama yang ditetapkan, sehingga semuanya bekerja bersama secara otomatis.
00:12:24Oh, dan saya menyertakan contoh kode singkat tentang seperti apa bentuknya. Kami memiliki kelas bernama Rx, yang,
00:12:28seperti yang mungkin Anda tebak, singkatan dari reaktif. Jika Anda menggunakan variabel reaktif ini, Anda dapat merujuknya
00:12:33di mana saja dalam kode Anda, Anda dapat memformatnya, Anda dapat menjadikannya nama dari sesuatu, dan itu akan
00:12:38secara otomatis dikompilasi ke dalam implementasi JavaScript yang benar. Hal kedua yang dapat kita lakukan adalah
00:12:43aplikasi FastMCP. Jadi, jika alat interaktif semacam satu tembakan, ini antarmuka pengguna, dan Anda dapat
00:12:49berinteraksi dengannya di klien, aplikasi FastMCP adalah aplikasi lengkap dengan backend, dan dalam hal ini,
00:12:54server MCP akan menjadi backend-nya. Kami tidak punya waktu untuk membahas contoh kerja lengkap di
00:12:59sesi ini, tetapi inilah tampilan kodenya, hanya untuk memberi Anda gambaran tentang ergonominya.
00:13:03Kita akan menulis sebuah kelas, yang merupakan aplikasi FastMCP kita, dan kemudian kita akan mendekorasi setidaknya
00:13:08dua fungsi dengan app.ui. Itulah titik masuk yang akan mengembalikan komponen prefab yang
00:13:14membentuk UI dasar dari aplikasi tersebut, dan kemudian setidaknya satu, saya rasa ini opsional, jadi nol atau lebih
00:13:20app.tools, dan ini pada dasarnya adalah metode backend yang sekarang dapat Anda rujuk di UI.
00:13:27Jadi, Anda bisa memiliki tombol yang mengambil data yang telah dimasukkan pengguna ke dalam formulir dan mengirimkannya ke
00:13:31database menggunakan alat yang didekorasi seperti ini. Satu hal yang kami gunakan, dan kami sediakan sebagai komponen
00:13:38bawaan sekarang di FastMCP, adalah komponen unggah. Jadi, seperti yang Anda lihat, karena hanya agen yang memiliki akses
00:13:46ke server MCP, Anda tidak bisa begitu saja mengunggah file ke server MCP. File itu harus melalui otak
00:13:51agen, dan yang akhirnya terjadi adalah banyak orang membuat alat unggah di server MCP mereka,
00:13:56lupa bahwa agen benar-benar harus memanggilnya, dan yang Anda lakukan akhirnya adalah operasi salin-tempel
00:14:00paling mahal di dunia. Anda memberi agen satu megabita teks, agen mengetiknya ulang karakter
00:14:06demi karakter ke dalam MCP, dan sekarang, ya, memang Anda telah mengunggahnya, tetapi itu sangat, sangat
00:14:12tidak efisien. Jadi ini adalah kasus penggunaan yang sangat bagus untuk aplikasi MCP, di mana Anda meminta agen untuk memunculkan
00:14:18antarmuka aplikasi, Anda menyeret file ke dalamnya, dan sekarang file tersebut melewati agen dan langsung masuk ke
00:14:23server, dan kami telah membuat itu menjadi satu baris kode seperti ini, bersama dengan beberapa alat berguna lainnya, dan
00:14:30apakah ini GIF? Ini bukan GIF, atau jika ya, ini tidak merender, tetapi akan tampak seperti ini di
00:14:34klien Anda, dan klien apa pun yang mendukung aplikasi MCP, jika Anda meminta agen saya perlu mengunggah sesuatu, ia sekarang dapat
00:14:38menunjukkan ini kepada Anda, dan Anda dapat mengunggah dengan aman, dan yang terpenting, dengan murah. Oh, saya punya GIF. Lupakan saja.
00:14:45Ketahui slide Anda sendiri adalah pelajaran yang bagus dari ceramah ini. Jadi di sini agen sekarang berinteraksi dengan
00:14:50file yang baru saja saya unggah, yang saya seret dan lepas. Saya akan membuat slide ini tersedia nanti jika
00:14:55Anda ingin melihat ini, atau tentu saja, ini satu baris kode. Anda bisa mencobanya di server Anda sore ini.
00:15:00Hal terakhir yang ingin saya bahas, yang dimungkinkan oleh arsitektur ini,
00:15:04adalah UI generatif penuh. Kita akan lewati saja dan biarkan ini diputar sementara saya berbicara. Jadi ini adalah demo yang sangat
00:15:10sederhana di mana saya meminta Claude, “Hei, saya sedang memberikan ceramah tentang ini. Mulai streaming UI paling
00:15:15menarik yang bisa kamu buat.” Dan itu pun berjalan. Dan apa yang dilakukannya di sini adalah kami mengekspos alat
00:15:21yang menerima JSON, serialisasi protokol dari UI yang menjadi dasar Prefab. Dan sekarang saat
00:15:29agen melakukan streaming informasi tersebut melalui jaringan, kami secara real-time merender apa pun yang kami miliki,
00:15:35memperbaiki JSON tersebut dan merendernya. Jadi ini adalah demo yang sangat keren, dan sangat efektif,
00:15:39dan orang-orang menyukainya karena sekarang Anda bahkan tidak perlu mendefinisikan UI sendiri. Yang harus Anda lakukan adalah
00:15:43menggunakan keterampilan yang sudah kami sediakan, bagikan dengan agen Anda agar ia tahu cara menulis UI, dan mulailah.
00:15:48Ia dapat membuatkan apa pun yang Anda inginkan. Ada beberapa klien yang memiliki versi bawaan dari ini. Jika mereka
00:15:52memiliki versi bawaan, Anda mungkin lebih suka menggunakannya, silakan saja. Tapi ini mungkin cara bagi Anda untuk membangun
00:15:56pendekatan kustom Anda sendiri atau sekumpulan komponen terbatas yang berguna bagi Anda. Sekarang, hal yang sangat menarik
00:16:01terjadi ketika kami meluncurkan ini. Jadi seperti yang saya sebutkan, awalnya rencana semula adalah agar agen mengirim
00:16:07JSON melalui jaringan dan dirender menjadi aplikasi React lengkap ini. Apa yang akhirnya kami temukan
00:16:13adalah bahwa representasi Python dari UI adalah sekitar 70% lebih kecil daripada representasi JSON.
00:16:20Jadi, kami tidak melakukan ini lagi. Ketika saya merekam demo ini dengan streaming JSON, yang kami lakukan sekarang adalah kami benar-benar
00:16:26melakukan streaming Python melalui jaringan. Itu dieksekusi dalam kotak pasir. Itu diubah menjadi JSON di server,
00:16:32dan kemudian itu dirender. Jadi ini memiliki biaya efisiensi token yang sangat drastis dan manfaat latensi.
00:16:39Jadi, itu akan bekerja persis sama seperti ketika saya merekam demo ini, tetapi ini adalah salah satu hal
00:16:43yang telah kami pelajari sambil berjalan. Dan sangat menarik bahwa representasi Python jauh lebih kompak dan ergonomis
00:16:49daripada representasi JSON penuh. Jadi, itulah Prefab. Jika Anda ingin memeriksanya, jika Anda penasaran,
00:16:55jika Anda ingin melihat hal paling aneh yang pernah saya bangun beserta berapa pun orang lainnya, Anda dapat melihat
00:17:00dokumentasinya di prefab.prefect.io. Anda dapat melihat pustaka lengkapnya, yang ada di GitHub kami di sini. Dan ini
00:17:06sudah sepenuhnya dimasukkan ke dalam Fast MCP. Jadi, jika Anda menggunakan versi terbaru Fast MCP, Anda seharusnya dapat
00:17:11menginstal edisi opsional ini, mengimpor komponennya, mengembalikannya, dan mulai bermain dengan aplikasi MCP ini.
00:17:17Terima kasih semuanya telah datang.

핵심 요약

Kerangka kerja Prefab dan FastMCP memungkinkan pengembang Python untuk membangun dan mengirimkan antarmuka pengguna interaktif secara deklaratif menggunakan representasi Python yang 70% lebih kecil dari JSON.

하이라이트

  • Aplikasi MCP memperluas protokol MCP dengan memungkinkan pengiriman antarmuka pengguna berbasis HTML, CSS, dan JavaScript secara langsung kepada pengguna, melewati jendela konteks agen.

  • FastMCP menggunakan dekorator Python untuk membangun server MCP secara deklaratif, sementara Prefab menyediakan pustaka komponen ujung depan yang dapat dirender melalui Python.

  • Representasi UI menggunakan kode Python memiliki ukuran 70% lebih kecil dibandingkan representasi JSON penuh, sehingga menghemat biaya token dan latensi jaringan secara signifikan.

  • Komponen unggah file pada aplikasi MCP memungkinkan pengguna menyeret dan melepaskan file secara langsung ke server tanpa proses pengetikan ulang karakter demi karakter oleh agen.

타임라인

Konsep Dasar Aplikasi MCP dan Batasan Pengembang Python

  • Aplikasi MCP memungkinkan pengiriman antarmuka pengguna lengkap berupa HTML, CSS, dan JavaScript langsung kepada pengguna.
  • Server MCP tradisional hanya mengembalikan data teks ke konteks agen tanpa interaksi langsung dengan pengguna.
  • Sebagian besar pengembang di ekosistem FastMCP adalah insinyur Python yang membutuhkan cara praktis membangun UI tanpa mengadopsi ekosistem JavaScript penuh.

Ekstensi protokol MCP yang diperkenalkan pada bulan Januari memungkinkan komunikasi langsung antara server MCP dan pengguna melalui antarmuka visual. Pengembang Python menghadapi tantangan dalam menyajikan antarmuka pengguna yang interaktif tanpa harus mengintegrasikan ekosistem frontend yang rumit ke dalam basis kode Python.

Pengenalan Prefab dan DSL Python untuk Antarmuka Pengguna

  • Prefab adalah kerangka kerja pembangunan UI terlingkup yang dirancang untuk pengembang Python.
  • Manajer konteks Python digunakan untuk menyusun komponen antarmuka secara deklaratif dengan struktur yang menyerupai pohon elemen UI.
  • Representasi Python diserialisasikan ke dalam protokol JSON sebelum dirender oleh aplikasi React.

Pendekatan pembuatan UI dengan Prefab berfokus pada penyusunan komponen siap pakai daripada membangun antarmuka dari awal. Penggunaan manajer konteks Python memungkinkan pembuatan struktur UI yang alami dan mudah dibaca oleh pengembang backend.

Penerapan Komponen Interaktif dan Aplikasi FastMCP

  • Fungsi alat FastMCP dapat mengembalikan komponen Prefab seperti tabel data dan diagram lingkaran secara langsung.
  • Komponen unggah file bawaan mengatasi inefisiensi penyalinan teks manual oleh agen dengan memungkinkan pengunggahan file langsung ke server.
  • Aplikasi FastMCP lengkap terdiri dari antarmuka UI utama dan metode backend yang saling terhubung.

Integrasi Prefab ke dalam FastMCP memungkinkan pembuatan alat interaktif dengan pengembalian data berupa komponen visual seperti tabel pencarian dan grafik. Fungsionalitas unggah file langsung memangkas biaya operasional dan latensi saat memproses data berukuran besar.

UI Generatif Penuh dan Efisiensi Token Python

  • AI generatif dapat melakukan streaming representasi UI secara real-time melalui alat yang mengekspos protokol JSON Prefab.
  • Streaming kode Python melalui jaringan memiliki ukuran 70% lebih kecil dibandingkan streaming JSON penuh.
  • Kode Python yang dikirimkan dieksekusi dalam kotak pasir, diubah menjadi JSON di server, lalu dirender.

Penggunaan representasi Python untuk streaming UI memberikan efisiensi biaya token dan latensi yang jauh lebih baik dibandingkan format JSON. Dokumentasi dan pustaka lengkap tersedia di situs web resmi Prefect untuk diadopsi oleh pengembang.

커뮤니티 글

아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!

이 영상에 대해 글쓰기