Deploying an MCP server in Azure Web Apps and connecting it to VS Code

This content originally appeared on Level Up Coding – Medium and was authored by Dwaipayan Bandyopadhyay

Model Context Protocol, a.k.a MCP, is now the “buzzword” in the tech world. Everyone’s talking about them, and there are lots of tutorials and documentation about them as well. But most of them include the creation of the server and running it locally as SSE (although deprecated now) or HTTP. In this article, I will give a brief and easy walkthrough of how we can deploy an MCP server as a Web App in Azure.

Prerequisite

The user have Python installed in their device, and they have previously created some simple MCP servers, including some tools. Also, if they have uv package manager installed, that would be a plus.

We will have the following roadmap for this tutorial /┆\ –

1. We will start with the creation of the environment and installation of the packages.
2. Then we will create a very simple MCP server with multiple simple tools.
3. Then run it locally to check if every tool is working fine or not.
4. Finally, we will deploy that as a web app in the Azure Portal.

Step — 1 : Creation of a virtual environment and installation of packages

To start it, let’s create a Virtual environment first and install the necessary packages. Execute the following command in any preferred terminal.

For now, I am going with the environment name as mcpenv. You can provide anything; there’s no restriction.

If the user has uv installed, then first run the init command, which will create the necessary files such as pyproject.toml, on which uv heavily relies, and then run the venv command –

After the creation of the environment, activate it with the following command.

Environment created using the Python command.

The above command works in VS Code if the Terminal is selected as PowerShell.

Environment created using uv command

The benefit of using uv over traditional Python or pip command is that it is lightning fast as compared to them, also the official documentation of MCP suggests using the uv package manager in place of pip.

Installing necessary libraries –

After the activation of the environment, it’s time to install all the necessary packages. If you have installed it via pip, then just run the following command –

If using UV, then use the following command –

This will install the only package we need for this tutorial.

Step — 2 : Creation of simple MCP tools

Now, we will create some simple MCP tools to do some basic mathematical calculations. You can create any complex tools based on your requirements, but the approach to deploy them will remain the same.

MCP Code –

Explanation

In this simple server, we are defining four mathematical tools which can add, subtract, multiply and divide. To keep this as simple as possible, you can add your own logic and tools as you want. But the main difference happens at the very end, when we are running our server. Traditionally, to run an MCP server, we usually use the .run() method, in which we pass the port and transport type (some optional parameters are custom paths, which we can provide to customise our URL, but that is not mandatory to run the server). Here, rather than using the run() method, we are using the .http_app() method in which we are passing the path and the transport type, using this http_app method, converts our MCP server into an ASGI (Asynchronous Server Gateway Interface) app, which is similar to a FastAPI application, we can use the uvicorn command to run this server as well, if we pass any specific path as parameter, then after the normal URL we need to add that path as well. Otherwise, by default, the “/mcp” suffix has to be added.

Example –

• If your app’s URL is http://127.0.0.1:8000 and you haven’t provided any custom path, then while adding this into the mcp.json file, you need to add http://127.0.0.1:8000/mcp.
• But if a custom path has been provided, then the URL will look something like this — http://127.0.0.1:8000/<custom_path>. If the custom_path doesn’t end with “/mcp”, then that has to be added as well at the end, so it is recommended to add the /mcp suffix, even if we are using any custom path, so the URL will look like — http://127.0.0.1:8000/<custom_path>/mcp

Step -3 : Running it locally

After successfully creating the tools, we will first run the server on our local host and integrate it with GitHub Copilot to verify that everything is working as expected.

From the View → Command Palette, choose MCP: Add Server, then first choose the type of server we want to add from the dropdown.

As we have used the transport as HTTP, we will choose the second option. Then it will ask for the URL of the server, and provide the proper URL there –

For this case, the URL should be http://127.0.0.1:8000/asgi/mcp. After adding it, it will ask for the name of the server; provide any suitable name there. After all the configuration is done, it will store the configuration in the mcp.json file, and it will look something like this –

I named it “demo-server”, which is why it is showing; whatever name you provide, that will be displayed there. After this, all the tools available on the server will be accessible by the Copilot.

Step — 4 : Deploying it in Azure as a WebApp

To deploy it in Azure as a web app, we need to first create a Resource Group (if a resource group doesn’t already exist), and then after which we need to create a simple web app as usual.

Then, you need to provide information's like the WebApp name, select the resource group and app service plan and select the type of application, whether it will be from Code or Container, so for us, it will be Code, and the runtime stack would be Python 3.11 or Python 3.12, based on what version was used to create the environment in local and run it. After providing all the necessary information to create the Webapp, we will click on “create”, and the Webapp will be created.

After the web app has been created, we need to go to

Deployment → Deployment Centre

Then, from there, from the dropdown select the code source as Local git.

After selecting that, if you face any error like SCM basic authentication is disabled for your app, then simply go to Configuration under Settings and turn both of them ON.

Then click on the Save at the top. Then go to

Settings → Environment Variables

and add this Environment variable with the value “true”

Then click on Apply to make the changes. After this, come back to the Deployment Center, and now click on Local Git now it will work.

After selecting local git, click on Save, then come back to your directory where you have your code and everything. If you have created the environment and initialised it with UV, you will see a .git file already present there, but if not, then just initialise a blank git repository there –

After a blank repository is created, use the following command with the git clone URI to add a remote branch to the Webapp from your local

This will add a new remote branch in your git repo, and you can directly push your code to this branch.

Then the process is pretty straightforward, like we need to use the generic git commands we use to push a repository.

After it has been deployed successfully in Azure, we need to copy the link of the web app and follow Step 3 to add the server configuration in our mcp.json file, but here the URL would be the WebApps URL, and in the suffix, we have to give the custom path.

Example — Let’s assume the URL of the Web App is mcpserver.azurewebsites.net, so the URL we would put in the JSON file would be https://mcpserver.azurewebsites.net/asgi/mcp , and the type will be http only.

Now, anyone can use the tools available on this server without running it locally or even having access to the code; they just need a client like GitHub Copilot to integrate the server.

That’s it for today, we will meet next time with some more MCP-related tutorials. Keep Learning and keep building !!!

Deploying an MCP server in Azure Web Apps and connecting it to VS Code was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

This content originally appeared on Level Up Coding – Medium and was authored by Dwaipayan Bandyopadhyay