Gemini 3 Flash Eğitimi: İşlev Çağırma ile Bir UI Stüdyosu Kurun

Çoğu yapay zekâ pano oluşturucu demosu aynı deseni izler: Kullanıcı bir istem gönderir, model devasa bir UI kodu bloğu üretir ve kullanıcı geri kalan zamanı bozuk yerleşimleri, eksik durumları ve yarım bağlanmış bileşenleri düzeltmekle geçirir.

Bu eğitim farklı bir yaklaşım benimsiyor. Gemini 3 Flash’ın 100 UI bileşenini çağrılabilir araçlar olarak koordine ettiği, araç-çağırmalı bir pano fabrikası olan UI Studio’yu oluşturacağız. 

Tek bir büyük React dosyası yazmak yerine, Flash; bir gezinme çubuğu oluşturma, filtreler ekleme, verileri bir tabloya bağlama, içgörü grafiklerini üretme ve tek bir UISpec JSON dosyası dışa aktarma gibi küçük ve yapılandırılmış adımları sıralar. Her adım tamamlandıkça UI güncellenirken adım adım ilerler.

Sonunda, birden fazla pano şablonu (Müşteri Geri Bildirimi Önceliklendirme, Satış Hunisi, SRE Olay Komuta, Finans Harcama Takibi, Ürün Analitiği Hunisi ve daha fazlası) üretebilen ve hızla farklı bir görünüm modu, tema vb. seçeneklere geçebilen stüdyo benzeri bir uygulamaya sahip olacaksınız. 

Not: Bu demo bir temel sunar; istemleri kendi hedeflerinize ve çıktı tercihlerinize daha iyi uyacak şekilde özgürce rafine edebilirsiniz.

Google ekosistemini kullanarak Yapay Zekâ Aracı (AI Agent) oluşturma hakkında daha fazla bilgi edinmek isterseniz, Google ADK ile Yapay Zekâ Aracı Geliştirme kursuna göz atmanızı öneririm. Ayrıca Gemini 3.8 Flash rehberimizi de tavsiye ederim.

Gemini 3 Flash Nedir?

Google’ın Gemini 3 Flash modeli, tek bir kusursuz yanıt yerine, oluştur, incele, ayarla ve yeniden oluştur gibi sıkı bir yineleme döngüsü istediğiniz hız-öncelikli, aracı temelli iş akışları için üretildi. Flash, Gemini 3 Pro akıl yürütmesini Flash düzeyinde gecikme, verimlilik ve maliyetle taklit eder; bu da onu yüksek frekanslı etkileşimli uygulamalar için güçlü bir seçenek yapar. 

Kaynak: Gemini 3 Flash DeepMind 

Flash’i UI Studio gibi oluşturucu uygulamalar için uygun kılan iki unsur şunlardır:

• Tek, kapsamlı bir yanıt sunmak yerine çok sayıda yapılandırılmış adımı güvenilir şekilde yürütmek üzere tasarlanmıştır.
• Ayrıca yapılandırılmış çıktıları, işlev çağırmayı, kod yürütmeyi ve aramayı bir araç olarak destekler; bu da tüm hattı deterministik ve denetlenebilir tutmamızı sağlar.

Teoride, Gemini 3 Flash (önizleme) 1M girdi belirteci ve 64K çıktı belirtecini destekler; bu da oluşturma izleri ve UISpec büyüdüğünde kullanışlıdır. 

Gemini 3 Flash Mimarisi 

Gemini 3 Flash, Gemini 3 ailesindeki aracı temelli iş akışı modelidir ve düşük gecikmeli, yüksek verimli; hızlı yineleme, araç kullanımı ve çok adımlı planlar gerektiren uygulamalar için ayarlanmıştır. Bu modelin bazı temel özellikleri şunlardır:

