You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# Quickstart: Build a custom remote MCP server using Azure Functions
17
17
18
-
In this quickstart, you create a custom remote Model Context Protocol (MCP) server from a template project using the Azure Developer CLI (`azd`). The MCP server uses the Azure Functions MCP server extension to provide tools for AI models, agents, and assistants. After running the project locally and verifying your code 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
+
In this quickstart, you create a custom remote Model Context Protocol (MCP) server from a template project by using the Azure Developer CLI (`azd`). This MCP server uses the Azure Functions MCP server extension to provide tools for AI models, agents, and assistants. You can also use the MCP server extension to [create MCP Apps endpoints](./scenario-mcp-apps.md).
19
19
20
-
>[!TIP]
21
-
>Functions also enables you to deploy an existing MCP server code project to a Flex Consumption plan app without having to make changes to your code project. For more information, see [Quickstart: Host existing MCP servers on Azure Functions](scenario-host-mcp-server-sdks.md).
20
+
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.
22
21
23
22
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.
24
23
25
24
::: zone pivot="programming-language-javascript,programming-language-powershell"
26
25
> [!IMPORTANT]
27
-
> While [creating custom MCP servers](./functions-bindings-mcp.md) is supported for all Functions languages, this quickstart scenario 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.
26
+
> While [creating custom MCP servers](./functions-bindings-mcp.md) is supported for all Functions languages, this quickstart scenario currently only has examples for C#, Java, Python, and TypeScript. To complete this quickstart, select one of these supported languages at the top of the article.
28
27
::: zone-end
29
28
::: zone pivot="programming-language-typescript"
30
29
This article supports version 4 of the Node.js programming model for Azure Functions.
@@ -40,7 +39,7 @@ This article supports version 2 of the Python programming model for Azure Functi
+ If you use another [supported version of Java](supported-languages.md?pivots=programming-language-java#languages-by-runtime-version), you must update the project's pom.xml file.
42
+
+ If you use another [supported version of Java](supported-languages.md?pivots=programming-language-java#languages-by-runtime-version), update the project's `pom.xml` file.
44
43
+ Set the `JAVA_HOME` environment variable to the install location of the correct version of the Java Development Kit (JDK).
45
44
+[Apache Maven 3.8.x](https://maven.apache.org)
46
45
::: zone-end
@@ -123,7 +122,7 @@ Use the `azd init` command to create a local Azure Functions code project from a
123
122
## Run your MCP server locally
124
123
::: zone-end
125
124
::: zone pivot="programming-language-csharp"
126
-
In a terminal window, navigate to the `FunctionsMcpTool` project folder:
125
+
In a terminal window, go to the `FunctionsMcpTool` project folder:
The project template includes a `.vscode/mcp.json` file that already defines a `local-mcp-function` server pointing to your local MCP endpoint. Use this configuration to verify your code with GitHub Copilot in Visual Studio Code:
137
+
The project template includes a `.vscode/mcp.json` file that already defines a `local-mcp-function` server pointing to your local MCP endpoint. Use this configuration to verify your code by using GitHub Copilot in Visual Studio Code:
139
138
140
139
1. Open the `.vscode/mcp.json` file and select the **Start** button above the `local-mcp-function` configuration.
#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.
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.
12
12
---
13
13
14
14
# Quickstart: Build an MCP Apps using Azure Functions
15
15
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.
16
+
In this quickstart, you create a Model Context Protocol (MCP) server from a template project by using the Azure Developer CLI (`azd`). This MCP server uses the Azure Functions MCP extension to return MCP Apps resources.
17
17
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.
18
+
[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. You can also use the MCP server extension to [create text-based tool endpoints](./scenario-custom-remote-mcp-server.md).
19
19
20
-
>[!TIP]
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).
20
+
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.
22
21
23
22
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.
24
23
25
24
::: zone pivot="programming-language-javascript,programming-language-java"
26
25
> [!IMPORTANT]
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.
26
+
> While [creating MCP Apps](./functions-bindings-mcp.md) is supported for Java and JavaScript, this 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.
@@ -86,14 +85,14 @@ Use the Azure Developer CLI to create an Azure Functions code project from a tem
86
85
87
86
5. When prompted, enter `mcpweather-ts` as the environment name.
88
87
89
-
The command pulls the project files from the [template repository](https://github.com/Azure-Samples/remote-mcp-functions-typescript) and initializes the project in the current folder. In `azd`, the environment maintains a unique deployment context for your app, and you can define more than one. It's also used in names of the resources you create in Azure.
88
+
The command pulls the project files from the [template repository](https://github.com/Azure-Samples/remote-mcp-functions-typescript) and initializes the project in the current folder. In `azd`, the environment maintains a unique deployment context for your app, and you can define more than one. It's also used in the names of the resources you create in Azure.
90
89
::: zone-end
91
90
::: zone pivot="programming-language-python"
92
91
4. Search for and select **Remote MCP Functions with Python**.
93
92
94
93
1. When prompted, enter `mcpweather-python` as the environment name.
95
94
96
-
The command pulls the project files from the [template repository](https://github.com/Azure-Samples/remote-mcp-functions-python) and initializes the project in the current folder. In `azd`, the environment maintains a unique deployment context for your app, and you can define more than one. It's also used in names of the resources you create in Azure.
95
+
The command pulls the project files from the [template repository](https://github.com/Azure-Samples/remote-mcp-functions-python) and initializes the project in the current folder. In `azd`, the environment maintains a unique deployment context for your app, and you can define more than one. It's also used in the names of the resources you create in Azure.
97
96
::: zone-end
98
97
::: zone pivot="programming-language-csharp,programming-language-python,programming-language-typescript"
99
98
## Start the storage emulator
@@ -127,7 +126,7 @@ The MCP Apps weather tool includes a frontend application that you must build be
127
126
cd ..
128
127
```
129
128
130
-
1. In the `src` directory, create a virtual environment in which the app runs:
129
+
1. In the `src` directory, create a virtual environment for running the app:
131
130
132
131
### [Bash](#tab/bash)
133
132
@@ -161,15 +160,15 @@ The MCP Apps weather tool includes a frontend application that you must build be
161
160
::: zone-end
162
161
163
162
::: zone pivot="programming-language-csharp"
164
-
When Visual Studio Code asks you to pick a default project because there are two apps in the .NET template, pick **src/McpWeatherApp**.
163
+
When Visual Studio Code asks you to pick a default project because there are two apps in the .NET template, select **src/McpWeatherApp**.
165
164
::: zone-end
166
165
167
166
::: zone pivot="programming-language-csharp,programming-language-python,programming-language-typescript"
The project template includes a `.vscode/mcp.json` file that already defines a `local-mcp-function` server pointing to your local MCP endpoint. Use this configuration to verify your code with GitHub Copilot in Visual Studio Code:
171
+
The project template includes a `.vscode/mcp.json` file that defines a `local-mcp-function` server pointing to your local MCP endpoint. Use this configuration to verify your code by using GitHub Copilot in Visual Studio Code:
173
172
174
173
1. Open the `.vscode/mcp.json` file and select the **Start** button above the `local-mcp-function` configuration.
Copy file name to clipboardExpand all lines: includes/functions-mcp-cleanup.md
+1-4Lines changed: 1 addition & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,4 @@ When you're done working with your MCP server and related resources, use this co
10
10
11
11
```console
12
12
azd down
13
-
```
14
-
15
-
> [!NOTE]
16
-
> The `--no-prompt` option instructs `azd` to delete your resource group without confirmation from you. This command doesn't affect your local code project.
0 commit comments