Hướng dẫn Gemini 3 Flash: Xây dựng UI Studio với Function Calling

Hầu hết các bản demo trình dựng dashboard bằng AI đều theo một khuôn: người dùng nhập prompt, mô hình tạo ra một mớ lớn mã UI, rồi phần thời gian còn lại người dùng phải đi sửa layout hỏng, trạng thái thiếu, và các component đấu nối dở dang.

Hướng dẫn này đi theo một hướng khác. Chúng ta sẽ xây dựng UI Studio, một “nhà máy” dashboard dựa trên lời gọi công cụ, nơi Gemini 3 Flash điều phối 100 thành phần UI như các công cụ có thể gọi.

Thay vì viết một tệp React khổng lồ, Flash xâu chuỗi các bước nhỏ, có cấu trúc như tạo thanh điều hướng, thêm bộ lọc, liên kết dữ liệu vào bảng, tạo biểu đồ insight, và xuất một tệp JSON UISpec duy nhất. Nó thực hiện quy trình từng bước trong khi UI cập nhật sau khi hoàn tất mỗi bước.

Cuối cùng, bạn sẽ có một ứng dụng kiểu studio có thể tạo nhiều mẫu dashboard (Phân loại phản hồi khách hàng, Pipeline bán hàng, Chỉ huy sự cố SRE, Theo dõi chi tiêu tài chính, Phễu phân tích sản phẩm, và hơn thế nữa) và lặp nhanh sang chế độ xem, chủ đề, v.v. khác.

Lưu ý: Bản demo này đóng vai trò nền tảng; bạn có thể tinh chỉnh prompt để phù hợp hơn với mục tiêu và sở thích đầu ra cụ thể của mình

Nếu bạn muốn tìm hiểu thêm về xây dựng AI Agent trong hệ sinh thái Google, tôi khuyến nghị khóa học Building AI Agents with Google ADK. Tôi cũng khuyến nghị hướng dẫn về Gemini 3.8 Flash của chúng tôi.

Gemini 3 Flash là gì?

Mô hình Gemini 3 Flash của Google được xây dựng cho các quy trình agent ưu tiên tốc độ, nơi bạn không cần một câu trả lời hoàn hảo duy nhất, mà là một vòng lặp chặt chẽ kiểu xây dựng, kiểm tra, tinh chỉnh, và xây lại. Flash mô phỏng lập luận của Gemini 3 Pro với độ trễ, hiệu quả và chi phí ở mức Flash, khiến nó phù hợp cho các ứng dụng tương tác tần suất cao.

Nguồn: Gemini 3 Flash DeepMind 

Hai điểm khiến Flash phù hợp với các ứng dụng dựng như UI Studio gồm:

• Được thiết kế để thực thi đáng tin cậy nhiều bước có cấu trúc, thay vì đưa ra một phản hồi tổng hợp duy nhất.
• Hỗ trợ đầu ra có cấu trúc, function calling, thực thi mã, và tìm kiếm như một công cụ, cho phép toàn bộ pipeline mang tính xác định và có thể kiểm tra.

Về lý thuyết, Gemini 3 Flash (bản xem trước) hỗ trợ 1M token đầu vào và 64K token đầu ra, hữu ích khi vết dựng và UISpec trở nên lớn.

Kiến trúc Gemini 3 Flash 

Gemini 3 Flash là mô hình quy trình agent trong họ Gemini 3, được tinh chỉnh cho các ứng dụng độ trễ thấp, thông lượng cao nơi bạn cần lặp nhanh, sử dụng công cụ và kế hoạch nhiều bước. Dưới đây là một số tính năng chính:

• Mức độ lập luận (thinking_level): Gemini 3 Flash cung cấp thiết lập thinking_level (minimal, low, medium, high), có thể đánh đổi giữa độ trễ/chi phí và chiều sâu. Thiết lập này rất phù hợp cho các bản dựng UI nơi phần lớn bước là thường lệ, nhưng một số cần hoạch định sâu hơn.
• Sử dụng công cụ: Tool use của Gemini 3 được thiết kế cho các vòng lặp nhiều bước, nơi mô hình phát ra lời gọi công cụ, chúng ta thực thi, trả kết quả về, và nó tiếp tục cho đến khi lượt hoàn tất. Đây chính xác là điều chúng ta cần cho UI studio cập nhật theo thời gian thực khi quá trình dựng diễn ra.
• Chữ ký suy nghĩ: Gemini 3 dùng chữ ký suy nghĩ được mã hóa để bảo toàn ngữ cảnh lập luận qua các lượt. Vòng lặp công cụ phải truyền lại y hệt như nhận được, nếu không function calling có thể lỗi (4xx/400 validation error), ngay cả ở thinking_level="minimal".
• Đa phương thức: Gemini 3 Flash nhận văn bản, mã, hình ảnh, âm thanh, video và PDF làm đầu vào. Trên Vertex AI, ta có thể điều chỉnh media_resolution để đánh đổi chi phí đa phương thức và độ trễ, thậm chí trả về đầu ra công cụ đa phương thức khi cần kiểm soát chặt hơn.

Ví dụ Gemini 3 Flash: Xây dựng dashboard cho UI Studio

Trong phần này, chúng ta sẽ xây dựng UI Studio từ một prompt duy nhất bằng Gemini 3 Flash. Ứng dụng lắp ráp UI qua lời gọi công cụ và xuất một JSON UISpec có thể xuất.

Ở mức cao, ứng dụng cuối sẽ:

• Hiển thị một Danh mục Mẫu như Phân loại phản hồi khách hàng, Phễu phân tích sản phẩm, Pipeline bán hàng, và hơn thế nữa.
• Cho phép người dùng nhấp Bắt đầu dựng để kích hoạt vòng lặp dựng bằng lời gọi công cụ, nơi Flash soạn dashboard từng bước.
• Render dashboard được tạo ở Chế độ xem trước, kèm bên cạnh là trình kiểm tra UISpec và vết thực thi.
• Xuất đặc tả dashboard cuối dưới dạng JSON.
• Hỗ trợ lặp nhanh với các prompt đơn giản như mật độ gọn, chế độ tối, sắp xếp mặc định theo rủi ro SLA, hoặc chuyển sang kanban.

Tổng quan prompt

Trong phần này, chúng ta sẽ xem prompt dùng để xây dựng UI Studio trong Google AI Studio với Gemini 3 Flash. Thay vì tạo dashboard trong một lượt, Flash đóng vai trò “bộ não” của studio. Nó điều phối lời gọi công cụ, xác thực và sửa đầu ra, và tạo ra một hiện vật dựng được duy nhất.

Đây là prompt tôi dùng cho bản demo này:

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.

Mục tiêu của prompt là ép một vòng lặp dựng có thể dự đoán để Gemini 3 Flash hành xử như một trình dựng, không phải chatbot. Vì vậy, prompt nên gồm:

• Mục tiêu rõ ràng về sử dụng công cụ trong lần dựng đầu, thường 30 đến 80 lời gọi, để Flash chia UI thành nhiều bước dựng component nhỏ thay vì tạo một đầu ra lớn duy nhất.
• Vòng lặp bắt buộc xác thực rồi sửa cho đến khi thông qua để đảm bảo UISpec cuối có thể render và tránh trạng thái hỏng.
• Cập nhật kiểu “vá lỗi” trong lúc lặp để giữ nguyên ID component và tránh dựng lại toàn bộ. Điều này giữ UI ổn định qua các chỉnh sửa và giúp lặp nhanh.
• Hợp đồng UISpec cấp cao bao phủ chủ đề, layout, component, binding, workflow, trạng thái, danh mục mẫu, agent, và trace. Điều này đưa cho Flash một định dạng mục tiêu nghiêm ngặt để mỗi lần dựng tạo ra một hiện vật có cấu trúc, nhất quán.
• Danh mục mẫu và phân vai agent chuyên trách, để mỗi loại dashboard khởi đầu với mặc định như layout, nút chỉnh, và component ưa dùng, và Flash có thể chia việc giữa lập kế hoạch, xây dựng, và xác thực.

