Gemini 3 Flash-tutorial: bouw een UI Studio met function calling

De meeste demo’s van AI-dashboardbouwers volgen hetzelfde patroon: de gebruiker geeft een prompt, het model genereert een enorme lap UI-code, en de gebruiker besteedt vervolgens de rest van de tijd aan het fixen van kapotte layouts, ontbrekende states en half-aangesloten componenten.

Deze tutorial kiest een andere aanpak. We bouwen UI Studio, een dashboardfabriek op basis van tool-calls, waar Gemini 3 Flash 100 UI-componenten coördineert als aanroepbare tools. 

In plaats van één groot React-bestand te schrijven, voert Flash kleine, gestructureerde stappen uit zoals het maken van een navigatiebalk, filters toevoegen, data binden aan een tabel, inzichtgrafieken genereren en een enkel UISpec-JSON-bestand exporteren. Het werkt stap-voor-stap terwijl de UI bijwerkt zodra elke stap is voltooid.

Uiteindelijk heb je een studio-achtige app die meerdere dashboardtemplates kan genereren (Customer Feedback Triage, Sales Pipeline, SRE Incident Command, Finance Spend Tracker, Product Analytics Funnel, en meer) en snel kan itereren naar een andere weergavemodus, thema, enz. 

Let op: deze demo is een basis. Voel je vrij om de prompts te verfijnen zodat ze beter aansluiten bij je doelen en gewenste output.

Wil je meer leren over het bouwen van AI-agents binnen het Google-ecosysteem? Bekijk dan de cursus Building AI Agents with Google ADK. Bekijk ook onze gids voor Gemini 3.8 Flash.

Wat is Gemini 3 Flash?

Google’s Gemini 3 Flash-model is gebouwd voor snelheid-eerst, agentische workflows waarin je geen enkel perfect antwoord wilt, maar een strakke iteratielus zoals bouwen, inspecteren, bijstellen en opnieuw bouwen. Flash benadert het redeneervermogen van Gemini 3 Pro met Flash-niveau latency, efficiëntie en kosten, wat het een sterke match maakt voor interactieve apps met hoge frequentie. 

Bron: Gemini 3 Flash DeepMind 

Twee zaken die Flash relevant maken voor builder-apps zoals UI Studio:

• Het is ontworpen om talrijke gestructureerde stappen betrouwbaar uit te voeren, in plaats van één allesomvattend antwoord te geven.
• Het ondersteunt ook gestructureerde outputs, function calling, code-uitvoering en search als tool, waardoor we de hele pijplijn deterministisch en controleerbaar houden.

In theorie ondersteunt Gemini 3 Flash (preview) 1M input tokens en 64K output tokens, wat handig is wanneer de build-trace en UISpec groot worden. 

Architectuur van Gemini 3 Flash 

Gemini 3 Flash is het agentische workflowmodel in de Gemini 3-familie, afgestemd op toepassingen met lage latency en hoge doorvoer, waar je snelle iteraties, toolgebruik en meerstapsplannen nodig hebt. Enkele belangrijke kenmerken:

• Reasoning-niveaus (thinking_level): Gemini 3 Flash heeft een instelling thinking_level (minimal, low, medium, high), die we kunnen afwegen qua latency/kosten versus diepgang. Deze instelling is ideaal voor UI-builds waarbij de meeste stappen routinematig zijn, maar sommige diepere planning vereisen.
• Toolgebruik: Het toolgebruik van Gemini 3 is ontworpen voor meerstapsloops waarin het model tool-calls uitstuurt, wij ze uitvoeren, de resultaten terugvoeren en het doorgaat tot de beurt voltooid is. Precies wat we willen voor een studio-UI die in realtime bijwerkt terwijl de build vordert.
• Thought signatures: Gemini 3 gebruikt versleutelde thought signatures om redeneercontext over beurten heen te behouden. De toolloop moet ze exact teruggeven zoals ontvangen, anders kan function calling falen (4xx/400-validatiefout), zelfs bij thinking_level="minimal".
• Multimodaliteit: Gemini 3 Flash accepteert tekst, code, afbeeldingen, audio, video en pdf’s als input. Op Vertex AI kunnen we media_resolution afstemmen om multimodale kosten versus latency af te wegen, en zelfs multimodale tooloutputs retourneren wanneer we strakkere controle nodig hebben.

Gemini 3 Flash-voorbeeld: bouw een UI Studio-dashboard

