Skip to content

feat(samples): add enterprise_dashboard with compact layout patterns#1467

Open
jswortz wants to merge 1 commit into
google:mainfrom
jswortz:feat/enterprise-dashboard-sample
Open

feat(samples): add enterprise_dashboard with compact layout patterns#1467
jswortz wants to merge 1 commit into
google:mainfrom
jswortz:feat/enterprise-dashboard-sample

Conversation

@jswortz
Copy link
Copy Markdown

@jswortz jswortz commented May 20, 2026

Summary

  • Add enterprise_dashboard sample agent demonstrating compact, visual-first A2UI output patterns
  • Include 2 reference A2UI JSON examples (KPI dashboard, store comparison)
  • Document anti-wall-of-text prompt engineering patterns in README

Motivation

Every existing sample (restaurant_finder, rizzcharts, personalized_learning) focuses on agent framework integration but doesn't demonstrate how to prevent the LLM from falling back to markdown "walls of text" when presenting data.

Enterprise use cases — dashboards, KPIs, store comparisons, product rankings — are especially prone to this: the LLM defaults to markdown tables, bullet lists, and inline numbers instead of structured A2UI layouts. There's no reference sample showing the right patterns.

What this sample teaches

Layout recipes (data type → A2UI component)

Data Type Instead of (markdown) Use (A2UI)
KPI metrics Inline numbers in paragraphs Row of Card with bold Text
Comparisons Markdown table Row of Card side-by-side
Rankings Numbered list List with Card children
Multi-section Multiple ## headers Tabs component
Separators --- horizontal rule Divider component
Status indicators Text "up"/"down" Icon (trending_up, trending_down)

Prompt engineering patterns

  1. Anti-markdown rules — Explicit bans with A2UI alternatives
  2. Layout recipes — Map each data type to a component composition
  3. Output ordering — A2UI JSON first, brief text after (max 1-2 sentences)
  4. Component diversity — Minimum 3 different component types per response

Files

File Purpose
agent.py Minimal LlmAgent runnable with adk web
prompt_builder.py Compact layout prompt construction with anti-markdown rules
tools.py Mock analytics tools (KPIs, store comparison, product rankings)
examples/0.8/kpi_dashboard.json Reference: 4 KPI metric cards in Row layout
examples/0.8/store_comparison.json Reference: 3 store cards with Icon indicators
README.md Pattern documentation and usage guide

Running

cd samples/agent/adk
adk web enterprise_dashboard

Example queries:

  • "Show me this week's KPIs"
  • "Compare store performance"
  • "What are the top 5 products?"

Production validation

These patterns have been battle-tested across 3 production agents deployed on Vertex AI Agent Engine (Gemini 3.5 Flash). Before adding anti-markdown rules and layout recipes, ~30-40% of responses fell back to markdown. After, the rate dropped to <5%.

Related

…tterns

Demonstrates visual-first A2UI output patterns for data-dense
enterprise use cases: KPI card grids, store comparison layouts,
product ranking lists, and tabbed dashboards.

Addresses the common "wall of text" problem where agents fall back
to markdown instead of structured A2UI components.
@google-cla
Copy link
Copy Markdown

google-cla Bot commented May 20, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces an Enterprise Dashboard sample for the A2UI agent framework, featuring an agent that prioritizes visual component layouts over standard markdown. The implementation includes mock analytics tools, example JSON payloads, and a specialized prompt builder. Review feedback focuses on improving the prompt builder's path handling for better portability, reducing redundancy in system instructions, and ensuring data consistency in mock tool responses. There is also a suggestion to better align example JSON files with the prompt's best practices regarding icon usage.

version=VERSION_0_8,
catalogs=[BasicCatalog.get_config(
version=VERSION_0_8,
examples_path="examples/0.8",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The hardcoded relative path examples/0.8 for examples_path is brittle as it depends on the current working directory. This can cause issues when running the script from different locations, including the if __name__ == '__main__' block. It's more robust to construct an absolute path based on the current file's location.

You'll also need to add import os at the top of the file.

Suggested change
examples_path="examples/0.8",
examples_path=os.path.join(os.path.dirname(os.path.abspath(__file__)), "examples/0.8"),

)

UI_DESCRIPTION = """
You are a VISUAL DASHBOARD, not a text chatbot.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This sentence, "You are a VISUAL DASHBOARD, not a text chatbot.", repeats the core identity already established in ROLE_DESCRIPTION. To make the prompt more concise, you could consider removing this line and starting the UI_DESCRIPTION directly with the "Layout Recipes" section.

- KPI metrics: Row of Card components, each Card wrapping a Text child
with bold metric name, large value, and trend indicator.
- Store/product comparisons: Row of Card components side-by-side.
NEVER use markdown tables.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This rule against using markdown tables is also stated more explicitly in the 'Output Rules' section on line 56. To keep the prompt concise and avoid redundancy, consider removing this line. The instruction on line 44 already provides the positive alternative.

{
"name": "Downtown Market",
"revenue": "$112,400",
"transactions": 5100,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The transactions field is an integer, while other numeric-like fields such as revenue and avg_basket are pre-formatted strings. For consistency within this tool's return value and to make the data structure more predictable for the LLM, consider formatting transactions as a string as well. This applies to all stores in the list.

Suggested change
"transactions": 5100,
"transactions": "5,100",

"rank": 1,
"name": "Organic Apples",
"category": "Produce",
"units_sold": 1240,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Similar to get_store_comparison, the units_sold field is an integer while revenue is a pre-formatted string. To improve consistency across the tools in this file, consider formatting units_sold as a string with comma separators. This should be applied to all products in the list.

Suggested change
"units_sold": 1240,
"units_sold": "1,240",

Comment on lines +109 to +116
"id": "aov-text",
"component": {
"Text": {
"text": {
"literalString": "**Avg Order**\n\n**$22.85**\n\n-1.2% vs last week"
}
}
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The prompt in prompt_builder.py encourages using Icon components for status indicators. This metric has a downward trend (-1.2%), which is a perfect opportunity to demonstrate the use of a trending_down icon, as suggested in the prompt's Status indicators recipe. The current implementation only uses text. Using an icon here would make the example more consistent with the prompt's best practices and the store_comparison.json example.

@ditman

This comment was marked as resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Todo

Development

Successfully merging this pull request may close these issues.

2 participants