Tutorial Gemini 3 Flash: Bangun UI Studio dengan Function Calling

Kebanyakan demo pembuat dasbor AI mengikuti pola yang sama: pengguna mengirimkan prompt, model menghasilkan potongan besar kode UI, lalu pengguna menghabiskan sisa waktu mereka memperbaiki tata letak yang rusak, state yang hilang, dan komponen yang setengah tersambung.

Tutorial ini mengambil pendekatan yang berbeda. Kita akan membangun UI Studio, sebuah pabrik dasbor berbasis pemanggilan tool di mana Gemini 3 Flash mengoordinasikan 100 komponen UI sebagai tool yang dapat dipanggil.

Alih-alih menulis satu file React besar, Flash mengurutkan langkah-langkah kecil yang terstruktur seperti membuat navbar, menambahkan filter, mengikat data ke tabel, menghasilkan grafik insight, dan mengekspor satu file JSON UISpec. Ini menjalankan proses langkah demi langkah sementara UI diperbarui saat tiap langkah selesai.

Pada akhirnya, Anda akan memiliki aplikasi layaknya studio yang dapat menghasilkan banyak template dasbor (Customer Feedback Triage, Sales Pipeline, SRE Incident Command, Finance Spend Tracker, Product Analytics Funnel, dan lainnya) serta beriterasi cepat ke mode tampilan lain, tema, dan seterusnya.

Catatan: Demo ini berfungsi sebagai fondasi; silakan sesuaikan prompt agar selaras dengan tujuan spesifik dan preferensi keluaran Anda.

Jika Anda ingin mempelajari lebih lanjut tentang membangun AI Agent menggunakan ekosistem Google, saya sarankan mengikuti kursus Building AI Agents with Google ADK. Saya juga merekomendasikan panduan tentang Gemini 3.8 Flash kami.

Apa Itu Gemini 3 Flash?

Model Gemini 3 Flash dari Google dibuat untuk alur kerja agentic yang mengutamakan kecepatan, di mana Anda tidak menginginkan satu jawaban yang sempurna, melainkan siklus iterasi yang rapat seperti membangun, memeriksa, menyetel, dan membangun ulang. Flash meniru penalaran Gemini 3 Pro dengan latensi, efisiensi, dan biaya setara Flash, sehingga sangat cocok untuk aplikasi interaktif berfrekuensi tinggi.

Sumber: Gemini 3 Flash DeepMind

Dua hal yang membuat Flash relevan untuk aplikasi pembuat seperti UI Studio meliputi:

• Dirancang untuk mengeksekusi banyak langkah terstruktur secara andal, bukan memberikan satu respons komprehensif.
• Mendukung keluaran terstruktur, function calling, eksekusi kode, dan pencarian sebagai tool, yang memungkinkan seluruh pipeline tetap deterministik dan dapat diperiksa.

Secara teori, Gemini 3 Flash (pratinjau) mendukung 1M token input dan 64K token output, yang berguna ketika jejak build dan UISpec menjadi besar.

Arsitektur Gemini 3 Flash

Gemini 3 Flash adalah model alur kerja agentic dalam keluarga Gemini 3, yang dituning untuk aplikasi berlatensi rendah dan throughput tinggi ketika Anda memerlukan iterasi cepat, penggunaan tool, dan rencana multi-langkah. Berikut beberapa fitur kunci model ini:

• Tingkat penalaran (thinking_level): Gemini 3 Flash mengekspos pengaturan thinking_level (minimal, low, medium, high) yang dapat ditukar antara latensi/biaya vs kedalaman. Pengaturan ini ideal untuk build UI di mana sebagian besar langkah bersifat rutin, tetapi sebagian membutuhkan perencanaan yang lebih dalam.
• Penggunaan tool: Penggunaan tool Gemini 3 dirancang untuk loop multi-langkah di mana model memancarkan panggilan tool, kita mengeksekusinya, memberi umpan balik hasil, dan model melanjutkan hingga giliran selesai. Ini persis yang kita inginkan untuk UI studio yang diperbarui secara real-time seiring progres build.
• Tanda tangan pemikiran: Gemini 3 menggunakan tanda tangan pemikiran terenkripsi untuk mempertahankan konteks penalaran di antara giliran. Loop tool harus mengembalikannya persis seperti diterima, atau function calling dapat gagal (kesalahan validasi 4xx/400), bahkan pada thinking_level="minimal".
• Multimodalitas: Gemini 3 Flash menerima teks, kode, gambar, audio, video, dan PDF sebagai input. Di Vertex AI, kita dapat menyetel media_resolution untuk menukar biaya multimodal vs latensi, dan bahkan mengembalikan keluaran tool multimodal saat kita memerlukan kontrol yang lebih ketat.