In deze sectie bouwen we UI Studio vanuit één prompt met Gemini 3 Flash. De app stelt UI’s samen via tool-calls en levert een exporteerbare UISpec-JSON op.

Op hoofdlijnen zal de uiteindelijke app:

• Een Templatecatalogus tonen zoals Customer Feedback Triage, Product Analytics Funnel, Sales Pipeline en meer.
• De gebruiker op Start Build laten klikken om een tool-calling-buildloop te starten waarin Flash het dashboard stap voor stap samenstelt.
• Het gegenereerde dashboard renderen in Preview Mode, naast een UISpec-inspector en een uitvoeringstrace.
• De uiteindelijke dashboardspecificatie exporteren als JSON.
• Snelle iteratie ondersteunen met simpele prompts zoals compacte dichtheid, dark mode, standaard sorteren op SLA-risico of overschakelen naar kanban.

Overzicht van de prompt

In deze sectie bekijken we de prompt die is gebruikt om de UI Studio te bouwen in Google AI Studio met Gemini 3 Flash. In plaats van in één keer een dashboard te genereren, draait Flash als het brein van de studio. Het coördineert tool-calls, valideert en repareert outputs, en produceert één renderbaar artefact. 

Hier is de prompt die ik voor deze demo heb gebruikt:

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.

Het doel van de prompt is een voorspelbare buildloop af te dwingen, zodat Gemini 3 Flash zich gedraagt als een bouwer, niet als een chatbot. Daarvoor moet de prompt bevatten:

• Een expliciet doel voor toolgebruik bij de eerste build, doorgaans 30 tot 80 tool-calls, zodat Flash de UI opdeelt in veel kleine component-buildstappen in plaats van één grote output te genereren.
• Een verplichte valideer- en repareerlus totdat de specificatie slaagt, om te garanderen dat de uiteindelijke UISpec renderbaar is en kapotte states worden voorkomen.
• Patch-stijl updates tijdens iteratie om component-ID’s te behouden en volledige herbouw te vermijden. Zo blijft de UI stabiel over bewerkingen heen en gaan iteraties snel.
• Een high-level UISpec-contract dat thema, layout, componenten, bindings, workflows, states, templatecatalogus, agents en trace omvat. Dit geeft Flash een strikt doel­formaat, zodat elke build een consistent, gestructureerd artefact oplevert.
• Een templatecatalogus en specialistische agentrollen, zodat elk dashboardtype start met defaults zoals layout, knoppen en geprefereerde componenten, en Flash het werk kan verdelen over planning, bouwen en validatie.

Dit werkt omdat het model één gestructureerde UISpec uitstuurt die je kunt valideren, met kleine patches kunt repareren en snel kunt updaten zonder de hele UI opnieuw te bouwen.

Projectoverzicht

Ook al genereert Gemini 3 Flash de volledige codebase voor deze demo, het helpt om te begrijpen waar elk bestand voor verantwoordelijk is. Er is een duidelijke scheiding tussen de Studio-UI, het previewdashboard en de Gemini API-laag. Als je weet waar de twee AI-loops zitten, wordt de rest van de repository eenvoudig te volgen.

Hier is de flow op hoog niveau van hoe de UI Studio-app Gemini 3 Flash triggert en het gegenereerde dashboard rendert:

• Wanneer de app laadt, opent App.tsx de Studio-weergave en haalt de initiële templatecatalogus, toolregister, componentcatalogus en agentlijst op uit mockData.ts.
• Templateselectie wordt in dit stadium volledig in client-side state afgehandeld, dus er wordt nog geen Gemini-verzoek getriggerd.
• Als je op Start Build klikt, wist de app de vorige run-trace, schakelt naar een “building”-status en begint agentkaarten en trace-events bij te werken om voortgang zichtbaar te maken.
• Na de gefaseerde UI-updates doet de app het hoofdverzoek voor de build via services/geminiService.ts.
• De JSON-respons van het model wordt geparseerd tot een UISpec, in de state opgeslagen en de UI schakelt naar Preview-modus.
• In Preview wordt het gegenereerde dashboard gerenderd met standaard React-componenten zoals tabellen, filters en inzichten.
• PreviewDrawer.tsx fungeert als een inspectorpaneel waar je de UISpec-JSON en basis-buildstatistieken kunt bekijken.
• Een tweede Gemini-loop zit in DetailDrawer.tsx en draait op het niveau van individuele rijen.
• Wanneer een gebruiker een feedbackitem opent en AI-hulp vraagt, roepen analyzeFeedback() en suggestResolution() in geminiService.ts Gemini opnieuw aan om gestructureerde classificatie en aanbevolen acties te produceren.
• Al met al draait de app twee pipelines: één voor het bouwen van de dashboardspecificatie en één voor hulp aan gebruikers binnen het dashboard.

