Use extension bundles for prompt sample (#48)

* add city selection in UI; replaced extension with bundles

* add note about preview bundles and package version

* updated local dev instructions

Author: lilyjma

src/FunctionsMcpPrompts/README.md

@@ -22,20 +22,23 @@ This project is a Python Azure Function app that exposes MCP (Model Context Prot
 
 - [Python](https://www.python.org/downloads/) version 3.13 or higher
 - [Azure Functions Core Tools](https://learn.microsoft.com/azure/azure-functions/functions-run-local?pivots=programming-language-python#install-the-azure-functions-core-tools) >= `4.8.0`
-- `azure-functions` version 2.2.0b2 or greater
-- .NET SDK (for building the MCP extension)
+- `azure-functions` Python package version **2.2.0b2** or greater (pre-release)
+
+> **Important:** This project uses the **preview extension bundle** (`Microsoft.Azure.Functions.ExtensionBundle.Preview`) configured in `host.json`. The `azure-functions` Python package must also be version `2.2.0b2+` to expose the `mcp_prompt_trigger` decorator.
 
 ## Run locally
 
-### 1. Build the MCP extension
+### 1. Start Azurite
 
-From this directory (`src/FunctionsMcpPrompts`), build the MCP extension:
+An Azure Storage Emulator is needed for the function app to run locally:
 
 ```shell
-dotnet restore extensions.csproj
-dotnet build extensions.csproj
+docker run -p 10000:10000 -p 10001:10001 -p 10002:10002 \
+    mcr.microsoft.com/azure-storage/azurite
 ```
 
+> **Note**: If using the Azurite VS Code extension, run `Azurite: Start` from the command palette.
+
 ### 2. Install Dependencies
 
 Create and activate a virtual environment, then install dependencies:

src/FunctionsMcpPrompts/extensions.csproj

@@ -15,5 +15,9 @@
       },
       "enableLiveMetricsFilters": true
     }
+  },
+  "extensionBundle": {
+    "id": "Microsoft.Azure.Functions.ExtensionBundle.Preview",
+    "version": "[4.41, 5.0.0)"
   }
 }

src/FunctionsMcpPrompts/host.json

@@ -30,27 +30,27 @@ This MCP App provides:
 
 ## Local Development
 
-### 1. Build the UI
+### 1. Start Azurite
 
-The UI must be bundled before running the function app. From the `src/McpWeatherApp/app` directory:
+An Azure Storage Emulator is needed for the function app to run locally:
 
 ```bash
-npm install
-npm run build
+docker run -p 10000:10000 -p 10001:10001 -p 10002:10002 \
+    mcr.microsoft.com/azure-storage/azurite
 ```
 
-This creates a bundled `app/dist/index.html` file that the function serves.
+> **Note**: If using the Azurite VS Code extension, run `Azurite: Start` from the command palette.
 
-### 2. Start Azurite
+### 2. Build the UI
 
-An Azure Storage Emulator is needed for the function app to run locally:
+The UI must be bundled before running the function app. From the `src/McpWeatherApp/app` directory:
 
 ```bash
-docker run -p 10000:10000 -p 10001:10001 -p 10002:10002 \
-    mcr.microsoft.com/azure-storage/azurite
+npm install
+npm run build
 ```
 
-> **Note**: If using the Azurite VS Code extension, run `Azurite: Start` from the command palette.
+This creates a bundled `app/dist/index.html` file that the function serves.
 
 ### 3. Install Python Dependencies
 

src/McpWeatherApp/README.md

@@ -74,6 +74,37 @@
         }
         .label { color: var(--muted); font-size: 0.85rem; margin: 0 0 6px; }
         .value { margin: 0; font-size: 1.1rem; font-weight: 600; }
+        .city-selector {
+            margin-bottom: 16px;
+        }
+        .city-select {
+            width: 100%;
+            background: rgba(255,255,255,0.08);
+            border: 1px solid rgba(255,255,255,0.12);
+            border-radius: 10px;
+            color: var(--text);
+            padding: 10px 14px;
+            font-size: 0.95rem;
+            font-family: inherit;
+            cursor: pointer;
+            appearance: none;
+            -webkit-appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23cbd5e1' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 14px center;
+            transition: border-color 0.2s, background 0.2s;
+        }
+        .city-select:hover, .city-select:focus {
+            background: rgba(255,255,255,0.12);
+            border-color: var(--accent);
+            outline: none;
+        }
+        .city-select option {
+            background: #1e293b;
+            color: var(--text);
+        }
+        .loading .header .icon { animation: pulse 1.2s infinite; }
+        @keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }
         .footer {
             margin-top: 12px;
             font-size: 0.82rem;
@@ -82,7 +113,8 @@
     </style>
 </head>
 <body>
-    <div class="widget">
+    <div class="widget" id="widget">
+        <div class="city-selector" id="city-selector"></div>
         <div class="header">
             <div class="icon" id="weather-icon">🌤️</div>
             <div>

src/McpWeatherApp/app/index.html

@@ -3,6 +3,20 @@ import { App } from "@modelcontextprotocol/ext-apps";
 // DOM element helper
 const el = (id: string) => document.getElementById(id)!;
 
+// Top 10 US cities
+const US_CITIES = [
+  "New York",
+  "Los Angeles",
+  "Chicago",
+  "Houston",
+  "Phoenix",
+  "San Francisco",
+  "Miami",
+  "Seattle",
+  "Denver",
+  "Las Vegas",
+];
+
 // Weather data interface
 interface WeatherData {
   Location?: string;
@@ -119,6 +133,83 @@ function parseToolResultContent(content: Array<{ type: string; text?: string }>
 // Create app instance
 const app = new App({ name: "Weather Widget", version: "1.0.0" });
 
+// Track active city
+let activeCity: string | null = null;
+
+// Build city selector dropdown
+function buildCitySelector(): void {
+  const container = el("city-selector");
+  const select = document.createElement("select");
+  select.className = "city-select";
+  select.id = "city-select";
+
+  const placeholder = document.createElement("option");
+  placeholder.value = "";
+  placeholder.textContent = "Select a city…";
+  placeholder.disabled = true;
+  placeholder.selected = true;
+  select.appendChild(placeholder);
+
+  US_CITIES.forEach((city) => {
+    const option = document.createElement("option");
+    option.value = city;
+    option.textContent = city;
+    select.appendChild(option);
+  });
+
+  select.addEventListener("change", () => {
+    if (select.value) selectCity(select.value);
+  });
+
+  container.appendChild(select);
+}
+
+// Select a city and fetch weather
+async function selectCity(city: string): Promise<void> {
+  activeCity = city;
+
+  // Update dropdown selection
+  const select = document.getElementById("city-select") as HTMLSelectElement;
+  if (select) select.value = city;
+
+  // Show loading state
+  el("widget").classList.add("loading");
+  el("location").textContent = city;
+  el("condition").textContent = "Loading…";
+  el("weather-icon").textContent = "🌤️";
+  el("temperature").textContent = "—";
+  el("humidity").textContent = "—";
+  el("wind").textContent = "—";
+  el("footer").textContent = "Fetching weather…";
+
+  try {
+    const result = await app.callServerTool({
+      name: "get_weather",
+      arguments: { location: city },
+    });
+
+    if (result.isError) {
+      el("condition").textContent = "Error fetching weather";
+      el("weather-icon").textContent = "⚠️";
+    } else {
+      const data = parseToolResultContent(
+        result.content as Array<{ type: string; text?: string }>
+      );
+      if (data) {
+        render(data);
+      } else {
+        el("condition").textContent = "Error parsing weather data";
+      }
+    }
+  } catch (err) {
+    console.error("callServerTool failed:", err);
+    el("condition").textContent = "Failed to fetch weather";
+    el("weather-icon").textContent = "⚠️";
+  } finally {
+    el("widget").classList.remove("loading");
+  }
+}
+
 // Register handlers BEFORE connect (events may occur immediately after connect)
 
 // Handle tool input (arguments passed to the tool)
@@ -148,9 +239,10 @@ app.onhostcontextchanged = (ctx) => {
 
 // Connect to host (auto-detects OpenAI vs MCP environment)
 (async () => {
+  buildCitySelector();
   await app.connect();
 
   // Apply initial theme from host context
   applyTheme(app.getHostContext()?.theme);
-  el("footer").textContent = "Connected";
+  el("footer").textContent = "Select a city above to check the weather";
 })();