Contoh Gemini 3 Flash: Bangun Dasbor UI Studio

Di bagian ini, kita akan membangun UI Studio dari satu prompt menggunakan Gemini 3 Flash. Aplikasi ini merakit UI melalui pemanggilan tool dan menghasilkan JSON UISpec yang dapat diekspor.

Secara garis besar, aplikasi final akan:

• Menampilkan Katalog Template seperti Customer Feedback Triage, Product Analytics Funnel, Sales Pipeline, dan lainnya.
• Memungkinkan pengguna mengeklik Mulai Build untuk memicu loop build berbasis pemanggilan tool di mana Flash menyusun dasbor selangkah demi selangkah.
• Merender dasbor yang dihasilkan dalam Mode Pratinjau, berdampingan dengan inspector UISpec dan jejak eksekusi.
• Mengekspor spesifikasi dasbor final sebagai JSON.
• Mendukung iterasi cepat dengan prompt sederhana seperti kepadatan kompak, mode gelap, urut bawaan berdasarkan risiko SLA, atau beralih ke kanban.

Gambaran prompt

Di bagian ini, kita akan meninjau prompt yang digunakan untuk membangun UI Studio di Google AI Studio dengan Gemini 3 Flash. Alih-alih menghasilkan dasbor sekaligus, Flash bertindak sebagai otak studio. Ia mengoordinasikan pemanggilan tool, memvalidasi dan memperbaiki keluaran, serta menghasilkan satu artefak yang dapat dirender.

Berikut prompt yang saya gunakan untuk demo ini:

SYSTEM / DEVELOPER PROMPT — Gemini 3 Flash (UI STUDIO ORCHESTRATOR)
You are UI_STUDIO_ORCHESTRATOR inside an app called “UI Studio”.
Goal: Build a reusable “dashboard builder studio” that can generate many different dashboards (Sales, Support, Ops, Finance, Product Analytics, etc.) by orchestrating 80–150 callable UI component tools (agents). 
Each UI component (navbar, cards, table, filters, auth, charts, drawers, modals, etc.) is represented as a tool/function that returns structured JSON. 
You must reliably sequence many tool calls and output a valid UISpec JSON that renders the Studio UI and the generated dashboards.
HIGH-LEVEL BEHAVIOR
UI Studio itself is a dashboard-like app (the “builder”), not just a single dashboard.
Users can select a dashboard type/template to build (e.g., “Customer Feedback Triage”, “Sales Pipeline”, “SRE Incident”, “Finance Spend”, “Product Analytics”).
The Studio exposes a catalog of components (count ~100) and a tool registry (count 80–150), plus specialized agents for different template families.
Gemini 3 Flash must:
Render the UI Studio builder UI
Provide template selection and “Start Build” for a chosen dashboard
Use different specialist agents for different dashboard templates
Assemble the requested dashboard via many component tool calls
Iterate rapidly based on feedback (A/B knobs)
ABSOLUTE RULES
TOOL-FIRST: Build everything via tools. Do not “describe” UIs in prose.
MANY CALLS: On first build, make 30–80 tool calls. This is expected.
STRUCTURED OUTPUT ONLY: Final response must be ONE valid JSON object (UISpec). No markdown or commentary.
VALIDATE + REPAIR: Always run validate_uispec and repair until ok=true.
CONSTRAINTS: Only call enabled tools and only instantiate allowed components (if lists are provided).
ITERATION: Patch minimal deltas using update tools; preserve stable IDs.
INPUTS YOU RECEIVE (RunContext)
The user (or the app) provides a JSON RunContext each run:
{
"studioGoal": string,
"selectedTemplate": string | null,
"requestPrompt": string,
"knobs": { ... },
"allowedComponents": string[],
"enabledTools": string[],
"availableTemplates": string[] | null,
"agents": [{ "name": string, "role": string, "specialty": string }]
}
Use this as the constraints. If missing, assume reasonable defaults and proceed.
TOOLS AVAILABLE (CONCEPTUAL)
You can call tools returning JSON. Only call tool names included in enabledTools.
set_agent_status(agentName, status, note) -> ok
emit_trace(eventName, payload) -> ok
list_templates() -> { templates: TemplateMeta[] }
choose_template(userIntent) -> { templateId, rationale }
define_data_model(domain, templateId, constraints) -> DataModel
compose_layout(layout_type, regions, responsive_rules) -> LayoutSpec
create_component(type, variant, region, intent, theme_tokens, data_contract, constraints) -> ComponentSpec
update_component(component_id, patch) -> ComponentSpec
bind_data(component_id, bindings) -> BindingSpec
define_workflow(name, steps, triggers) -> WorkflowSpec
validate_uispec(uispec) -> { ok: boolean, issues: Issue[] }
repair_uispec(uispec, issues) -> UISpec
create_ab_variant(base_uispec, knob_changes) -> { variants: [{name, uispec}], metricPlan }
save_template(templateId, uispec) -> ok
export_dashboard(uispec, format) -> { artifactRef }
UISPEC OUTPUT CONTRACT (STRICT)
Return ONE JSON object:
{
"app": { "name": "UI Studio", "description": string, "routes": [...] },
"theme": { "mode": "light"|"dark", "density": "compact"|"comfortable", "tokens": {...} },
"studio": {
"templateCatalog": TemplateMeta[],
"selectedTemplate": string|null,
"componentCatalog": { "count": number, "items": string[] },
"toolRegistry": { "count": number, "items": string[] },
"agents": [{ "name": string, "role": string, "specialty": string }]
},
"dataModel": DataModel,
"layout": LayoutSpec,
"components": ComponentSpec[],
"workflows": WorkflowSpec[],
"states": { "loading": {...}, "empty": {...}, "error": {...} },
"generatedDashboards": [
{ "templateId": string, "name": string, "uispecRef": string }
],
"abTests": [ ... ] // optional
}
UI STUDIO BUILDER UI (MUST INCLUDE)
The Studio UI must include:
A) Header + Hero Banner
Title “UI Studio”
Subtitle: “Build dashboards via function-calling components”
Buttons: “Start Build”, “Iterate”, “Export”
B) REQUESTS (cards like “Orders”)
Preset request cards (Easy/Intermediate/Difficult) for different dashboard types
“Add New Request” card
Each request card has Start + status
C) COMPONENTS panel (count ~100)
Searchable list of UI components (navbar, cards, table, filter, auth, charts, drawer, modal, etc.)
Allow/prefer/disable toggles (optional)
Shows count
D) TOOLS panel (count 80–150)
Searchable list of callable tools/functions
Shows call counters for the current run and “recently called”
Shows count
E) AGENTS panel
3–8 specialist agent cards (all powered by Flash, but role-separated):
Template Selector Agent (chooses dashboard template from user intent)
IA/UX Planner Agent (information architecture)
Data Modeler Agent (schemas + bindings)
Component Composer Agent (creates component specs)
Chart Builder Agent (insights widgets)
QA/A11y Gatekeeper Agent (validation + fixes)
Experimentation Agent (A/B variants + knobs)
Agent cards show status: Idle / Working / Waiting / Done
F) Preview Drawer
Tabs: Preview | UISpec JSON | Trace
Preview renders either the Studio or the generated dashboard spec
TEMPLATE SYSTEM (MUST INCLUDE)
Provide at least 8 templates in templateCatalog with metadata:
id, name, category, difficulty, primaryComponents, dataEntities, defaultKnobs
Examples:
customer_feedback_triage
sales_pipeline
support_ticket_ops
sre_incident_command
finance_spend_tracker
product_analytics_funnel
marketing_campaign_performance
inventory_warehouse_ops
Selecting a template should:
set selectedTemplate
populate default knobs
drive which specialist agents become active
drive which components/tools are preferred during build
A/B KNOBS (FIRST-CLASS)
Studio must support knob-driven iterations:
density: compact|comfortable
navigation: topbarOnly|leftRail
defaultSort: template-specific enum
viewMode: table|inboxList|kanban|gridCards
insightFocus: overviewFirst|triageFirst|trendsFirst
themeMode: light|dark
BUILD ALGORITHM
When user requests “create UI studio …” (this message), you must:
emit_trace("start_studio_build", {...})
set_agent_status(...) as you plan/build/validate
Create the UI Studio builder UI (sections A–F above) via MANY create_component calls
Define templateCatalog and agent roster
Implement template selection workflow:
choose_template from user intent
build_dashboard workflow that triggers component creation for the chosen template
Implement “Start Build” workflow:
picks template
defines dataModel
composes layout
creates components for the generated dashboard
validates + repairs
stores in generatedDashboards with uispecRef
validate_uispec and repair until ok
Output ONLY the UISpec JSON
ITERATION BEHAVIOR
If user later asks: “build a Sales dashboard” or “change to dark mode, compact density”:
update Studio state (selectedTemplate/knobs)
call update_component and rebuild only the generated dashboard region
re-validate and output updated UISpec JSON only
NOW EXECUTE
User intent: Create a UI Studio that can build numerous dashboards, with 100 UI components as callable tools/agents, dashboard selection, and specialist agents for different templates.
Start building immediately via tools, then output a single valid UISpec JSON.

Tujuan prompt ini adalah menegakkan loop build yang prediktabel sehingga Gemini 3 Flash berperilaku seperti builder, bukan chatbot. Untuk itu, prompt harus mencakup:

• Target eksplisit untuk penggunaan tool pada build pertama, biasanya 30 hingga 80 panggilan tool, agar Flash memecah UI menjadi banyak langkah pembuatan komponen kecil alih-alih menghasilkan satu keluaran besar.
• Loop validasi lalu perbaikan yang wajib hingga spesifikasi lolos untuk menjamin UISpec final dapat dirender dan mencegah state yang rusak.
• Pembaruan bergaya patch selama iterasi untuk mempertahankan ID komponen dan menghindari rebuild penuh. Ini menjaga UI tetap stabil saat pengeditan dan membuat iterasi cepat.
• Kontrak UISpec tingkat tinggi yang mencakup tema, tata letak, komponen, binding, alur kerja, state, katalog template, agen, dan trace. Ini memberi Flash format target yang ketat agar setiap build menghasilkan artefak terstruktur yang konsisten.
• Katalog template dan penugasan peran agen spesialis, sehingga tiap jenis dasbor dimulai dengan default seperti tata letak, knob, dan komponen yang disukai, dan Flash dapat membagi pekerjaan antara perencanaan, pembangunan, dan validasi.

Ini berhasil karena model menghasilkan satu UISpec terstruktur yang dapat Anda validasi, perbaiki dengan patch kecil, dan perbarui dengan cepat tanpa membangun ulang seluruh UI.

Gambaran proyek

Meskipun Gemini 3 Flash menghasilkan seluruh basis kode untuk demo ini, memahami tanggung jawab setiap file tetap membantu. Ada pemisahan yang jelas antara UI Studio, dasbor pratinjau, dan lapisan API Gemini. Setelah Anda tahu di mana dua loop AI berada, sisa repositori menjadi mudah diikuti.

Berikut alur tingkat tinggi bagaimana aplikasi UI Studio memicu Gemini 3 Flash dan merender dasbor yang dihasilkan:

• Saat aplikasi dimuat, App.tsx membuka tampilan Studio dan mengambil katalog template awal, registri tool, katalog komponen, dan daftar agen dari mockData.ts.
• Pemilihan template ditangani sepenuhnya di state sisi klien pada tahap ini, sehingga belum ada permintaan ke Gemini yang dipicu.
• Saat Anda mengeklik Mulai Build, aplikasi menghapus jejak run sebelumnya, beralih ke status “building”, dan mulai memperbarui kartu agen serta event trace agar progres terlihat.
• Setelah pembaruan UI bertahap, aplikasi membuat permintaan build utama melalui services/geminiService.ts.
• Respons JSON model diurai menjadi UISpec, disimpan dalam state, dan UI beralih ke mode Pratinjau.
• Dalam Pratinjau, dasbor yang dihasilkan dirender menggunakan komponen React standar seperti tabel, filter, dan insight.
• PreviewDrawer.tsx bertindak sebagai panel inspector tempat Anda dapat melihat JSON UISpec dan statistik build dasar.
• Loop Gemini kedua berada di dalam DetailDrawer.tsx dan berjalan pada level baris individual.
• Saat pengguna membuka item umpan balik dan meminta bantuan AI, analyzeFeedback() dan suggestResolution() di geminiService.ts memanggil Gemini lagi untuk menghasilkan klasifikasi terstruktur dan tindakan yang direkomendasikan.
• Secara keseluruhan, aplikasi menjalankan dua pipeline, satu untuk membangun spesifikasi dasbor dan satu untuk membantu pengguna di dalam dasbor.

Jika Anda tertarik pada file proyek kunci lainnya untuk memahami bagaimana demo disusun, berikut detail lebih lanjut:

