feat: add GoogleMap component with client-side API key decision logic

- Add google-map.ts component extending v0_8.UI.Root with center, zoom, pins properties
- Register GoogleMap component and rizzchartsConfig in app.ts
- Add rizzcharts.ts configuration for rizzcharts agent
- Switch default catalog to RIZZCHARTS_CATALOG_URI in agent_executor.py
- Add verify_converter.py for A2UI validation testing

Author: doitundoit

samples/agent/adk/rizzcharts/agent_executor.py

@@ -58,7 +58,7 @@ def __init__(self, base_url: str):
                 STANDARD_CATALOG_ID: str(spec_root.joinpath("standard_catalog_definition.json")),
                 RIZZCHARTS_CATALOG_URI: "rizzcharts_catalog_definition.json",
             },
-            default_catalog_uri=STANDARD_CATALOG_ID
+            default_catalog_uri=RIZZCHARTS_CATALOG_URI
         )
         agent = rizzchartsAgent.build_agent()
         runner = Runner(

samples/agent/adk/rizzcharts/verify_converter.py

@@ -0,0 +1,53 @@
+import json
+import jsonschema
+from pathlib import Path
+from component_catalog_builder import ComponentCatalogBuilder
+from a2ui.a2ui_extension import STANDARD_CATALOG_ID
+
+def verify():
+    print("Verifying A2UI Part Converter Logic...")
+    
+    spec_root = Path(__file__).parent / "../../../../specification/0.8/json"
+    schema_path = str(spec_root.joinpath("server_to_client.json"))
+    catalog_path = str(spec_root.joinpath("standard_catalog_definition.json"))
+    
+    print(f"Schema Path: {schema_path}")
+    print(f"Catalog Path: {catalog_path}")
+
+    builder = ComponentCatalogBuilder(
+        a2ui_schema_path=schema_path,
+        uri_to_local_catalog_path={
+            STANDARD_CATALOG_ID: catalog_path,
+        },
+        default_catalog_uri=STANDARD_CATALOG_ID
+    )
+
+    # Load schema ( simulating default client without rizzcharts capabilities)
+    a2ui_schema, uri = builder.load_a2ui_schema(client_ui_capabilities=None)
+    print(f"Loaded Schema for Catalog: {uri}")
+
+    # Prepare array schema as tool does
+    a2ui_schema_object = {"type": "array", "items": a2ui_schema}
+
+    # Test Chart JSON
+    try:
+        print("\n--- Testing chart.json ---")
+        chart_str = Path("examples/standard_catalog/chart.json").read_text()
+        chart_json = json.loads(chart_str)
+        jsonschema.validate(instance=chart_json, schema=a2ui_schema_object)
+        print("SUCCESS: chart.json passed validation.")
+    except Exception as e:
+        print(f"FAILURE: chart.json failed validation: {e}")
+
+    # Test Map JSON
+    try:
+        print("\n--- Testing map.json ---")
+        map_str = Path("examples/standard_catalog/map.json").read_text()
+        map_json = json.loads(map_str)
+        jsonschema.validate(instance=map_json, schema=a2ui_schema_object)
+        print("SUCCESS: map.json passed validation.")
+    except Exception as e:
+        print(f"FAILURE: map.json failed validation: {e}")
+
+if __name__ == "__main__":
+    verify()

samples/client/lit/shell/app.ts

@@ -45,11 +45,19 @@ import "./ui/ui.js";
 import { AppConfig } from "./configs/types.js";
 import { config as restaurantConfig } from "./configs/restaurant.js";
 import { config as contactsConfig } from "./configs/contacts.js";
+import { config as rizzchartsConfig } from "./configs/rizzcharts.js";
 import { styleMap } from "lit/directives/style-map.js";
 
+// Custom components
+import { GoogleMap } from "./ui/google-map.js";
+
+// Register custom components with A2UI
+v0_8.UI.componentRegistry.register("GoogleMap", GoogleMap);
+
 const configs: Record<string, AppConfig> = {
   restaurant: restaurantConfig,
   contacts: contactsConfig,
+  rizzcharts: rizzchartsConfig,
 };
 
 @customElement("a2ui-shell")

samples/client/lit/shell/configs/rizzcharts.ts

@@ -0,0 +1,57 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { AppConfig } from "./types.js";
+
+export const config: AppConfig = {
+  key: "rizzcharts",
+  title: "Rizzcharts",
+  heroImage: "/hero.png",
+  heroImageDark: "/hero-dark.png",
+  background: `radial-gradient(
+    at 0% 0%,
+    light-dark(rgba(161, 196, 253, 0.3), rgba(6, 182, 212, 0.15)) 0px,
+    transparent 50%
+  ),
+  radial-gradient(
+    at 100% 0%,
+    light-dark(rgba(255, 226, 226, 0.3), rgba(59, 130, 246, 0.15)) 0px,
+    transparent 50%
+  ),
+  radial-gradient(
+    at 100% 100%,
+    light-dark(rgba(162, 210, 255, 0.3), rgba(20, 184, 166, 0.15)) 0px,
+    transparent 50%
+  ),
+  radial-gradient(
+    at 0% 100%,
+    light-dark(rgba(255, 200, 221, 0.3), rgba(99, 102, 241, 0.15)) 0px,
+    transparent 50%
+  ),
+  linear-gradient(
+    120deg,
+    light-dark(#f0f4f8, #0f172a) 0%,
+    light-dark(#e2e8f0, #1e293b) 100%
+  )`,
+  placeholder: "Show my sales data for Q4",
+  loadingText: [
+    "Crunching the numbers...",
+    "Generating charts...",
+    "Analyzing data...",
+    "Almost there...",
+  ],
+  serverUrl: "http://localhost:10005",
+};

samples/client/lit/shell/ui/google-map.ts

@@ -0,0 +1,196 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { v0_8 } from "@a2ui/lit";
+
+// Get API key from environment (Vite injects this at build time)
+const GOOGLE_API_KEY = (import.meta as any).env?.VITE_GOOGLE_API_KEY || "";
+
+// Local placeholder image path (served from public directory)
+const LOCAL_PLACEHOLDER_IMAGE = "/map-placeholder.png";
+
+interface LatLng {
+  lat: number;
+  lng: number;
+}
+
+interface MapPin {
+  lat: number;
+  lng: number;
+  name?: string;
+  description?: string;
+  background?: string;
+  borderColor?: string;
+  glyphColor?: string;
+}
+
+interface PathValue {
+  path: string;
+}
+
+@customElement("a2ui-custom-googlemap")
+export class GoogleMap extends v0_8.UI.Root {
+  @property({ attribute: false })
+  accessor center: PathValue | LatLng | null = null;
+
+  @property({ attribute: false })
+  accessor zoom: PathValue | number | null = null;
+
+  @property({ attribute: false })
+  accessor pins: PathValue | MapPin[] | null = null;
+
+  static styles = [
+    css`
+      :host {
+        display: block;
+        flex: var(--weight);
+        min-height: 200px;
+        overflow: hidden;
+        border-radius: 8px;
+      }
+
+      .map-container {
+        width: 100%;
+        height: 100%;
+        min-height: 300px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #e8e8e8;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .placeholder-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        padding: 24px;
+        text-align: center;
+      }
+
+      .placeholder-icon {
+        font-size: 48px;
+        color: #5f6368;
+      }
+
+      .placeholder-text {
+        color: #5f6368;
+        font-size: 14px;
+      }
+
+      .pin-list {
+        margin-top: 8px;
+        font-size: 12px;
+        color: #80868b;
+      }
+    `,
+  ];
+
+  /**
+   * Resolves a value that might be a path binding or a literal value.
+   */
+  private resolveValue<T>(value: PathValue | T | null): T | null {
+    if (!value) return null;
+
+    if (typeof value === "object" && "path" in value && value.path) {
+      if (!this.processor || !this.component) {
+        return null;
+      }
+      return this.processor.getData(
+        this.component,
+        value.path,
+        this.surfaceId ?? v0_8.Data.A2uiMessageProcessor.DEFAULT_SURFACE_ID
+      ) as T | null;
+    }
+
+    return value as T;
+  }
+
+  /**
+   * Builds a Google Maps Static API URL from the resolved data.
+   */
+  private buildGoogleMapsUrl(
+    center: LatLng,
+    zoom: number,
+    pins: MapPin[]
+  ): string {
+    const baseUrl = "https://maps.googleapis.com/maps/api/staticmap";
+    const params = new URLSearchParams({
+      center: `${center.lat},${center.lng}`,
+      zoom: zoom.toString(),
+      size: "600x400",
+      scale: "2",
+      key: GOOGLE_API_KEY,
+    });
+
+    // Add markers for each pin
+    pins.forEach((pin, index) => {
+      const label = pin.name?.charAt(0).toUpperCase() || String(index + 1);
+      const color = pin.background?.replace("#", "") || "red";
+      params.append("markers", `color:0x${color}|label:${label}|${pin.lat},${pin.lng}`);
+    });
+
+    return `${baseUrl}?${params.toString()}`;
+  }
+
+  render() {
+    const resolvedCenter = this.resolveValue<LatLng>(this.center);
+    const resolvedZoom = this.resolveValue<number>(this.zoom) ?? 11;
+    const resolvedPins = this.resolveValue<MapPin[]>(this.pins) ?? [];
+
+    // Decision logic: Use Google Maps if API key is available, otherwise use placeholder
+    if (GOOGLE_API_KEY && resolvedCenter) {
+      const mapUrl = this.buildGoogleMapsUrl(
+        resolvedCenter,
+        resolvedZoom,
+        resolvedPins
+      );
+      return html`
+        <div class="map-container">
+          <img src=${mapUrl} alt="Map showing ${resolvedPins.length} locations" />
+        </div>
+      `;
+    }
+
+    // Fallback: Show local placeholder image with pin information
+    return html`
+      <div class="map-container">
+        <div class="placeholder-container">
+          <img src=${LOCAL_PLACEHOLDER_IMAGE} alt="Map placeholder" />
+          ${resolvedPins.length > 0
+            ? html`
+                <div class="pin-list">
+                  📍 ${resolvedPins.length} locations:
+                  ${resolvedPins.map((pin) => pin.name).join(", ")}
+                </div>
+              `
+            : nothing}
+        </div>
+      </div>
+    `;
+  }
+}