• Akıl yürütme seviyeleri (thinking_level): Gemini 3 Flash; gecikme/maliyet ile derinlik arasında takas yapabildiğimiz bir thinking_level ayarı (minimal, low, medium, high) sunar. Bu, çoğu adımın rutin olduğu, bazılarının ise daha derin planlama gerektirdiği UI oluşturma işleri için idealdir.
• Araç kullanımı: Gemini 3’ün araç kullanımı; modelin araç çağrıları yayımladığı, bizim bunları yürüttüğümüz, sonuçları geri beslediğimiz ve tur tamamlanana kadar devam ettiği çok adımlı döngüler için tasarlanmıştır. Bu, oluşturma ilerledikçe gerçek zamanlı güncellenen bir stüdyo UI’si için tam da istediğimiz davranıştır.
• Düşünce imzaları: Gemini 3, turlar arasında akıl yürütme bağlamını korumak için şifrelenmiş düşünce imzaları kullanır. Araç döngüsü bunları alındığı gibi geri iletmelidir; aksi hâlde işlev çağırma, thinking_level="minimal" seviyesinde bile başarısız olabilir (4xx/400 doğrulama hatası).
• Çoklu kip: Gemini 3 Flash; metin, kod, görsel, ses, video ve PDF’leri girdi olarak kabul eder. Vertex AI üzerinde, çok kipli maliyet ile gecikme arasında takas için media_resolution ayarını yapabilir ve daha sıkı kontrol gerektiğinde çok kipli araç çıktıları bile döndürebiliriz.

Gemini 3 Flash Örneği: Bir UI Stüdyo Panosu Oluşturun

Bu bölümde, Gemini 3 Flash kullanarak tek bir istemden UI Studio’yu oluşturacağız. Uygulama, araç çağrılarıyla UI’ları birleştirir ve dışa aktarılabilir bir UISpec JSON üretir.

Genel hatlarıyla, nihai uygulama şunları yapacaktır:

• Şablon Kataloğu olarak Müşteri Geri Bildirimi Önceliklendirme, Ürün Analitiği Hunisi, Satış Hunisi ve daha fazlasını görüntüler.
• Kullanıcının Oluşturmayı Başlat butonuna tıklayarak Flash’in panoyu adım adım derlediği bir araç-çağırma oluşturma döngüsünü tetiklemesine izin verir.
• Oluşturulan panoyu Önizleme Modunda, bir UISpec inceleyici ve yürütme iziyle birlikte işleyin.
• Son pano özelliklerini JSON olarak dışa aktarın.
• Yoğunluk sıkı, koyu mod, varsayılan sıralama SLA riskine göre veya kanbana geç gibi basit istemlerle hızlı yinelemeyi destekleyin.

İstem genel bakışı

Bu bölümde, Gemini 3 Flash ile Google AI Studio’da UI Studio’yu oluşturmak için kullanılan isteme bakacağız. Panoyu tek seferde üretmek yerine Flash, stüdyonun beyni olarak çalışır. Araç çağrılarını koordine eder, çıktıları doğrular ve onarır ve tek bir işlenebilir yapıt üretir. 

Bu demo için kullandığım istem aşağıdadır:

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.

İstemin amacı, Gemini 3 Flash’in bir sohbet botu gibi değil, bir oluşturucu gibi davranması için öngörülebilir bir oluşturma döngüsünü dayatmaktır. Bunun için istem şunları içermelidir:

• İlk oluşturma için araç kullanımı hedefi (genellikle 30 ila 80 araç çağrısı), böylece Flash UI’ı tek bir büyük çıktı yerine birçok küçük bileşen oluşturma adımına böler.
• Son UISpec’in işlenebilir olmasını ve bozuk durumları önlemeyi garanti etmek için, özellik geçene kadar zorunlu bir doğrula ardından onar döngüsü.
• Bileşen kimliklerini korumak ve tam yeniden oluşturmalardan kaçınmak için yinelemeler sırasında yama tarzı güncellemeler. Bu, düzenlemeler arasında UI’ı stabil tutar ve yinelemeleri hızlandırır.
• Tema, yerleşim, bileşenler, bağlamalar, iş akışları, durumlar, şablon kataloğu, aracılar ve izlemeyi kapsayan üst düzey bir UISpec sözleşmesi. Bu, Flash’e katı bir hedef biçimi verir; böylece her oluşturma tutarlı ve yapılandırılmış bir yapıt üretir.
• Bir şablon kataloğu ve uzman ajan rolleri ataması; böylece her pano türü yerleşim, düğmeler ve tercih edilen bileşenler gibi varsayılanlarla başlar ve Flash işi planlama, oluşturma ve doğrulama arasında paylaştırabilir.