Direktori root

File-file ini mendefinisikan penyiapan proyek, kontrak tipe, dan data awal yang menjaga demo tetap konsisten dan dapat dijalankan.

• package.json: Mendefinisikan dependensi dan skrip yang menampilkan React, Recharts, dan SDK @google/genai, bersama skrip dev seperti vite, build, dan preview.
• tsconfig.json: Berisi pengaturan kompiler TypeScript untuk React dan resolusi bundler. Ini menjaga proyek tetap type-safe tanpa menghasilkan TS terkompilasi saat pengembangan.
• vite.config.ts: Konfigurasi dev dan build Vite, termasuk pengaturan port dan penyambungan environment. File ini memetakan GEMINI_API_KEY ke process.env.API_KEY, sehingga GenAI SDK dapat membacanya di build browser.
• metadata.json: Metadata aplikasi digunakan oleh AI Studio untuk hosting. Memberi aplikasi nama, deskripsi, dan izin yang diperlukan.
• types.ts: Bertindak sebagai lapisan kontrak untuk seluruh aplikasi, yang mendefinisikan tipe untuk template, agen, tool, baris umpan balik, dan bentuk UISpec agar UI dan keluaran model tetap konsisten.
• mockData.ts: File ini berisi data awal untuk pengalaman Studio dan Pratinjau. Ini mendefinisikan katalog template, daftar agen awal, registri tool, dan baris umpan balik tiruan sehingga UI berfungsi bahkan sebelum panggilan model apa pun.

Layanan (services/)

Lapisan ini berisi integrasi Gemini dan menjadi tempat semua panggilan model dan penanganan respons terstruktur.

• geminiService.ts: Memiliki tiga panggilan inti: fungsi orchestrateBuild() untuk menghasilkan UISpec, serta analyzeFeedback(), suggestResolution() untuk menggerakkan bantuan AI.
• Catatan: orchestrateBuild() saat ini menargetkan gemini-3-pro-preview, sementara dua panggilan lainnya menggunakan gemini-3-flash-preview, jadi Anda bisa menukarnya jika ingin seluruh demo hanya menggunakan Flash.

Komponen UI Studio (components/)

Komponen React ini merender UI builder Studio dan pratinjau dasbor yang dihasilkan, termasuk inspector JSON dan alur detail.

• StudioHeader.tsx: Membantu merender header Studio dan CTA untuk memulai build. Mencerminkan status build, sehingga pengguna melihat kapan pipeline berjalan.
• TemplateCatalog.tsx: Menampilkan kartu template dan memungkinkan pengguna memilih dasbor yang ingin dibangun. Pilihan ini memperbarui state lokal di App.tsx.
• AgentPanel.tsx: Panel agen menampilkan “agen spesialis” sebagai kartu status. Dalam demo ini, progres status digerakkan oleh pembaruan bertahap di App.tsx agar alur kerja terlihat.
• ToolPanel.tsx: Tool Panel membantu merender daftar registri tool dari mockData.ts. Ini adalah placeholder UI untuk menampilkan ketersediaan tool dan penghitung panggilan.
• ComponentPanel.tsx: Representasi UI dari “komponen sebagai tool” ini menjadi tempat yang tepat untuk menambahkan toggle izinkan/tolak di kemudian hari.
• PreviewDrawer.tsx: Memungkinkan Anda melihat JSON UISpec dan statistik dasar, yang membuat jejak build dapat di-debug.

• Topbar.tsx: Menampung navigasi atas dasbor dan bilah pencarian. Menunjukkan bagaimana kontrol tingkat dasbor dapat berdampingan dengan knob tingkat studio.
• Sidebar.tsx: Menangani navigasi rel kiri untuk dasbor yang dirender.
• FilterBar.tsx: Bertindak sebagai strip filter yang digunakan untuk memotong data umpan balik.
• FeedbackTable.tsx: Tampilan tabel utama untuk item umpan balik, di mana mengeklik baris memicu seleksi dan membuka pengalaman laci detail.
• DetailDrawer.tsx: Memanggil analyzeFeedback() dan suggestResolution() serta merender keluaran model di bawah tab AI.
• InsightsSection.tsx: Membantu merender grafik dan tampilan ringkasan insight menggunakan Recharts.

Berikut video demo singkat yang menelusuri alur kerja lengkap UI Studio, termasuk pemilihan template, alur Mulai Build, dan pratinjau dasbor yang dihasilkan: