Challenge 6: Visualizing Data (A2UI)
Introduction
While reading numbers or CSV tables in a chat window is helpful, business trends are best understood visually. Sara wants to see product performance represented in clean, interactive charts.
Traditionally, displaying visualizations from a chat agent required building bespoke web applications or executing unsafe client-side scripts. The Agent-to-User Interface (A2UI) project solves this by defining an open, secure, and declarative standard for rendering native interface components.
Description
In principle our agent could generate A2UI specs (the declarative model for a UI) if we prompted it properly. However, we’re going to keep things simple, and we’ll put the data in A2UI format ourselves using the ADK callback functionality.
Update the agent instructions to return data in csv format surrounded with <bar_chart></bar_chart> tags only when the user asks for a bar chart. Here’s an example:
<bar_chart>
category,amount
A, 5
B, 20
C, 35
D, 15
</bar_chart>
We’ve already provided a function that can detect these blocks in the model response and replace them with A2UI components. Go ahead and make sure that this function is called after the model is run.
Verify that a bar chart is generated on the Gemini Enterprise app when the user request a bar chart.
Finally commit and push your changes.
Tips
- If you update your existing deployment, Gemini Enterprise app will use the latest version of your agent. But if you create another deployment, you’ll need to grant the required roles to run queries as you’ll have a new Agent Identity and you’ll have to add the new Agent to the Gemini Enterprise app.
Success Criteria
- Ask the agent: “Generate a bar chart showing the number of customers for each account type.” and verify that a bar chart is rendered in the interface.
- All the changes are committed and pushed to the Git repository.