Ben je geïnteresseerd in andere belangrijke projectbestanden om te begrijpen hoe de demo in elkaar zit? Hier volgt meer detail:

Hoofdmappen

Deze bestanden definiëren de projectsetup, typecontracten en seeddata die de demo consistent en uitvoerbaar houden.

• package.json: definieert dependencies en scripts zoals React, Recharts en de @google/genai-SDK, plus dev-scripts zoals vite, build en preview.
• tsconfig.json: bevat de TypeScript-compilerinstellingen voor React en bundler-resolutie. Het houdt het project type-safe zonder gecompileerde TS uit te voeren tijdens development.
• vite.config.ts: Vite dev- en buildconfig, inclusief poortinstellingen en omgevingskoppeling. Dit bestand mapped GEMINI_API_KEY naar process.env.API_KEY, zodat de GenAI-SDK die in de browserbuild kan lezen.
• metadata.json: app-metadata die wordt gebruikt door AI Studio voor hosting. Het geeft de app een naam, beschrijving en vereiste permissies.
• types.ts: fungeert als de contractlaag voor de hele app en definieert types voor templates, agents, tools, feedbackrijen en de UISpec-vorm, zodat UI en modeloutputs consistent blijven.
• mockData.ts: bevat seeddata voor de Studio- en Preview-ervaring. Het definieert de templatecatalogus, initiële agentbezetting, toolregister en mock feedback-rijen zodat de UI werkt nog vóór een modelcall.

Services (services/)

Deze laag bevat de Gemini-integratie en handelt alle modelcalls en gestructureerde responses af.

• geminiService.ts: bevat drie kernaanroepen: de functie orchestrateBuild() om een UISpec te genereren, en de functies analyzeFeedback(), suggestResolution() om AI-assistentie te leveren.
• Let op: orchestrateBuild() richt zich momenteel op gemini-3-pro-preview, terwijl de andere twee aanroepen gemini-3-flash-preview gebruiken. Wissel dit om als je wilt dat de hele demo uitsluitend Flash gebruikt.

Studio-UI-componenten (components/)

Deze React-componenten renderen de Studio-builder-UI en de gegenereerde dashboardpreview, inclusief de JSON-inspector en detailflows.

• StudioHeader.tsx: rendert de Studio-header en de CTA om te starten met bouwen. Het weerspiegelt de buildstatus, zodat de gebruiker ziet wanneer de pijplijn draait.
• TemplateCatalog.tsx: toont templatekaarten en laat de gebruiker kiezen welk dashboard hij wil bouwen. De selectie werkt de lokale state bij in App.tsx.
• AgentPanel.tsx: toont “specialistische agents” als statuskaarten. In deze demo wordt de statusprogressie gestuurd door gefaseerde updates in App.tsx om de workflow zichtbaar te maken.
• ToolPanel.tsx: rendert de toollenlijst uit mockData.ts. Het is de UI-plaats­houder voor het tonen van toolbeschikbaarheid en aanroepcounters.
• ComponentPanel.tsx: de UI-weergave van “componenten als tools” en de logische plek om later allow/deny-toggles toe te voegen.
• PreviewDrawer.tsx: laat je de UISpec-JSON en basisstatistieken bekijken, waardoor de build-trace debugbaar wordt.

• Topbar.tsx: bevat de bovenste dashboardnavigatie en zoekbalk. Toont hoe dashboardcontroles kunnen bestaan naast de studio-knoppen.
• Sidebar.tsx: verzorgt de navigatie in de linkerrail voor het gerenderde dashboard.
• FilterBar.tsx: fungeert als een filterbalk om feedbackdata te segmenteren. 
• FeedbackTable.tsx: de hoofdtaelweergave voor feedbackitems. Een rij aanklikken triggert selectie en opent de detaildrawer-ervaring.
• DetailDrawer.tsx: roept analyzeFeedback() en suggestResolution() aan en rendert de modeloutput onder het AI-tabblad.
• InsightsSection.tsx: helpt bij het renderen van grafieken en samenvattende inzichten met Recharts.

Hier is een korte demovideo die de volledige UI Studio-workflow doorloopt, inclusief templateselectie, de Start Build-flow en de gegenereerde dashboardpreview: