feat: Introduce a calculator UI application, integrating it as a serv… by sugoi-yuzuru · Pull Request #791 · google/A2UI

sugoi-yuzuru · 2026-03-06T14:49:04Z

feat: Introduce a calculator UI application, integrating it as a server resource and tool, and updating related dependencies.

This calculator MCP App is a precursor to a future sample application that intends to integrate MCP Apps into A2UI. A2UI Custom component that will allow MCP Apps rendering will be a following up.

https://screenshot.googleplex.com/3tQRreZ5eQE9qsQ is how the calculator looks.

List which issues are fixed by this PR. For larger changes, raising an issue first helps reduce redundant work.

Pre-launch Checklist

I signed the CLA.
I read the Contributors Guide.
I read the Style Guide.
I have added updates to the CHANGELOG.
I updated/added relevant documentation.
My code changes (if any) have tests.

If you need help, consider asking for advice on the discussion board.

gemini-code-assist

Code Review

This pull request introduces a new calculator UI application and integrates it as a server resource. However, it contains critical security vulnerabilities, particularly in calculator.html, related to cross-window communication. Specifically, the use of wildcard origins in postMessage and CORS policies, along with missing origin validation in message listeners, could lead to data leakage or spoofing attacks. These issues must be addressed by restricting origins to trusted values. Additionally, a bug in calculation logging, a missing edge case for division by zero, and opportunities for improving JavaScript code robustness and maintainability have been identified.

gemini-code-assist · 2026-03-06T14:51:27Z

samples/agent/mcp/apps/calculator.html

+  }
+
+  window.addEventListener('message', (event) => {
+    const data = event.data;


For security, you must verify the message's origin to ensure it's coming from a trusted source. Without this check, your application is vulnerable to attacks from malicious sites. Please add a check for event.origin at the beginning of this event listener. The placeholder origin in the suggestion should be replaced with the actual origin of the parent application.

Suggested change

const data = event.data;

if (event.origin !== 'https://your-parent-origin.com') return;

const data = event.data;

samples/agent/mcp/apps/calculator.html

gemini-code-assist · 2026-03-06T14:51:28Z

samples/agent/mcp/apps/calculator.html

+
+  function sendRequest(method, params) {
+    const id = nextId++;
+    window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, '*');


The use of window.parent.postMessage with a wildcard target origin ('*') is a significant security risk. This allows any page embedding the application in an iframe to receive potentially sensitive messages, leading to data leakage or exploitation. Always specify the exact origin of the parent window instead of '*'. This issue also applies to lines 203 and 214.

Suggested change

window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, '*');

window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, 'https://your-parent-origin.com');

gemini-code-assist · 2026-03-06T14:51:28Z

samples/agent/mcp/apps/calculator.html

+    const id = nextId++;
+    window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, '*');
+    return new Promise((resolve, reject) => {
+      const listener = (event) => {


The application listens for message events without validating the origin property of the event. This is a security vulnerability as it allows any window or iframe to send messages, potentially leading to spoofing or data manipulation. Always check event.origin and ensure it matches the expected host. Additionally, the sendRequest function adds a 'message' event listener for each request, which could lead to memory leaks if responses don't arrive. Consider implementing a timeout to remove listeners and reject promises.

samples/agent/mcp/apps/calculator.html

+    <button class="clear" onclick="clearDisplay()">AC</button>
+    <button class="operator" onclick="appendOperator('/')">÷</button>
+    <button class="operator" onclick="appendOperator('*')">×</button>
+    <button onclick="appendNumber('7')">7</button>
+    <button onclick="appendNumber('8')">8</button>
+    <button onclick="appendNumber('9')">9</button>
+    <button class="operator" onclick="appendOperator('-')">-</button>
+    <button onclick="appendNumber('4')">4</button>
+    <button onclick="appendNumber('5')">5</button>
+    <button onclick="appendNumber('6')">6</button>
+    <button class="operator" onclick="appendOperator('+')">+</button>
+    <button onclick="appendNumber('1')">1</button>
+    <button onclick="appendNumber('2')">2</button>
+    <button onclick="appendNumber('3')">3</button>
+    <button class="equals" onclick="calculate()">=</button>
+    <button onclick="appendNumber('0')">0</button>
+    <button onclick="appendPoint()">.</button>


sugoi-yuzuru

fixed a few feedback

jgindin

Should we push this sample down to, e.g., samples/mcp/calculator to make it easier if we have multiple mcp examples?

jgindin · 2026-03-06T17:57:25Z

samples/agent/mcp/apps/calculator.html

+  window.addEventListener('message', (event) => {
+    const data = event.data;
+    if (data?.method === 'ping') {
+      // Respond to ping if needed, or just ignore as it might be handled by transport


Do we need all of this comment? Or maybe the code is self-explanatory?

You are correct. I have removed this comment, but added a new one to clarify the use of this listner in the context of MCP Apps.

sugoi-yuzuru · 2026-03-06T19:39:45Z

Should we push this sample down to, e.g., samples/mcp/calculator to make it easier if we have multiple mcp examples?

I have pushed it under apps directory where we can add more apps. I don't think we need a directory per app yet though.

…er resource and tool, and updating related dependencies. This calculator MCP App is a precursor to a future sample application that intends to integrate MCP Apps into A2UI. A2UI Custom component that will allow MCP Apps rendering will be a following up. https://screenshot.googleplex.com/3tQRreZ5eQE9qsQ is how the calculator looks.

sugoi-yuzuru requested review from ditman, dmandar, gspencergoog, jacobsimionato, nan-yu, yjbanov and zeroasterisk as code owners March 6, 2026 14:49

github-project-automation bot added this to A2UI Mar 6, 2026

github-project-automation bot moved this to Todo in A2UI Mar 6, 2026

sugoi-yuzuru requested review from jonsharkey and suyangw-g March 6, 2026 14:49

gemini-code-assist bot reviewed Mar 6, 2026

View reviewed changes

sugoi-yuzuru force-pushed the mcp_0_create_mcp_app branch from 1682a38 to 08700af Compare March 6, 2026 16:58

sugoi-yuzuru commented Mar 6, 2026

View reviewed changes

suyangw-g approved these changes Mar 6, 2026

View reviewed changes

jgindin reviewed Mar 6, 2026

View reviewed changes

jgindin approved these changes Mar 6, 2026

View reviewed changes

sugoi-yuzuru force-pushed the mcp_0_create_mcp_app branch 2 times, most recently from 67ba136 to 317a676 Compare March 6, 2026 19:38

sugoi-yuzuru force-pushed the mcp_0_create_mcp_app branch from 317a676 to 338f424 Compare March 6, 2026 23:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Introduce a calculator UI application, integrating it as a serv…#791

feat: Introduce a calculator UI application, integrating it as a serv…#791
sugoi-yuzuru wants to merge 1 commit intomainfrom
mcp_0_create_mcp_app

sugoi-yuzuru commented Mar 6, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Mar 6, 2026

Uh oh!

Uh oh!

gemini-code-assist bot Mar 6, 2026

Uh oh!

gemini-code-assist bot Mar 6, 2026

Uh oh!

Uh oh!

This comment was marked as spam.

Uh oh!

sugoi-yuzuru left a comment

Uh oh!

jgindin left a comment

Uh oh!

jgindin Mar 6, 2026

Uh oh!

sugoi-yuzuru Mar 6, 2026

Uh oh!

sugoi-yuzuru commented Mar 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	const data = event.data;
	if (event.origin !== 'https://your-parent-origin.com') return;
	const data = event.data;

	window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, '*');
	window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, 'https://your-parent-origin.com');

Conversation

sugoi-yuzuru commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gemini-code-assist bot Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This comment was marked as spam.

Uh oh!

sugoi-yuzuru left a comment

Choose a reason for hiding this comment

Uh oh!

jgindin left a comment

Choose a reason for hiding this comment

Uh oh!

jgindin Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

sugoi-yuzuru Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

sugoi-yuzuru commented Mar 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sugoi-yuzuru commented Mar 6, 2026 •

edited

Loading