Extending a MCP/A2A Currency Agent with A2UI

DEV Community

Installing frontend dependencies... cd frontend/frontend && npm install up to date, audited 16 packages in 606ms 5 packages are looking for funding run `npm fund` for details 1 moderate severity vulnerability To address all issues, run: npm audit fix Run `npm audit` for details. uv pip install -r frontend/requirements.txt Checked 14 packages in 7ms make[1]: Leaving directory '/home/xbill/currency-agent' make react-install make[1]: Entering directory '/home/xbill/currency-agent' Installing React frontend dependencies... cd frontend-react && npm install > adk-starter@0.1.0 postinstall > npm run install:agent > adk-starter@0.1.0 install:agent > ./scripts/setup-agent.sh || scripts\setup-agent.bat Resolved 127 packages in 0.53ms Checked 123 packages in 0.56ms up to date, audited 1195 packages in 2s 232 packages are looking for funding run `npm fund` for details 9 vulnerabilities (5 low, 3 moderate, 1 high) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. make[1]: Leaving directory '/home/xbill/currency-agent'

Lint:

xbill@penguin:~/currency-agent$ make lint
Running linting checks (ruff check + format)...
uv run ruff check .
All checks passed!
uv run ruff format --check .
20 files already formatted

Test:

xbill@penguin:~/currency-agent$ make test
Running tests...
make stop
make[1]: Entering directory '/home/xbill/currency-agent'
Stopping servers...
make[1]: Leaving directory '/home/xbill/currency-agent'
make start
make[1]: Entering directory '/home/xbill/currency-agent'
Starting MCP Server in background...
Waiting for MCP Server to initialize...
Starting A2A Agent Server in background...
Services started. Logs: mcp.log, agent.log
make[1]: Leaving directory '/home/xbill/currency-agent'
uv run pytest
================================================== test session starts ===================================================
platform linux -- Python 3.13.13, pytest-9.0.3, pluggy-1.6.0
rootdir: /home/xbill/currency-agent
configfile: pyproject.toml
plugins: asyncio-1.3.0, anyio-4.10.0
asyncio: mode=Mode.STRICT, debug=False, asyncio_default_fixture_loop_scope=None, asyncio_default_test_loop_scope=function
collected 15 items 
frontend/tests/test_a2a_utils.py .. [13%]
frontend/tests/test_api.py ... [33%]
frontend/tests/test_auth.py ... [53%]
frontend/tests/test_logging_config.py .. [66%]
frontend/tests/test_utils.py ... [86%]
frontend-react/scripts/test_copilot_endpoint.py s [93%]
mcp-server/test_server.py . [100%]

Time to Start some Currency Arbitrage!

The servers are started:

xbill@penguin:~/currency-agent$ make start
Starting MCP Server in background...
Waiting for MCP Server to initialize...
Starting A2A Agent Server in background...
Services started. Logs: mcp.log, agent.log
xbill@penguin:~/currency-agent$ make status
Checking status of background services...
 All backend and frontend services are currently active and running:
 • MCP Server: Running (Port 8080)
 • A2A Agent Server: Running (Port 10000)
 • Frontend Server: Running (Port 8000)

and checked end-to-end:

xbill@penguin:~/currency-agent$makee2e-testRunningA2AClienttests...uvruncurrency_agent/test_client.py/home/xbill/currency-agent/.venv/lib/python3.13/site-packages/google/protobuf/runtime_version.py:98:UserWarning:Protobufgencodeversion5.29.3isexactlyonemajorversionolderthantheruntimeversion6.31.1ata2a.proto.Pleaseupdatethegencodetoavoidcompatibilityviolationsinthenextruntimerelease.warnings.warn(---🔄Connectingtoagentathttp://127.0.0.1:10000...---/home/xbill/currency-agent/currency_agent/test_client.py:136:DeprecationWarning:A2AClientisdeprecatedandwillberemovedinafutureversion.UseClientFactorytocreateaclientwithaJSON-RPCtransport.client=A2AClient(---✅Connectionsuccessful.------✉️SingleTurnRequest------📥SingleTurnRequestResponse---{"id":"0921454b-23dc-4b11-99b0-8e505ce61df9","jsonrpc":"2.0","result":{"artifacts":[{"artifactId":"7d9d4434-d5af-4741-b191-05d939f1c049","parts":[{"data":{"version":"v0.9","updateComponents":{"surfaceId":"currency_agent","components":[{"id":"root","component":"Card","child":"conversion_display"},{"id":"conversion_display","component":"Column","children":["initial_amount","exchange_rate_text","converted_amount"]},{"id":"initial_amount","component":"Text","variant":"h3","text":"100 USD is equal to:"},{"id":"exchange_rate_text","component":"Text","variant":"body","text":"Exchange Rate (USD to CAD): 1 USD = 1.3857 CAD"},{"id":"converted_amount","component":"Text","variant":"h2","text":"138.57 CAD"}]}},"kind":"data","metadata":{"mimeType":"application/json+a2ui"}},{"kind":"text","text":"100 USD is 138.57 CAD."}]}],"contextId":"81d471d1-0a12-4470-b752-85904a0d8d6c","history":[{"contextId":"81d471d1-0a12-4470-b752-85904a0d8d6c","kind":"message","messageId":"be48a82bd4d34484983ed106cc7d3f33","parts":[{"kind":"text","text":"how much is 100 USD in CAD?"}],"role":"user","taskId":"52014164-6d93-430f-9ea6-ecbeea73ac62"},{"contextId":"81d471d1-0a12-4470-b752-85904a0d8d6c","kind":"message","messageId":"be48a82bd4d34484983ed106cc7d3f33","parts":[{"kind":"text","text":"how much is 100 USD in CAD?"}],"role":"user","taskId":"52014164-6d93-430f-9ea6-ecbeea73ac62"},{"kind":"message","messageId":"b9789b81-b159-4f2d-83c5-c7c2b1c90b2b","parts":[{"data":{"id":"adk-c26ec1aa-91f7-446e-8630-252c9d6c906d","args":{"currency_from":"USD","currency_to":"CAD"},"name":"get_exchange_rate"},"kind":"data","metadata":{"adk_type":"function_call","adk_thought_signature":"CoIDAQw51scWbt6KizGVX3bW32jTuvriziuNmeSevAkVV3/eDXpYNQO1yBaVslcacx5hm56GxgZeZ7clP+WhJyVWZEr7JI13gYj5Dn6lFAyo2JxmcTx3HKA4rsAI2TCtmCk54hmar7Nwx3pCKQ/25dFvQ2dmU3yJ0023JO9CB5MQyIMFe1kCG6wwspfYXsFCfK/n9EstWQNuKQC4bp1u9z8cEefx8vvXhyioAirZfCnFYTQye9SAqYBLoLue6rCpN7k1WNNKrbheiiBiuk9cuQTCChr6V9npWoE+IkV6rwYFaM1XNW9ecTdqShDehvagVYJjETGCi3VOIpotclNKhF14CI2fulDrgYiEhZGQvC2Hp9ozJWrb31kd/b94Y8FZ2MqgyWxCF7qmCUfEAQ4HGr+x92lLEWkapN35MNW4RmjJwieJsZwGqC+bzhxueD2oFYclviNzMqJsFgcgVS4JC9w00/nDIyxe3ketyRys/CbwasNdLHUlYjcWSLI7PoZXk7f3TZI="}}],"role":"agent"},{"kind":"message","messageId":"127d8a47-ca80-459e-933e-5d946d33da6a","parts":[{"data":{"id":"adk-c26ec1aa-91f7-446e-8630-252c9d6c906d","name":"get_exchange_rate","response":{"content":[{"type":"text","text":"{\"amount\":1.0,\"base\":\"USD\",\"date\":\"2026年06月03日\",\"rates\":{\"CAD\":1.3857}}"}],"structuredContent":{"amount":1.0,"base":"USD","date":"2026-06-03","rates":{"CAD":1.3857}},"isError":false}},"kind":"data","metadata":{"adk_type":"function_response"}}],"role":"agent"},{"kind":"message","messageId":"f8313128-811e-43c1-9ad5-2463bc7ecd61","parts":[{"data":{"version":"v0.9","updateComponents":{"surfaceId":"currency_agent","components":[{"id":"root","component":"Card","child":"conversion_display"},{"id":"conversion_display","component":"Column","children":["initial_amount","exchange_rate_text","converted_amount"]},{"id":"initial_amount","component":"Text","variant":"h3","text":"100 USD is equal to:"},{"id":"exchange_rate_text","component":"Text","variant":"body","text":"Exchange Rate (USD to CAD): 1 USD = 1.3857 CAD"},{"id":"converted_amount","component":"Text","variant":"h2","text":"138.57 CAD"}]}},"kind":"data","metadata":{"mimeType":"application/json+a2ui"}},{"kind":"text","text":"100 USD is 138.57 CAD."}],"role":"agent"}],"id":"52014164-6d93-430f-9ea6-ecbeea73ac62","kind":"task","metadata":{"adk_app_name":"currency_agent","adk_user_id":"A2A_USER_81d471d1-0a12-4470-b752-85904a0d8d6c","adk_session_id":"81d471d1-0a12-4470-b752-85904a0d8d6c","adk_invocation_id":"e-800169b7-70f8-4a90-9613-c80d43152b4f","adk_author":"currency_agent","adk_event_id":"0e81d6c1-5b69-4969-bad7-6d14fe58e9ab","adk_usage_metadata":{"cacheTokensDetails":[{"modality":"TEXT","tokenCount":24060}],"cachedContentTokenCount":24060,"candidatesTokenCount":317,"promptTokenCount":24450,"promptTokensDetails":[{"modality":"TEXT","tokenCount":24450}],"thoughtsTokenCount":100,"totalTokenCount":24867},"adk_actions":{"stateDelta":{},"artifactDelta":{},"requestedAuthConfigs":{},"requestedToolConfirmations":{}}},"status":{"state":"completed","timestamp":"2026-06-03T19:31:49.955541+00:00"}}}---❔QueryTask------📥QueryTaskResponse---{"id":"416f7448-0059-45aa-90c6-c90a96d021bc","jsonrpc":"2.0","result":{"artifacts":[{"artifactId":"7d9d4434-d5af-4741-b191-05d939f1c049","parts":[{"data":{"version":"v0.9","updateComponents":{"surfaceId":"currency_agent","components":[{"id":"root","component":"Card","child":"conversion_display"},{"id":"conversion_display","component":"Column","children":["initial_amount","exchange_rate_text","converted_amount"]},{"id":"initial_amount","component":"Text","variant":"h3","text":"100 USD is equal to:"},{"id":"exchange_rate_text","component":"Text","variant":"body","text":"Exchange Rate (USD to CAD): 1 USD = 1.3857 CAD"},{"id":"converted_amount","component":"Text","variant":"h2","text":"138.57 CAD"}]}},"kind":"data","metadata":{"mimeType":"application/json+a2ui"}},{"kind":"text","text":"100 USD is 138.57 CAD."}]}],"contextId":"81d471d1-0a12-4470-b752-85904a0d8d6c","history":[{"contextId":"81d471d1-0a12-4470-b752-85904a0d8d6c","kind":"message","messageId":"be48a82bd4d34484983ed106cc7d3f33","parts":[{"kind":"text","text":"how much is 100 USD in CAD?"}],"role":"user","taskId":"52014164-6d93-430f-9ea6-ecbeea73ac62"},{"contextId":"81d471d1-0a12-4470-b752-85904a0d8d6c","kind":"message","messageId":"be48a82bd4d34484983ed106cc7d3f33","parts":[{"kind":"text","text":"how much is 100 USD in CAD?"}],"role":"user","taskId":"52014164-6d93-430f-9ea6-ecbeea73ac62"},{"kind":"message","messageId":"b9789b81-b159-4f2d-83c5-c7c2b1c90b2b","parts":[{"data":{"id":"adk-c26ec1aa-91f7-446e-8630-252c9d6c906d","args":{"currency_from":"USD","currency_to":"CAD"},"name":"get_exchange_rate"},"kind":"data","metadata":{"adk_type":"function_call","adk_thought_signature":"CoIDAQw51scWbt6KizGVX3bW32jTuvriziuNmeSevAkVV3/eDXpYNQO1yBaVslcacx5hm56GxgZeZ7clP+WhJyVWZEr7JI13gYj5Dn6lFAyo2JxmcTx3HKA4rsAI2TCtmCk54hmar7Nwx3pCKQ/25dFvQ2dmU3yJ0023JO9CB5MQyIMFe1kCG6wwspfYXsFCfK/n9EstWQNuKQC4bp1u9z8cEefx8vvXhyioAirZfCnFYTQye9SAqYBLoLue6rCpN7k1WNNKrbheiiBiuk9cuQTCChr6V9npWoE+IkV6rwYFaM1XNW9ecTdqShDehvagVYJjETGCi3VOIpotclNKhF14CI2fulDrgYiEhZGQvC2Hp9ozJWrb31kd/b94Y8FZ2MqgyWxCF7qmCUfEAQ4HGr+x92lLEWkapN35MNW4RmjJwieJsZwGqC+bzhxueD2oFYclviNzMqJsFgcgVS4JC9w00/nDIyxe3ketyRys/CbwasNdLHUlYjcWSLI7PoZXk7f3TZI="}}],"role":"agent"},{"kind":"message","messageId":"127d8a47-ca80-459e-933e-5d946d33da6a","parts":[{"data":{"id":"adk-c26ec1aa-91f7-446e-8630-252c9d6c906d","name":"get_exchange_rate","response":{"content":[{"type":"text","text":"{\"amount\":1.0,\"base\":\"USD\",\"date\":\"2026年06月03日\",\"rates\":{\"CAD\":1.3857}}"}],"structuredContent":{"amount":1.0,"base":"USD","date":"2026-06-03","rates":{"CAD":1.3857}},"isError":false}},"kind":"data","metadata":{"adk_type":"function_response"}}],"role":"agent"},{"kind":"message","messageId":"f8313128-811e-43c1-9ad5-2463bc7ecd61","parts":[{"data":{"version":"v0.9","updateComponents":{"surfaceId":"currency_agent","components":[{"id":"root","component":"Card","child":"conversion_display"},{"id":"conversion_display","component":"Column","children":["initial_amount","exchange_rate_text","converted_amount"]},{"id":"initial_amount","component":"Text","variant":"h3","text":"100 USD is equal to:"},{"id":"exchange_rate_text","component":"Text","variant":"body","text":"Exchange Rate (USD to CAD): 1 USD = 1.3857 CAD"},{"id":"converted_amount","component":"Text","variant":"h2","text":"138.57 CAD"}]}},"kind":"data","metadata":{"mimeType":"application/json+a2ui"}},{"kind":"text","text":"100 USD is 138.57 CAD."}],"role":"agent"}],"id":"52014164-6d93-430f-9ea6-ecbeea73ac62","kind":"task","metadata":{"adk_app_name":"currency_agent","adk_user_id":"A2A_USER_81d471d1-0a12-4470-b752-85904a0d8d6c","adk_session_id":"81d471d1-0a12-4470-b752-85904a0d8d6c","adk_invocation_id":"e-800169b7-70f8-4a90-9613-c80d43152b4f","adk_author":"currency_agent","adk_event_id":"0e81d6c1-5b69-4969-bad7-6d14fe58e9ab","adk_usage_metadata":{"cacheTokensDetails":[{"modality":"TEXT","tokenCount":24060}],"cachedContentTokenCount":24060,"candidatesTokenCount":317,"promptTokenCount":24450,"promptTokensDetails":[{"modality":"TEXT","tokenCount":24450}],"thoughtsTokenCount":100,"totalTokenCount":24867},"adk_actions":{"stateDelta":{},"artifactDelta":{},"requestedAuthConfigs":{},"requestedToolConfirmations":{}}},"status":{"state":"completed","timestamp":"2026-06-03T19:31:49.955541+00:00"}}}---📝Multi-TurnRequest------📥Multi-Turn:FirstTurnResponse---{"id":"c17d3d20-d4c1-4b70-b2a3-1f56b30529f1","jsonrpc":"2.0","result":{"artifacts":[{"artifactId":"29c35c34-b8ea-4c29-9ce1-929b97ab3ca3","parts":[{"kind":"text","text":"What currency do you want to convert to?"}]}],"contextId":"a106129a-7692-4bd1-bd06-0e4f09a258af","history":[{"contextId":"a106129a-7692-4bd1-bd06-0e4f09a258af","kind":"message","messageId":"2b709153e93d4ca2b59349c4dba6f658","parts":[{"kind":"text","text":"how much is 100 USD?"}],"role":"user","taskId":"e7eb6014-f770-4b06-b7fb-1a1a12b3bfee"},{"contextId":"a106129a-7692-4bd1-bd06-0e4f09a258af","kind":"message","messageId":"2b709153e93d4ca2b59349c4dba6f658","parts":[{"kind":"text","text":"how much is 100 USD?"}],"role":"user","taskId":"e7eb6014-f770-4b06-b7fb-1a1a12b3bfee"},{"kind":"message","messageId":"45a99a3b-7395-4af5-af7a-c1452e1f53b1","parts":[{"kind":"text","text":"What currency do you want to convert to?"}],"role":"agent"}],"id":"e7eb6014-f770-4b06-b7fb-1a1a12b3bfee","kind":"task","metadata":{"adk_app_name":"currency_agent","adk_user_id":"A2A_USER_a106129a-7692-4bd1-bd06-0e4f09a258af","adk_session_id":"a106129a-7692-4bd1-bd06-0e4f09a258af","adk_invocation_id":"e-8041dafe-4319-42ed-89ef-0999dacf84a7","adk_author":"currency_agent","adk_event_id":"195fc334-df88-40ec-bf75-884ff395b671","adk_usage_metadata":{"candidatesTokenCount":9,"promptTokenCount":24309,"promptTokensDetails":[{"modality":"TEXT","tokenCount":24309}],"thoughtsTokenCount":61,"totalTokenCount":24379},"adk_actions":{"stateDelta":{},"artifactDelta":{},"requestedAuthConfigs":{},"requestedToolConfirmations":{}}},"status":{"state":"completed","timestamp":"2026-06-03T19:31:51.471602+00:00"}}}---🚀Firstturncompleted,nofurtherinputrequiredforthistestcase.---

Start the Currency Session

Once all the agents have been started — the web interface on port 8000 is connected with a standard web browser:

The new A2UI tools are presented:

Running the new A2UI tools — conversion card:

Rates Table:

Line Chart: 5 day trend:

Multicurrency Wallet:

What does the A2UI Code Look Like?

The A2UI generated code follows a well defined format:

Tomatchtheworkspace'sglassmorphicaesthetics,theagenttypicallywrapscomponentsinsideaCardlayoutusingparentIdrelationships:{"version":"v0.9","components":[{"id":"container_card","type":"Card","props":{"title":"📈 Historical exchange rates"}},{"id":"historical_line_chart","type":"LineChart","parentId":"container_card","props":{"title":"USD / EUR Trend","labels":["Mon","Tue","Wed","Thu","Fri"],"values":[0.8558,0.8577,0.8573,0.8583,0.8610],"color":"#3b82f6"}}]}

How does this all Work?

Antigravity CLI has the answer!

> summarize how the currency project uses A2UI
▸ Thought for 3s, 422 tokens
 Analyzing A2UI Integration
 The Currency Agent uses Agent-to-UI (A2UI) to present structured information (like conversion rates, trend tables,
 and
 wallet balances) as interactive, premium UI cards instead of raw text. Here is how it is implemented across the
 project:
 ### 1. Agent Configuration & Generation (agent.py)
 • Schema Definition: Initializes agent.py with version 0.9 components (e.g., Card , Text , Table , Column ,
 Row ).
 • Prompt Injection: The schema manager generates a detailed system prompt instruction that details the catalog schema
 and provides examples. This instructs the LLM (agent.py) on how to output structured JSON wrapped inside <a2ui-
 json>...</a2ui-json> blocks.
 • Part Conversion: Integrates agent.py inside the A2A executor factory to process Gemini's output and format
 A2UI blocks during Agent-to-Agent (A2A) protocol exchanges.
 ### 2. Frontend Parser & Renderer (app.ts)
 • Response Parsing: The workspace frontend regex-searches all incoming chat messages for <a2ui-json> blocks.
 • Dynamic Rendering: Passes the JSON content to app.ts, which parses the tree of UI components and
 dynamically builds native HTML elements matching the catalog parameters.
 • Sandbox Demos: Implements sandbox controls that simulate agent responses to let developers preview A2UI components
 live in the web browser.
 ### 3. Visual Styling (style.css)
 • Defines CSS properties for .a2ui-card and .a2ui-block-container , styled with glassmorphic borders, neon mint
 green text, and premium dark-mode grids matching the theme.

Phew. that's a lot! What else is there?

 ### How A2UI works in this Project
 Rather than running a bidirectional state synchronizer (like AG-UI), this project relies on a clean, declarative A2UI
 flow:
 1. Prompt Configuration: In agent.py, the agent is configured with the A2uiSchemaManager to append formatting
 rules and examples to the system prompt.
 2. Declarative Output: The LLM output contains UI components formatted in JSON, wrapped in <a2ui-json>...</a2ui- 
 json> blocks.
 3. A2A Integration: The agent.py extracts these blocks and converts them into A2A parts.
 4. Client-Side Rendering: The frontend browser client (app.ts) extracts the raw <a2ui-json> blocks via
 regex and calls its client-side rendering engine app.ts to map the JSON elements to styled HTML containers.

Are you sure? How about a code review:

 Initiating Code Review
 Here is a detailed code review of how Agent-to-UI (A2UI) is used within this project.
 ──────
 A2UI Code Review: Currency Agent Ecosystem 
 ## 1. Backend Architecture & Integration (agent.py)

 The backend uses the Google ADK library and the official a2ui Python package to inject formatting rules into the
 model context and package UI components.
 ### Setup & Prompt Generation
 • Schema Definition: Initializes the A2uiSchemaManager with version 0.9 and selects the BasicCatalog .
 • System Prompt Injection:
 SYSTEM_INSTRUCTION = schema_manager.generate_system_prompt( 
 role_description=( ... ), 
 workflow_description="Use components to display structured currency conversions and rates.", 
 ui_description="Use Card and Text components for displaying rates. Use Table components when presenting 
 multiple exchange rates or history.", 
 include_schema=True, 
 include_examples=True, 
 allowed_components=["Card", "Text", "Table"], 
 ) 
 • Review Verdict: Excellent practice. Rather than manually typing and maintaining JSON-schema rules or few-shot
 examples in a raw text string, the A2uiSchemaManager generates precise prompt instructions dynamically. Setting
 allowed_components limits the model's vocabulary and prevents hallucination of unsupported UI elements.
 ### Toolset & Part Conversion
 • UI Toolset: Equips the LlmAgent with a2ui_toolset ( SendA2uiToClientToolset ).
 • Part Converter Setup:
 def agent_executor_factory(runner): 
 config = A2aAgentExecutorConfig( 
 gen_ai_part_converter=A2uiPartConverter( 
 selected_catalog, bypass_tool_check=True 
 ).convert 
 ) 
 return A2aAgentExecutor(runner=runner, config=config) 
 • Review Verdict: By integrating the A2uiPartConverter directly into the A2aAgentExecutorConfig , any text
 responses returned by Gemini containing <a2ui-json> blocks are interceptable and mapped cleanly into structured
 data parts matching the A2A MIME standard ( application/json+a2ui ).
 ──────
 ## 2. Frontend Parser & Renderer (app.ts)
 The frontend receives the response, parses out the <a2ui-json> block, and recursively translates it to styled HTML
 components.
 ### Regex Extraction
 • Location: app.ts
 const a2uiRegex = /<a2ui-json>([\s\S]*?)<\/a2ui-json>/; 
 const match = text.match(a2uiRegex); 
 • Review Verdict: The regex is simple, clean, and handles multi-line blocks. It strips the <a2ui-json> block
 from the text message so the user gets clean text alongside a structured component.
 ### DOM Generation Engine ( renderA2UI )
 • Location: app.ts
 • Schema Normalization: Parses the JSON and accommodates multiple layout formats (basic array, parsed.components , 
 parsed.updateComponents.components , or parsed.message.components ).
 • Hierarchy Resolution: Resolves hierarchical relationships using parentId referencing, allowing nested elements:
 normalized.forEach((c: any) => { 
 if (c.child) { ... } 
 if (Array.isArray(c.children)) { ... } 
 }); 
 • Security & XSS Prevention:
 Throughout the element building code (e.g. el.textContent = c.props.value or title.textContent = cardComp.props. 
 title ), the renderer uses textContent rather than innerHTML .
 • Review Verdict: Highly Secure. Directly mapping LLM output to innerHTML poses a serious Cross-Site Scripting
 (XSS) risk if the model produces malformed or malicious script tags. Using textContent ensures that strings are
 treated strictly as text.
 ### Visual Aesthetics
 • The components are styled using theme-consistent CSS variables (e.g., background = 'hsl(var(--bg-card))' , border
 = '1px solid hsl(var(--border-color))' ).
 • Review Verdict: Ensures that the A2UI elements match the surrounding dark mode/glassmorphism styling system
 seamlessly.
 ──────
 ## 3. Strengths & Best Practices Found
 1. Decoupled Architecture: The agent provides a declarative specification of the UI components ( what to render) and
 leaves the client browser in control of styling, positioning, and visual mapping ( how to render).
 2. Robust Fallbacks: The code handles cases where there is a parse failure by logging the error and falling back to
 raw text so that the conversation does not break.
 3. Recursive Column/Row Layouts: Incorporating parent-child rendering ( renderElement ) allows complex nested grids
 (e.g., wallet columns/rows) to render gracefully.

Summary

The goal of the demo/article was to enable A2UI presentation controls on a functional agent supporting common protocols like A2A and MCP.

The currency agent was chosen as a starting point and new A2UI presentation objects were added to the user interface with Antigravity CLI.

Finally- the updated A2UI project integration was summarized, and code reviewed with Antigravity CLI.