- ChatGPT Apps yang diumumkan OpenAI memungkinkan developer menyematkan aplikasi mereka langsung di dalam percakapan ChatGPT, dan memanfaatkan lebih dari 800 juta pengguna aktif mingguan sebagai kanal distribusi baru
- ChatGPT kini tidak hanya memberi respons teks, tetapi juga dapat merender komponen UI secara langsung, sehingga tugas nyata seperti pemesanan, belanja, dan pengambilan data bisa dilakukan di dalam alur percakapan
- Inti dari struktur ini adalah Model Context Protocol (MCP), yang bekerja dengan cara LLM secara selektif memanggil alat eksternal dan resource UI
- Aplikasi ChatGPT memiliki struktur yang memisahkan backend (server MCP) dan frontend (komponen UI) secara jelas, serta menjalankan mini app berbasis React di sandbox yang aman
- Pola MCP dan ChatGPT Apps ke depannya juga akan diperluas ke agen lain seperti Claude, dan sedang menjadi lapisan antarmuka baru yang menghubungkan AI percakapan dengan SaaS yang sudah ada
Gambaran Umum ChatGPT Apps
- ChatGPT Apps adalah fitur yang memungkinkan developer dan tim produk memasukkan aplikasi langsung ke dalam percakapan ChatGPT
- Pengguna bisa langsung melakukan tugas seperti memesan hotel, mencari properti, atau belanja online di dalam ChatGPT saat sedang bercakap-cakap
- Dengan lebih dari 800 juta pengguna aktif mingguan, platform ini punya potensi sebagai kanal distribusi generasi berikutnya
Cara Kerja ChatGPT Apps
- Semua LLM (ChatGPT, Claude, Gemini) hanya bisa menggunakan alat yang terbatas, seperti pencarian web, membaca file, menjalankan kode, atau membuat artefak
- ChatGPT Apps memungkinkan developer mengekspos alat baru ke LLM melalui alat MCP, lalu membuatnya mudah dipasang dan digunakan oleh pengguna
- Jika mencoba memesan penginapan jangka pendek tanpa aplikasi, yang dikembalikan hanya foto dan informasi aturan, tanpa bisa melakukan pemesanan nyata
- Jika aplikasinya terpasang, pengguna bisa menerima daftar penginapan Airbnb yang sesuai lalu langsung memesan
Tiga Komponen Aplikasi
-
Server MCP (backend)
- Server yang berkomunikasi dengan ChatGPT, ditulis dengan Python atau Node.js
- Bekerja seperti API, dengan mendefinisikan "alat" (fungsi) yang bisa dipanggil ChatGPT
- Contoh:
search_restaurants, book_ticket
-
Komponen (frontend)
- UI interaktif yang dilihat pengguna
- Umumnya dibangun dengan React dan dijalankan di sandbox keamanan di dalam ChatGPT
- Konsepnya seperti mini web app yang hidup di dalam percakapan ChatGPT
-
ChatGPT (host)
- Aplikasi ditampilkan dalam embedded view di dalam ChatGPT
- ChatGPT memutuskan kapan harus memanggil aplikasi berdasarkan isi percakapan pengguna dan aplikasi yang sedang aktif
Alur Kerja
- Saat pengguna meminta bantuan untuk penginapan jangka pendek, ChatGPT otomatis menjalankan beberapa langkah:
1. Menentukan apakah aplikasi akan berguna
2. Menghubungi aplikasi untuk memeriksa alat yang tersedia (misalnya Book Listing, Browse Listing)
3. Memanggil alat Browse Listing untuk mengembalikan 5 penginapan teratas
4. Menampilkan 5 penginapan teratas kepada pengguna
- Workflow ini adalah dasar dari MCP(Model Context Protocol)
- Agen AI (ChatGPT) diberi akses ke alat yang membantu mencapai tujuan, lalu menggunakan alat-alat tersebut secara selektif saat pengguna memintanya
- Alat bisa sesederhana kalkulator untuk menjumlahkan dua angka, atau serumit proses backend seperti pembuatan gambar
Mode Tampilan
- ChatGPT Apps mendukung tiga mode tampilan UI
-
Mode inline
- Cocok untuk: daftar, kartu, visualisasi kecil
- Ini adalah mode default untuk semua aplikasi, dan bisa berpindah ke mode lain bila perlu
- Contoh: carousel produk, daftar restoran
-
Mode layar penuh
- Cocok untuk: peta, formulir kompleks, dashboard yang padat data
- Komponen mengambil seluruh jendela ChatGPT
- Digunakan saat butuh ruang lebih banyak atau fokus pada tugas yang kompleks
- Contoh: peta interaktif properti, editor spreadsheet
-
Mode PiP(Picture-in-Picture)
- Cocok untuk: alat yang persisten, game, pembaruan real-time
- Komponen muncul sebagai jendela kecil di bagian atas layar
- Cocok untuk hal-hal yang harus tetap terlihat sementara pengguna terus mengobrol
- Contoh: timer, pemutar musik, game tic-tac-toe
- Jika berencana berpindah antar mode tampilan, perlu pertimbangan lebih besar pada pola UX
Batasan
-
Satu komponen per giliran
- Jika ChatGPT memanggil alat yang mengembalikan komponen, giliran tersebut langsung berakhir
- Beberapa alat pengembali UI tidak bisa dirangkai otomatis
- Contoh: untuk permintaan "pesankan restoran lalu panggilkan Uber", tampilkan dulu komponen restoran, lalu setelah pemesanan gunakan trigger lanjutan untuk menampilkan komponen Uber
-
Cakupan status komponen terbatas
- Setiap instance komponen punya statusnya sendiri yang hanya bertahan dalam pesan tertentu itu saja
- Saat ChatGPT membuat pesan baru dengan komponen, secara default itu adalah instance baru dengan status kosong
- Perlu mengelola status melalui persistensi dan pengambilan ulang di backend
-
Tidak ada akses DOM langsung
- Komponen berjalan di sandbox keamanan (iframe) sehingga tidak bisa mengakses halaman induk ChatGPT atau menjalankan skrip sembarangan
- Semua komunikasi dilakukan melalui API
window.openai
-
Performa penting
- Status komponen dikirim ke model AI pada setiap permintaan
- Payload besar memperlambat respons, jadi kirim hanya yang diperlukan
Contoh Penggunaan Nyata
-
E-commerce & belanja
- Membangun katalog produk interaktif dengan filter harga, tambah ke keranjang, dan checkout (biasanya diteruskan ke aplikasi utama)
-
Alat bisnis
- Membuat board kanban tempat pengguna bisa menyeret task antar kolom, menetapkan tenggat, dan memperbarui status
- Sangat kuat terutama untuk alat internal yang memungkinkan ChatGPT menjawab pertanyaan tentang proyek sambil tetap memungkinkan pengguna mengambil tindakan
-
Booking & reservasi
- Membangun komponen reservasi restoran yang menampilkan ketersediaan, menu, dan ulasan
- Pengguna bisa meminta rekomendasi ke ChatGPT lalu melakukan reservasi langsung melalui antarmuka
-
Dashboard data
- Menampilkan analisis penjualan dengan chart interaktif
- Saat pengguna bertanya "Bagaimana pendapatan Q4?", dashboard dapat disediakan agar mereka bisa drill-down ke wilayah atau produk tertentu
-
Peta & lokasi
- Menampilkan peta interaktif dengan marker untuk pencarian kedai kopi, properti, atau berbasis lokasi
- Sangat efektif khususnya dalam mode layar penuh
Panduan Membangun Aplikasi Pertama (contoh aplikasi pencarian restoran)
-
Step 1: Bangun komponen (frontend)
- Buat komponen React yang berinteraksi dengan API
window.openai.* untuk komunikasi antara komponen iframe dan ChatGPT
- OpenAI menyediakan global untuk membantu interaksi API
-
Step 2: Definisikan alat (backend)
- Server MCP mendefinisikan "kontrak" dengan ChatGPT
- Memberi tahu model apa yang bisa dilakukan dan komponen apa yang harus ditampilkan setelah pemanggilan alat selesai
-
Step 3: Daftarkan resource (backend)
- Bundle komponen React menjadi HTML lalu host di server MCP sebagai resource
- ChatGPT mengambil URI
outputTemplate dari langkah sebelumnya lalu meminta kode yang akan di-iframe
-
Step 4: Uji alur
- Setelah server di-deploy:
- Buka ChatGPT dan aktifkan Developer Mode
- Masuk ke Settings → Connected Apps (atau "My Apps")
- Klik "Connect new app"
- Masukkan URL server (misalnya
https://my-mcp-server.com)
- Hubungkan tanpa OAuth
- Saat ChatGPT mendeteksi alat
search_restaurants, uji dengan mengetik "Find me Italian food in Brooklyn"
- ChatGPT akan memanggil alat, mengambil data, lalu merender daftar React interaktif alih-alih teks
Prospek ke Depan
- ChatGPT memang memulai lebih dulu, tetapi tidak lama lagi standar MCP akan mendukung pola yang sama melalui MCP apps
- Claude dan agen lainnya juga akan bisa menyuntikkan mini app ke dalam pengalaman percakapan
- Memahami arsitektur sistem semacam ini dan cara membangun pengalaman yang bermakna bagi pengguna akan membuka cara komunikasi baru antara produk AI dan aplikasi SaaS pada umumnya
Belum ada komentar.