Bu yaklaşım işe yarar çünkü model; tamamını yeniden derlemeye gerek kalmadan doğrulayabileceğiniz, küçük yamalarla düzeltebileceğiniz ve hızla güncelleyebileceğiniz tek bir yapılandırılmış UISpec üretir.

Proje genel bakışı

Bu demo için tüm kod tabanını Gemini 3 Flash üretse de, her dosyanın hangi sorumluluğa sahip olduğunu anlamak yine de faydalıdır. Studio UI, önizleme panosu ve Gemini API katmanı arasında net bir ayrım vardır. İki yapay zekâ döngüsünün nerede yaşadığını bildikten sonra, deponun geri kalanı kolayca takip edilebilir.

UI Studio uygulamasının Gemini 3 Flash’i nasıl tetiklediği ve oluşturulan panoyu nasıl işlediğine dair üst düzey akış şöyledir:

• Uygulama yüklendiğinde, App.tsx Studio görünümünü açar ve ilk şablon kataloğunu, araç sicilini, bileşen kataloğunu ve ajan listesini mockData.ts’ten çeker.
• Şablon seçimi bu aşamada tamamen istemci tarafı durumda yönetilir; henüz bir Gemini isteği tetiklenmez.
• Oluşturmayı Başlat’a tıkladığınızda uygulama önceki çalışma izini temizler, “oluşturuluyor” durumuna geçer ve ilerlemenin görünür olması için ajan kartlarını ve iz olaylarını güncellemeye başlar.
• Aşamalı UI güncellemelerinden sonra, uygulama ana oluşturma isteğini services/geminiService.ts üzerinden yapar.
• Modelin JSON yanıtı bir UISpec’e ayrıştırılır, duruma kaydedilir ve UI Önizleme moduna geçer.
• Önizlemede, oluşturulan pano; tablolar, filtreler ve içgörüler gibi standart React bileşenleri kullanılarak işlenir.
• PreviewDrawer.tsx, UISpec JSON’unu ve temel oluşturma istatistiklerini görüntüleyebileceğiniz bir inceleme paneli görevi görür.
• İkinci bir Gemini döngüsü DetailDrawer.tsx içinde bulunur ve tekil satır düzeyinde çalışır.
• Bir kullanıcı bir geri bildirim öğesini açıp yapay zekâ yardımı istediğinde, geminiService.ts içindeki analyzeFeedback() ve suggestResolution() fonksiyonları; yapılandırılmış sınıflandırma ve önerilen eylemleri üretmek için Gemini’yi tekrar çağırır.
• Genel olarak uygulama iki hattı çalıştırır: biri pano özelliklerini oluşturmak, diğeri ise pano içinde kullanıcılara yardımcı olmak için.

Demonun nasıl kurgulandığını anlamak için diğer önemli proje dosyalarıyla ilgileniyorsanız, işte bazı ek ayrıntılar:

Kök dizin

Bu dosyalar, demoyu tutarlı ve çalıştırılabilir kılan proje kurulumunu, tür sözleşmelerini ve tohum verilerini tanımlar.

