New multi-surface agent example that works with the contact custom component client #275

dmandar · 2025-12-12T22:37:48Z

No description provided.

…e surfaces

…om component 'contact' client.

gspencergoog

I didn't really review the web parts of this very closely.

gspencergoog · 2025-12-15T18:17:36Z

samples/agent/adk/contact_multiple_surfaces/images/profile4.png

This is the same image as profile2.png. Is that expected?

gspencergoog · 2025-12-15T18:28:20Z

samples/agent/adk/contact_multiple_surfaces/a2ui_examples.py

+      {{ "key": "contacts", "valueMap": [
+        {{ "key": "contact1", "valueMap": [
+          {{ "key": "name", "valueString": "Alice Wonderland" }},
+          {{ "key": "phone", "valueString": "+1-555-123-4567" }},
+          {{ "key": "email", "valueString": "alice@example.com" }},
+          {{ "key": "imageUrl", "valueString": "https://example.com/alice.jpg" }},
+          {{ "key": "title", "valueString": "Mad Hatter" }},
+          {{ "key": "department", "valueString": "Wonderland" }}
+        ] }},
+        {{ "key": "contact2", "valueMap": [
+          {{ "key": "name", "valueString": "Bob The Builder" }},
+          {{ "key": "phone", "valueString": "+1-555-765-4321" }},
+          {{ "key": "email", "valueString": "bob@example.com" }},
+          {{ "key": "imageUrl", "valueString": "https://example.com/bob.jpg" }},
+          {{ "key": "title", "valueString": "Construction" }},
+          {{ "key": "department", "valueString": "Building" }}
+        ] }}
+      ] }}


This section uses "{{" and "}}". I'm pretty sure that's invalid in this context. They should probably just be single braces. If they somehow are correct, then the other examples are broken.

gspencergoog · 2025-12-15T18:29:47Z

samples/agent/adk/contact_multiple_surfaces/a2ui_examples.py

+  { "surfaceUpdate": {
+    "surfaceId": "action-modal",
+    "components": [
+      { "id": "modal-wrapper", "component": { "Modal": { "entryPointChild": "hidden-entry-point", "contentChild": "modal-content-column", "open": true } } },


There's no "open" property on Modal in the specification. Either the spec is out of date, or the properties here are.

gspencergoog · 2025-12-15T18:32:28Z

samples/agent/adk/contact_multiple_surfaces/a2ui_examples.py

+      { "id": "description_text_1", "component": { "Text": { "text": { "path": "title"} } } } ,
+      { "id": "description_text_2", "component": { "Text": { "text": { "path": "team"} } } } ,
+      { "id": "description_column", "component": { "Column": { "children": { "explicitList": ["user_heading", "description_text_1", "description_text_2"]} , "alignment": "center"} } } ,
+      { "id": "calendar_icon", "component": { "Icon": { "name": { "literalString": "calendar_today"} } } } ,


calendar_today isn't a valid icon name from the enum. It should be calendarToday.

gspencergoog · 2025-12-15T18:33:05Z

samples/agent/adk/contact_multiple_surfaces/a2ui_examples.py

+      { "id": "calendar_secondary_text", "component": { "Text": { "text": { "literalString": "Calendar"} } } } ,
+      { "id": "calendar_text_column", "component": { "Column": { "children": { "explicitList": ["calendar_primary_text", "calendar_secondary_text"]} , "distribution": "start", "alignment": "start"} } } ,
+      { "id": "info_row_1", "component": { "Row": { "children": { "explicitList": ["calendar_icon", "calendar_text_column"]} , "distribution": "start", "alignment": "start"} } } ,
+      { "id": "location_icon", "component": { "Icon": { "name": { "literalString": "location_on"} } } } ,


location_on isn't a valid Icon name from the enum. It should be locationOn.

gspencergoog · 2025-12-15T18:33:54Z

samples/agent/adk/contact_multiple_surfaces/a2ui_schema.py

+
+# a2ui_schema.py
+
+A2UI_SCHEMA = r'''


This should be referencing the schema available in specification/0.8/json so that it doesn't get out of sync.

+1

heres reference for how to do that

https://github.com/google/A2UI/blob/main/samples/agent/adk/rizzcharts/agent_executor.py#L56
and
https://github.com/google/A2UI/blob/main/samples/agent/adk/rizzcharts/component_catalog_builder.py#L34

gspencergoog · 2025-12-15T18:34:53Z

samples/agent/adk/contact_multiple_surfaces/contact_data.json

+        "calendar": "Out of office",
+        "imageUrl": "http://localhost:10004/static/profile3.png"
+    }
+]


Add trailing newline.

gspencergoog · 2025-12-15T18:35:41Z

samples/agent/adk/contact_multiple_surfaces/prompt_builder.py

+    {formatted_examples}
+
+    ---BEGIN A2UI JSON SCHEMA---
+    {A2UI_SCHEMA}


This could load the file from specification/0.8/json directly instead (but maybe cache it in memory).

wrenj · 2025-12-15T18:53:31Z

samples/agent/adk/contact_multiple_surfaces/agent_executor.py

+                        # Check for inline catalog
+                        if "metadata" in part.root.data and "inlineCatalog" in part.root.data["metadata"]:
+                             logger.info(f"  Part {i}: Found 'inlineCatalog' in DataPart.")
+                             inline_catalog = part.root.data["metadata"]["inlineCatalog"]


i think its inlineCatalogs now

I have some keys here fyi
https://github.com/google/A2UI/blob/main/a2a_agents/python/a2ui_extension/src/a2ui/a2ui_extension.py#L30

wrenj · 2025-12-15T18:54:37Z

samples/agent/adk/contact_multiple_surfaces/__main__.py

+        agent_card = AgentCard(
+            name="Contact Lookup Agent",
+            description="This agent helps find contact info for people in your organization.",
+            url=base_url,  # <-- Use base_url here


do we need # <-- use base_url here?

wrenj · 2025-12-15T18:56:30Z

samples/agent/adk/contact_multiple_surfaces/a2ui_schema.py

+
+# a2ui_schema.py
+
+A2UI_SCHEMA = r'''


+1

heres reference for how to do that

https://github.com/google/A2UI/blob/main/samples/agent/adk/rizzcharts/agent_executor.py#L56
and
https://github.com/google/A2UI/blob/main/samples/agent/adk/rizzcharts/component_catalog_builder.py#L34

wrenj · 2025-12-15T18:57:50Z

samples/agent/adk/contact_multiple_surfaces/a2ui_examples.py

+
+# a2ui_examples.py
+
+CONTACT_UI_EXAMPLES = """


try loading examples from json files, here is how i did it in rizzcharts

https://github.com/google/A2UI/blob/main/samples/agent/adk/rizzcharts/agent.py#L50

the nice thing is it validates all your examples so you know you won't confuse the llm with invalid json

wrenj · 2025-12-15T18:58:45Z

samples/agent/adk/contact_multiple_surfaces/agent_executor.py

+                "--- AGENT_EXECUTOR: A2UI extension is active. Using UI agent. ---"
+            )
+        else:
+            agent = self.text_agent


or just error here

wrenj · 2025-12-15T19:00:14Z

samples/agent/adk/contact_multiple_surfaces/prompt_builder.py

+"""
+
+
+def get_ui_prompt(base_url: str, examples: str) -> str:


i found the llmagent instructions lambda handled all this on the fly prompt generation nicely

heres example from rizzcharts
https://github.com/google/A2UI/blob/main/samples/agent/adk/rizzcharts/agent.py#L143

wrenj · 2025-12-15T19:10:51Z

samples/client/lit/contact/ui/custom-components/web-frame.ts

+  }
+
+  #onMessage = (event: MessageEvent) => {
+    // In production, verify event.origin matches this.src origin (if not opaque).


maybe implement this for the demo? its kinda a security hole. i imagine people will copy+paste the samples

wrenj · 2025-12-15T19:12:39Z

samples/client/lit/contact/ui/custom-components/web-frame.ts

+      // Trusted
+      // Always allow same-origin for trusted domains to avoid issues with local assets or CORS checks
+      if (this.interactionMode === 'interactive') {
+        return "allow-scripts allow-forms allow-popups allow-modals allow-same-origin";


maybe get rid of allow-popups? these are annoying and u have modals

dmandar added 3 commits December 12, 2025 13:21

feat(client): update contact client for custom components and multipl…

9465f49

…e surfaces

feat(renderer): enable custom component registration

09ee7f7

Add a new multi-surface contact lookup agent that streams to the cust…

69002aa

…om component 'contact' client.

dmandar requested review from gspencergoog and wrenj December 12, 2025 22:38

Add readme.

b31928c

gspencergoog reviewed Dec 15, 2025

View reviewed changes

wrenj approved these changes Dec 15, 2025

View reviewed changes

New multi-surface agent example that works with the contact custom component client #275

Are you sure you want to change the base?

New multi-surface agent example that works with the contact custom component client #275

Uh oh!

Conversation

dmandar commented Dec 12, 2025

Uh oh!

gspencergoog left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dmandar Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dmandar Dec 15, 2025 •

edited

Loading