💡

Contoh Generative UI - Gemini Dynamic View, Vercel AI SDK & v0.dev

Jelajahi contoh Generative UI nyata dari Gemini Dynamic View, Google Search AI Mode, Vercel AI SDK, v0.dev, Claude Artifacts, Figma Make, Canva Code, dan Amazon Rufus.

12 item
💡Studi Kasus

Google Stitch: Real-Time AI-Native UI Design

Stitch dari Google Labs adalah case GenUI pada tahap desain yang kuat, bukan sekadar demo coding berbasis chat. Dalam update resmi 19 Mei 2026, Google menjelaskan Stitch sebagai sistem desain kolaboratif live: agent melakukan streaming pekerjaan UI langsung ke infinite canvas, pengguna dapat mengarahkan iterasi sebelum selesai, dan screen yang dihasilkan dapat diekspor menuju produksi.

googlestitchdesign-tool
oleh Google Labs · 2026-05
Kunjungi Situs
💡Studi Kasus

Google Gemini 3 - Dynamic View & Visual Layout

Google telah menerapkan fitur Generative UI di Gemini 3 melalui eksperimen yang secara internal disebut "Dynamic View" dan "Visual Layout". Menurut blog resmi Google, AI Mode dengan Gemini 3 dapat membuat layout visual imersif, tool interaktif, dan simulasi secara langsung, sehingga interface dibangun sesuai query pengguna. Dynamic View memungkinkan Gemini 3 mendesain dan menulis kode untuk respons interaktif yang sepenuhnya khusus bagi setiap Prompt, sedangkan Visual Layout menghasilkan interface multimedia imersif bergaya majalah.

googlegeminidynamic-view
oleh Google · 2025-11
Kunjungi Situs
💡Studi Kasus

Google Search AI Mode

Sejak Gemini 3 hadir di Search, AI Mode menambahkan pengalaman Generative UI. Tim Google Search menjelaskan bahwa Gemini 3 dapat membuat layout visual ideal secara dinamis, lengkap dengan tool interaktif dan simulasi yang disesuaikan dengan pertanyaan pengguna. Saat mencari konsep kompleks, pengguna tidak hanya memperoleh jawaban teks, tetapi juga dapat melihat chart dinamis atau tool simulasi, seperti kalkulator dengan parameter yang bisa diubah secara real-time.

googlesearchai-mode
oleh Google · 2025-11
Kunjungi Situs
💡Studi Kasus

OpenAI Apps SDK: App Interaktif di dalam ChatGPT

Peluncuran Apps SDK dari OpenAI pada Oktober 2025 merupakan case Generative UI mainstream karena app kini hadir langsung di dalam percakapan ChatGPT. Pengumuman resminya menjelaskan app yang merespons bahasa alami dan merender interface interaktif di dalam chat, termasuk peta, playlist, presentasi, kursus, shopping, dan travel. SDK ini memperluas MCP agar developer dapat mendefinisikan logic app sekaligus interface, sehingga menjadi referensi konkret bagi produk percakapan yang membutuhkan UI terasa native tanpa mengarahkan pengguna ke app lain.

openaichatgptapps-sdk
oleh OpenAI · 2025-10
Kunjungi Situs
💡Studi Kasus

Claude Artifacts: App Berbasis AI yang Dapat Dibagikan

Update Claude Artifacts dari Anthropic pada Juli 2025 mengubah panel artifact menjadi surface app yang ringan. Claude dapat membuat artifact yang memanggil Claude melalui API, melakukan hosting, dan membagikannya, sementara pengguna akhir masuk dengan akun Claude mereka sendiri. Case ini berguna karena UI yang dihasilkan menjadi persisten, dapat diedit, dan dapat digunakan orang lain, bukan sekadar preview sekali pakai di samping chat.

anthropicclaudeartifacts
oleh Anthropic · 2025-07
Kunjungi Situs
💡Studi Kasus

Figma Make: Prototype Prompt-to-App

Figma Make tersedia untuk semua pengguna sejak Juli 2025 dan merupakan salah satu case tool desain Generative UI yang paling jelas. Figma mendeskripsikannya sebagai tool prompt-to-app untuk membuat prototype interaktif high-fidelity dan web app, dengan dukungan baru seperti design library yang diimpor serta prototype yang terhubung ke Supabase. Case ini masuk dalam koleksi karena menunjukkan GenUI bergerak ke tahap awal product discovery, alignment, dan kolaborasi design-engineering.

figmafigma-makeprompt-to-app
oleh Figma · 2025-07
Kunjungi Situs
💡Studi Kasus

Canva Code: Elemen Desain Interaktif dari Prompt

Canva Code adalah case platform creator yang kuat untuk Generative UI. Pada Canva Create 2025, Canva memperkenalkan workflow tempat pengguna mendeskripsikan elemen interaktif seperti kalkulator harga, kuis, atau mini-game, lalu AI membuatnya langsung di dalam Canva. Elemen yang dihasilkan dapat digunakan kembali di berbagai desain, website, presentasi, dokumen, dan surface Canva lainnya, sehingga GenUI tersedia bagi non-developer dalam pekerjaan kreatif sehari-hari.

canvacanva-codeinteractive-design
oleh Canva · 2025-04
Kunjungi Situs
💡Studi Kasus

Amazon Rufus - Conversational Shopping Assistant

Amazon meluncurkan Conversational Shopping Assistant bernama Rufus yang melalui percakapan langsung menghasilkan interface berbasis intent, seperti kartu rekomendasi produk dan opsi filter. Pendekatan ini melampaui model pencarian keyword tradisional.

amazonrufuse-commerce
oleh Amazon · 2024-02
Kunjungi Situs
💡Studi Kasus

v0 by Vercel

v0.dev dari Vercel, yang hadir dalam versi beta sejak 2023, dapat mengubah Prompt teks singkat menjadi prototype frontend interaktif. Tool ini menghasilkan Component UI React/Tailwind dari deskripsi teks atau gambar, sehingga menjadi contoh nyata alur text-to-UI.

vercelcode-generationreact
oleh Vercel · 2023-10
Kunjungi Situs
💡Studi Kasus

GitHub Spark: Full-Stack App dari Bahasa Alami

GitHub Spark adalah case public preview untuk pembuatan prompt-to-app di dalam ekosistem GitHub. Tool ini membantu pengguna mengubah ide menjadi full-stack intelligent app, melakukan iterasi lewat bahasa alami, control yang dapat diklik, atau kode, melihat live preview selama proses pembuatan, lalu memublikasikannya dengan satu klik ke hosting berbasis GitHub. Untuk Generative UI, Spark menarik karena memperlakukan UI buatan AI sebagai bagian dari mini app yang dapat di-deploy, lengkap dengan auth, repo handoff, dan konteks workflow produksi.

githubsparkfull-stack
oleh GitHub
Kunjungi Situs
💡Studi Kasus

Vercel AI SDK - Generative UI

Vercel AI SDK memungkinkan streaming Component React dari LLM, sehingga AI dapat menghasilkan Component UI interaktif secara real-time.

vercelreactstreaming
oleh Vercel
Kunjungi Situs
💡Studi Kasus

bracesproul/gen-ui - Demo Generative UI LangChain.js

Proyek demo open-source yang dibuat dengan LangChain.js dan Next.js untuk menunjukkan cara cepat membangun aplikasi Generative UI. Deskripsi proyek menyatakan bahwa app ini ditujukan sebagai Template untuk membangun aplikasi Generative UI menggunakan LangChain.js.

langchainnextjsopen-source
oleh bracesproul
Kunjungi Situs

Kumpulan terkurasi berisi resource Generative UI untuk designer dan developer.

Dibuat dengan ❤️ oleh komunitas