• package.json: Bağımlılıkları ve betikleri tanımlar; burada React, Recharts ve @google/genai SDK’sını; ayrıca vite, build ve preview gibi geliştirme betiklerini görürüz.
• tsconfig.json: Bu dosya, React ve paketleyici çözümlemesi için TypeScript derleyici ayarlarını içerir. Geliştirme sırasında derlenmiş TS üretmeden projeyi tür güvenli kılar.
• vite.config.ts: Vite geliştirme ve derleme yapılandırması; bağlantı noktası kurulumu ve ortam kablolaması dâhil. Bu dosya, GEMINI_API_KEY’i process.env.API_KEY’e eşler; böylece GenAI SDK’sı tarayıcı derlemesinde onu okuyabilir.
• metadata.json: Uygulama meta verileri, AI Studio tarafından barındırma için kullanılır. Uygulamaya bir ad, açıklama ve gerekli izinleri verir.
• types.ts: Bu dosya, tüm uygulama için sözleşme katmanı olarak görev yapar; şablonlar, ajanlar, araçlar, geri bildirim satırları ve UI ile model çıktılarının tutarlı kalması için UISpec şekli türlerini tanımlar.
• mockData.ts: Bu dosya, Studio ve Önizleme deneyimi için tohum verileri içerir. Şablon kataloğunu, ilk ajan kadrosunu, araç sicilini ve sahte geri bildirim satırlarını tanımlar; böylece herhangi bir model çağrısından önce bile UI çalışır.

Servisler (services/)

Bu katman Gemini entegrasyonunu barındırır ve tüm model çağrıları ile yapılandırılmış yanıtlar burada işlenir.

• geminiService.ts: Üç çekirdek çağrı içerir: bir UISpec üretmek için orchestrateBuild() işlevi ile yapay zekâ desteği sunan analyzeFeedback() ve suggestResolution() işlev çağrıları.
• Not: orchestrateBuild() şu anda gemini-3-pro-preview’u hedeflerken diğer iki çağrı gemini-3-flash-preview kullanır; tüm demonun yalnızca Flash ile çalışmasını isterseniz bunu değiştirebilirsiniz.

Studio UI bileşenleri (components/)

Bu React bileşenleri, Studio oluşturucu UI’sini ve oluşturulan pano önizlemesini; JSON inceleyici ve ayrıntı akışlarıyla birlikte işler.

• StudioHeader.tsx: Studio başlığını ve çağrı-aksiyon butonunu oluşturmaya yardımcı olur. Oluşturma durumunu yansıtır; böylece kullanıcı hattın ne zaman çalıştığını görür.
• TemplateCatalog.tsx: Şablon kartlarını gösterir ve kullanıcının hangi panoyu oluşturmak istediğini seçmesine olanak tanır. Seçim, App.tsx içindeki yerel durumu günceller.
• AgentPanel.tsx: Ajan paneli, “uzman ajanları” durum kartları olarak görüntüler. Bu demoda durum ilerlemesi, iş akışını görünür kılmak için App.tsx’teki aşamalı güncellemelerle yönetilir.
• ToolPanel.tsx: Araç Paneli, mockData.ts’ten araç sicili listesini oluşturmaya yardımcı olur. Araç kullanılabilirliğinin ve çağrı sayaçlarının gösterimi için UI yer tutucusudur.
• ComponentPanel.tsx: “Araç olarak bileşenler”in UI temsili olup; ileride izin ver/engelle anahtarlarının eklenmesi için doğal bir noktadır.
• PreviewDrawer.tsx: UISpec JSON’unu ve temel istatistikleri görmenizi sağlar; bu da oluşturma izini hata ayıklanabilir kılar.

• Topbar.tsx: Pano üst gezinmesini ve arama çubuğunu barındırır. Pano düzeyi kontrollerin stüdyo düzeyi düğmelerle birlikte nasıl var olabileceğini gösterir.
• Sidebar.tsx: Oluşturulan pano için sol şerit gezinmeyi yönetir.
• FilterBar.tsx: Geri bildirim verilerini dilimlemek için kullanılan bir filtre şeridi görevi görür. 
• FeedbackTable.tsx: Geri bildirim öğeleri için ana tablo görünümüdür; bir satıra tıklamak seçimi tetikler ve ayrıntı çekmecesi deneyimini açar.
• DetailDrawer.tsx: analyzeFeedback() ve suggestResolution() çağrılarını yapar ve model çıktısını Yapay Zekâ sekmesi altında işler.
• InsightsSection.tsx: Recharts kullanarak grafikler ve özet içgörüler görünümünü oluşturmaya yardımcı olur.

Şablon seçimi, Oluşturmayı Başlat akışı ve oluşturulan pano önizlemesi dâhil olmak üzere tam UI Studio iş akışını anlatan kısa bir demo videosu burada: