diff --git a/samples/agent/mcp/apps/calculator.html b/samples/agent/mcp/apps/calculator.html
new file mode 100644
index 000000000..02945ba13
--- /dev/null
+++ b/samples/agent/mcp/apps/calculator.html
@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<!--
+ 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.
+-->
+ 
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MCP Calculator</title>
+<style>
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+  }
+  .calculator {
+    background: #fff;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    width: 300px;
+  }
+  .display {
+    width: 100%;
+    height: 60px;
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    font-size: 2em;
+    text-align: right;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-x: auto;
+  }
+  .buttons {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+  }
+  button {
+    padding: 15px;
+    font-size: 1.2em;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    background-color: #e0e0e0;
+    transition: background-color 0.2s;
+  }
+  button:hover {
+    background-color: #d0d0d0;
+  }
+  button.operator {
+    background-color: #ff9f0a;
+    color: white;
+  }
+  button.operator:hover {
+    background-color: #e08900;
+  }
+  button.equals {
+    background-color: #34c759;
+    color: white;
+    grid-column: span 2;
+  }
+  button.equals:hover {
+    background-color: #2da84e;
+  }
+  button.clear {
+    background-color: #ff3b30;
+    color: white;
+    grid-column: span 2;
+  }
+  button.clear:hover {
+    background-color: #d6332a;
+  }
+</style>
+</head>
+<body>
+
+<div class="calculator">
+  <div class="display" id="display">0</div>
+  <div class="buttons">
+    <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>
+  </div>
+</div>
+
+<script>
+  let currentInput = '';
+  let previousInput = '';
+  let operator = null;
+  const displayElement = document.getElementById('display');
+
+  function updateDisplay() {
+    displayElement.textContent = currentInput || '0';
+  }
+
+  function appendNumber(number) {
+    if (currentInput === '0' && number !== '.') {
+      currentInput = number;
+    } else {
+      currentInput += number;
+    }
+    updateDisplay();
+  }
+
+  function appendPoint() {
+    if (!currentInput.includes('.')) {
+      currentInput += '.';
+      updateDisplay();
+    }
+  }
+
+  function appendOperator(op) {
+    if (currentInput === '') return;
+    if (previousInput !== '') {
+      calculate();
+    }
+    operator = op;
+    previousInput = currentInput;
+    currentInput = '';
+  }
+
+  function clearDisplay() {
+    currentInput = '';
+    previousInput = '';
+    operator = null;
+    updateDisplay();
+  }
+
+  function calculate() {
+    if (previousInput === '' || currentInput === '') return;
+    let result;
+    const prevVal = parseFloat(previousInput);
+    const currentVal = parseFloat(currentInput);
+    if (isNaN(prevVal) || isNaN(currentVal)) return;
+
+    switch (operator) {
+      case '+':
+        result = prevVal + currentVal;
+        break;
+      case '-':
+        result = prevVal - currentVal;
+        break;
+      case '*':
+        result = prevVal * currentVal;
+        break;
+      case '/':
+        if (currentVal === 0) {
+          currentInput = 'Error';
+          operator = null;
+          previousInput = '';
+          updateDisplay();
+          return;
+        }
+        result = prevVal / currentVal;
+        break;
+      default:
+        return;
+    }
+    currentInput = result.toString();
+    updateDisplay();
+    
+    // Log calculation to host
+    sendNotification('notifications/message', {
+      level: 'info',
+      data: `Calculated: ${prevVal} ${operator} ${currentVal} = ${result}`
+    });
+
+    operator = null;
+    previousInput = '';
+  }
+
+  // MCP Communication
+  let nextId = 1;
+
+  function sendRequest(method, params) {
+    const id = nextId++;
+    window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, '*');
+    return new Promise((resolve, reject) => {
+      const listener = (event) => {
+        if (event.data?.id === id) {
+          window.removeEventListener('message', listener);
+          if (event.data?.result) {
+            resolve(event.data.result);
+          } else if (event.data?.error) {
+            reject(new Error(event.data.error.message || JSON.stringify(event.data.error)));
+          }
+        }
+      };
+      window.addEventListener('message', listener);
+    });
+  }
+
+  function sendNotification(method, params) {
+    window.parent.postMessage({ jsonrpc: "2.0", method, params }, '*');
+  }
+
+  window.addEventListener('message', (event) => {
+    const data = event.data;
+    if (data?.method === 'ping') {
+      // The host sends a 'ping' to check if the app is responsive (liveness check).
+      // Since this example does not use an MCP SDK, we must manually reply with an empty result
+      // to acknowledge the ping and keep the connection alive.
+      if (data.id) {
+         window.parent.postMessage({ jsonrpc: "2.0", id: data.id, result: {} }, '*');
+      }
+    }
+  });
+
+  // Initialize
+  sendRequest("ui/initialize", {
+      appCapabilities: {
+          experimental: {},
+          tools: { listChanged: false },
+          availableDisplayModes: ["inline"]
+      }
+  }).then((result) => {
+      console.log("Initialized with host:", result);
+      sendNotification("ui/notifications/initialized", {});
+  }).catch(err => {
+      console.error("Initialization failed:", err);
+  });
+
+</script>
+</body>
+</html>
diff --git a/samples/agent/mcp/server.py b/samples/agent/mcp/server.py
index 3b81a257a..5d4958571 100644
--- a/samples/agent/mcp/server.py
+++ b/samples/agent/mcp/server.py
@@ -90,6 +90,23 @@ async def handle_call_tool(name: str, arguments: dict[str, Any]) -> dict[str, An
 
     raise ValueError(f"Unknown tool: {name}")
 
+  @app.list_resources()
+  async def list_resources() -> list[types.Resource]:
+    return [
+        types.Resource(
+            uri="ui://calculator/app",
+            name="Calculator App",
+            mimeType="text/html;profile=mcp-app",
+            description="A simple calculator application",
+        )
+    ]
+
+  @app.read_resource()
+  async def read_resource(uri: Any) -> str | bytes:
+    if str(uri) == "ui://calculator/app":
+      return (pathlib.Path(__file__).parent / "apps" / "calculator.html").read_text()
+    raise ValueError(f"Unknown resource: {uri}")
+
   @app.list_tools()
   async def list_tools() -> list[types.Tool]:
     return [
