Skip to content

Commit 252e35a

Browse files
committed
minor edits
1 parent 8903d59 commit 252e35a

3 files changed

Lines changed: 40 additions & 21 deletions

File tree

articles/azure-functions/TOC.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
- name: Custom remote MCP server
3737
displayName: AI, agent, agentic, tools, trigger
3838
href: scenario-custom-remote-mcp-server.md
39-
- name: MCP Apps server
39+
- name: MCP Apps
4040
displayName: AI, agent, agentic, tools, MCP Apps, UI
4141
href: scenario-mcp-apps.md
4242
- name: Host MCP server using SDKs

articles/azure-functions/functions-bindings-mcp-resource-trigger.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,7 @@ For the complete code example, see [function_app.py](https://github.com/Azure-Sa
309309
::: zone-end
310310
311311
[!INCLUDE [functions-mcp-extension-powershell-note](../../includes/functions-mcp-extension-powershell-note.md)]
312+
312313
::: zone pivot="programming-language-csharp"
313314
314315
## Attributes

articles/azure-functions/scenario-mcp-apps.md

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
11
---
22
title: Build an MCP Apps server using Azure Functions
3-
description: "Learn how to create and deploy an MCP Apps server that returns interactive UI using Azure Functions. This quickstart uses the Azure Developer CLI to deploy an MCP Apps project that enables AI clients to access tools with rich interactive interfaces hosted on Azure's Flex Consumption plan."
3+
description: "Learn how to create and deploy an MCP App that returns interactive UI using Azure Functions. This quickstart uses the Azure Developer CLI to deploy an MCP App project that enables AI clients to access tools with rich interactive interfaces hosted on Azure's Flex Consumption plan."
44
ms.date: 02/20/2026
55
ms.update-cycle: 180-days
66
ms.topic: quickstart
77
ai-usage: ai-assisted
88
ms.collection:
99
- ce-skilling-ai-copilot
1010
zone_pivot_groups: programming-languages-set-functions
11-
#Customer intent: As a developer, I want to create an MCP Apps server that returns interactive UI from my MCP tools, so AI clients can render rich visual experiences using Azure Functions.
11+
#Customer intent: As a developer, I want to create an MCP Apps that returns interactive UI from my MCP tools, so AI clients can render rich visual experiences using Azure Functions.
1212
---
1313

14-
# Quickstart: Build an MCP Apps server using Azure Functions
14+
# Quickstart: Build an MCP Apps using Azure Functions
1515

16-
In this quickstart, you create an MCP Apps server from a template project by using the Azure Developer CLI (`azd`). [MCP Apps](https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/) is an extension of the Model Context Protocol (MCP) specification that lets tools return interactive elements instead of plain text.
16+
In this quickstart, you create an [MCP App](https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/) from a template project by using the Azure Developer CLI (`azd`). [MCP Apps](https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/) is an extension of the Model Context Protocol (MCP) specification that lets tools return rich, interactive user interfaces (HTML/JavaScript in sandboxed iframes) instead of plain text.
1717

18-
The MCP server you create uses the Azure Functions MCP server extension to provide tools with rich UI for AI models, agents, and assistants. After running the project locally and verifying your code by using GitHub Copilot, you deploy it to a new serverless function app in Azure Functions that follows current best practices for secure and scalable deployments.
18+
This quickstart will use the Azure Functions MCP extension to build an MCP App using the MCP tool and resource trigger. After running the project locally and verifying your code by using GitHub Copilot, you deploy it to a new serverless function app in Azure Functions that follows current best practices for secure and scalable deployments.
1919

2020
>[!TIP]
21-
>If you want to create a custom MCP server that uses text-based tools instead of interactive UI, see [Quickstart: Build a custom remote MCP server using Azure Functions](scenario-custom-remote-mcp-server.md).
21+
>MCP tools built with the Azure Functions MCP extension don't have to return results in interactive UIs. If your server only needs text-based tools, see [Quickstart: Build a custom remote MCP server using Azure Functions](scenario-custom-remote-mcp-server.md).
2222
2323
Because the new app runs on the Flex Consumption plan, which follows a _pay-for-what-you-use_ billing model, completing this quickstart incurs a small cost of a few USD cents or less in your Azure account.
2424

25-
::: zone pivot="programming-language-javascript,programming-language-java,programming-language-powershell"
25+
::: zone pivot="programming-language-javascript,programming-language-java"
2626
> [!IMPORTANT]
27-
> While [creating custom MCP servers](./functions-bindings-mcp.md) is supported for all Functions languages, this MCP Apps quickstart currently only has examples for C#, Python, and TypeScript. To complete this quickstart, select one of these supported languages at the top of the article.
27+
> While [creating custom MCP servers](./functions-bindings-mcp.md) is supported for Java and JavaScript, this MCP Apps quickstart currently only has examples for C#, Python, and TypeScript. To complete this quickstart, select one of these supported languages at the top of the article.
2828
::: zone-end
29+
30+
[!INCLUDE [functions-mcp-extension-powershell-note](../../includes/functions-mcp-extension-powershell-note.md)]
31+
2932
::: zone pivot="programming-language-typescript"
3033
This article supports version 4 of the Node.js programming model for Azure Functions.
3134
::: zone-end
@@ -49,10 +52,9 @@ This article supports version 2 of the Python programming model for Azure Functi
4952
::: zone pivot="programming-language-csharp,programming-language-python,programming-language-typescript"
5053
+ [Node.js](https://nodejs.org/) (required to build the MCP Apps UI)
5154

52-
+ [Visual Studio Code](https://code.visualstudio.com/) with these extensions:
55+
+ [Visual Studio Code Insiders](https://code.visualstudio.com/insiders) with these extensions:
5356

5457
+ [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions). This extension requires [Azure Functions Core Tools](functions-run-local.md) and attempts to install it when not available.
55-
5658
+ [Azure Developer CLI extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.azure-dev).
5759

5860
+ [Azurite storage emulator](../storage/common/storage-install-azurite.md#install-azurite)
@@ -61,6 +63,9 @@ This article supports version 2 of the Python programming model for Azure Functi
6163

6264
+ An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/pricing/purchase-options/azure-account?cid=msft_learn).
6365

66+
> [!IMPORTANT]
67+
> MCP Apps require [Visual Studio Code Insiders](https://code.visualstudio.com/insiders). The stable release of VS Code doesn't yet support rendering MCP App UI resources.
68+
6469
## Initialize the project
6570

6671
Use the Azure Developer CLI to create an Azure Functions code project from a template.
@@ -110,7 +115,7 @@ The MCP Apps weather tool includes a frontend application that you must build be
110115
cd src/McpWeatherApp/app
111116
npm install
112117
npm run build
113-
cd ../../..
118+
cd ../
114119
```
115120

116121
::: zone-end
@@ -122,9 +127,18 @@ The MCP Apps weather tool includes a frontend application that you must build be
122127
cd src/app
123128
npm install
124129
npm run build
125-
cd ../..
130+
cd ../
131+
```
132+
133+
1. In the `/src` directory, install Python dependencies:
134+
135+
```console
136+
pip install -r requirements.txt
126137
```
127138

139+
> [!NOTE]
140+
> It is a best practice to create a virtual environment before doing the pip install to avoid dependency issues or collisions, or if you are running in CodeSpaces. See [Python Environments in VS Code](https://code.visualstudio.com/docs/python/environments) for more information.
141+
128142
::: zone-end
129143
::: zone pivot="programming-language-typescript"
130144

@@ -177,9 +191,9 @@ You can review the code that defines the MCP Apps tools. An MCP Apps tool requir
177191
::: zone pivot="programming-language-csharp"
178192
The function code for the MCP Apps weather tool is defined in the `src/McpWeatherApp` folder. The `[McpMetadata]` attribute adds UI metadata to the tool, and the `[McpResourceTrigger]` attribute serves the HTML widget:
179193

180-
:::code language="csharp" source="~/functions-scenarios-custom-mcp-dotnet/src/McpWeatherApp/WeatherFunction.cs" range="12-46" :::
194+
:::code language="csharp" source="~/functions-scenarios-custom-mcp-dotnet/src/McpWeatherApp/WeatherFunction.cs" range="48-76" :::
181195

182-
:::code language="csharp" source="~/functions-scenarios-custom-mcp-dotnet/src/McpWeatherApp/WeatherFunction.cs" range="48-55" :::
196+
:::code language="csharp" source="~/functions-scenarios-custom-mcp-dotnet/src/McpWeatherApp/WeatherFunction.cs" range="34-46" :::
183197

184198
The `ToolMetadata` constant declares a `ui.resourceUri` that tells the MCP host to fetch the interactive UI from `ui://weather/index.html` after the tool runs. The `GetWeatherWidget` function serves the bundled HTML file at that URI using `[McpResourceTrigger]`.
185199

@@ -188,11 +202,9 @@ You can view the complete project template in the [Azure Functions .NET MCP Serv
188202
::: zone pivot="programming-language-python"
189203
The function code for the MCP Apps weather tool is defined in the `src/function_app.py` file. The `metadata` parameter on `@app.mcp_tool()` adds UI metadata to the tool, and `@app.mcp_resource_trigger()` serves the HTML widget:
190204

191-
:::code language="python" source="~/functions-scenarios-custom-mcp-python/src/function_app.py" range="14-24" :::
192-
193-
:::code language="python" source="~/functions-scenarios-custom-mcp-python/src/function_app.py" range="85-95" :::
205+
:::code language="python" source="~/functions-scenarios-custom-mcp-python/src/function_app.py" range="109-130" :::
194206

195-
:::code language="python" source="~/functions-scenarios-custom-mcp-python/src/function_app.py" range="118-122" :::
207+
:::code language="python" source="~/functions-scenarios-custom-mcp-python/src/function_app.py" range="64-105" :::
196208

197209
The `TOOL_METADATA` constant declares a `ui.resourceUri` that tells the MCP host to fetch the interactive UI from `ui://weather/index.html` after the tool runs. The `get_weather_widget` function serves the bundled HTML file at that URI using `@app.mcp_resource_trigger()`.
198210

@@ -201,9 +213,15 @@ You can view the complete project template in the [Azure Functions Python MCP Se
201213
::: zone pivot="programming-language-typescript"
202214
The function code for the MCP Apps weather tool is defined in the `src/functions/weatherMcpApp.ts` file. The `metadata` property on `app.mcpTool()` adds UI metadata to the tool, and `app.mcpResource()` serves the HTML widget:
203215

204-
:::code language="typescript" source="~/functions-scenarios-custom-mcp-typescript/src/functions/weatherMcpApp.ts" range="6-25" :::
216+
:::code language="typescript" source="~/functions-scenarios-custom-mcp-typescript/src/functions/weatherMcpApp.ts" range="13-17" :::
217+
218+
:::code language="typescript" source="~/functions-scenarios-custom-mcp-typescript/src/functions/weatherMcpApp.ts" range="54-87" :::
219+
220+
:::code language="typescript" source="~/functions-scenarios-custom-mcp-typescript/src/functions/weatherMcpApp.ts" range="102-110" :::
221+
222+
:::code language="typescript" source="~/functions-scenarios-custom-mcp-typescript/src/functions/weatherMcpApp.ts" range="29-52" :::
205223

206-
:::code language="typescript" source="~/functions-scenarios-custom-mcp-typescript/src/functions/weatherMcpApp.ts" range="87-106" :::
224+
:::code language="typescript" source="~/functions-scenarios-custom-mcp-typescript/src/functions/weatherMcpApp.ts" range="89-97" :::
207225

208226
The `TOOL_METADATA` constant declares a `ui.resourceUri` that tells the MCP host to fetch the interactive UI from `ui://weather/index.html` after the tool runs. The `getWeatherWidget` handler serves the bundled HTML file at that URI when registered with `app.mcpResource()`.
209227

0 commit comments

Comments
 (0)