Cách làm này hiệu quả vì mô hình xuất một UISpec có cấu trúc duy nhất mà bạn có thể xác thực, sửa bằng các bản vá nhỏ, và cập nhật nhanh mà không phải dựng lại toàn bộ UI.

Tổng quan dự án

Dù Gemini 3 Flash tạo toàn bộ codebase cho bản demo này, việc hiểu trách nhiệm của từng tệp vẫn hữu ích. Có sự tách bạch rõ giữa Studio UI, dashboard xem trước, và lớp API Gemini. Khi bạn biết hai vòng lặp AI nằm ở đâu, phần còn lại của kho mã trở nên dễ theo dõi.

Dưới đây là luồng tổng quan cách ứng dụng UI Studio kích hoạt Gemini 3 Flash và render dashboard được tạo:

• Khi ứng dụng tải, App.tsx mở màn hình Studio và lấy danh mục mẫu ban đầu, sổ đăng ký công cụ, danh mục component, và danh sách agent từ mockData.ts.
• Chọn mẫu hiện xử lý hoàn toàn ở trạng thái phía client, nên chưa gọi Gemini.
• Khi bạn nhấp Bắt đầu dựng, ứng dụng xóa vết chạy trước đó, chuyển sang trạng thái “đang dựng”, và bắt đầu cập nhật thẻ agent và sự kiện trace để hiển thị tiến độ.
• Sau các cập nhật UI theo giai đoạn, ứng dụng gửi yêu cầu dựng chính qua services/geminiService.ts.
• Phản hồi JSON của mô hình được phân tích thành UISpec, lưu vào state, và UI chuyển sang chế độ Xem trước.
• Trong phần Xem trước, dashboard được tạo được render bằng các component React chuẩn như bảng, bộ lọc, và insight.
• PreviewDrawer.tsx đóng vai trò bảng kiểm tra, nơi bạn có thể xem JSON UISpec và thống kê dựng cơ bản.
• Vòng lặp Gemini thứ hai nằm trong DetailDrawer.tsx và chạy ở cấp độ từng hàng.
• Khi người dùng mở một mục phản hồi và yêu cầu AI hỗ trợ, analyzeFeedback() và suggestResolution() trong geminiService.ts lại gọi Gemini để tạo phân loại có cấu trúc và hành động khuyến nghị.
• Tổng thể, ứng dụng chạy hai pipeline, một để dựng đặc tả dashboard và một để hỗ trợ người dùng trong dashboard.

Nếu bạn quan tâm các tệp dự án quan trọng khác để hiểu cách bản demo được lắp ghép, dưới đây là chi tiết thêm:

Thư mục gốc

Những tệp này định nghĩa thiết lập dự án, hợp đồng kiểu, và dữ liệu mồi giúp bản demo nhất quán và có thể chạy.

• package.json: Định nghĩa phụ thuộc và script, nơi ta thấy React, Recharts, và SDK @google/genai, cùng các script dev như vite, build, và preview.
• tsconfig.json: Chứa thiết lập trình biên dịch TypeScript cho React và cơ chế resolve của bundler. Giữ cho dự án an toàn kiểu mà không phát sinh mã TS biên dịch trong quá trình phát triển.
• vite.config.ts: Cấu hình Vite cho dev và build, gồm thiết lập cổng và biến môi trường. Tệp này ánh xạ GEMINI_API_KEY vào process.env.API_KEY, để GenAI SDK có thể đọc trong bản build trình duyệt.
• metadata.json: Siêu dữ liệu ứng dụng dùng cho AI Studio khi hosting. Nó cung cấp tên ứng dụng, mô tả, và quyền yêu cầu.
• types.ts: Đóng vai trò lớp hợp đồng cho toàn ứng dụng, định nghĩa kiểu cho mẫu, agent, công cụ, hàng phản hồi, và hình dạng UISpec để UI và đầu ra mô hình luôn nhất quán.
• mockData.ts: Tệp này chứa dữ liệu mồi cho trải nghiệm Studio và Xem trước. Nó định nghĩa danh mục mẫu, đội hình agent ban đầu, sổ đăng ký công cụ, và các hàng phản hồi giả để UI hoạt động ngay cả trước khi gọi mô hình.

Services(services/)

Lớp này chứa tích hợp Gemini và là nơi xử lý mọi lời gọi mô hình và phản hồi có cấu trúc.

• geminiService.ts: Có ba lời gọi cốt lõi: hàm orchestrateBuild() để tạo UISpec, và analyzeFeedback(), suggestResolution() để cung cấp hỗ trợ AI.
• Lưu ý: orchestrateBuild() hiện nhắm tới gemini-3-pro-preview, trong khi hai lời gọi còn lại dùng gemini-3-flash-preview, bạn có thể hoán đổi nếu muốn toàn bộ demo chỉ dùng Flash.

Thành phần UI của Studio (components/)

Các component React này render UI trình dựng Studio và phần xem trước dashboard được tạo, bao gồm trình kiểm tra JSON và luồng chi tiết.

• StudioHeader.tsx: Hỗ trợ render header của Studio và nút CTA bắt đầu dựng. Nó phản ánh trạng thái dựng, để người dùng thấy khi pipeline đang chạy.
• TemplateCatalog.tsx: Hiển thị thẻ mẫu và cho phép người dùng chọn loại dashboard muốn dựng. Lựa chọn cập nhật trạng thái cục bộ trong App.tsx.
• AgentPanel.tsx: Bảng Agent hiển thị “agent chuyên trách” dưới dạng thẻ trạng thái. Trong demo này, tiến trình trạng thái do các cập nhật theo giai đoạn trong App.tsx điều khiển để làm rõ quy trình.
• ToolPanel.tsx: Bảng Công cụ giúp render danh sách sổ đăng ký công cụ từ mockData.ts. Đây là chỗ đứng UI để hiển thị khả dụng công cụ và bộ đếm lời gọi.
• ComponentPanel.tsx: Đây là biểu diễn UI của “component như công cụ”, và là nơi tự nhiên để thêm các nút bật/tắt cho phép/không cho phép sau này.
• PreviewDrawer.tsx: Cho phép bạn xem JSON UISpec và thống kê cơ bản, giúp vết dựng có thể gỡ lỗi.

• Topbar.tsx: Giữ điều hướng trên cùng của dashboard và thanh tìm kiếm. Minh họa cách các điều khiển cấp dashboard có thể tồn tại song song với các nút chỉnh cấp studio.
• Sidebar.tsx: Xử lý điều hướng thanh bên trái cho dashboard được render.
• FilterBar.tsx: Đóng vai trò dải bộ lọc dùng để cắt lát dữ liệu phản hồi. 
• FeedbackTable.tsx: Chế độ xem bảng chính cho các mục phản hồi, nơi nhấp vào một hàng sẽ chọn và mở trải nghiệm ngăn chi tiết.
• DetailDrawer.tsx: Gọi analyzeFeedback() và suggestResolution() và render đầu ra mô hình dưới tab AI.
• InsightsSection.tsx: Hỗ trợ render biểu đồ và chế độ xem insight tóm tắt bằng Recharts.

Dưới đây là video demo ngắn giới thiệu toàn bộ quy trình UI Studio, gồm chọn mẫu, luồng Bắt đầu dựng, và phần xem trước dashboard được tạo: