Having an interactive UI removes many restrictions that plain texts have, such as if your scenario has:<\/p>\n
- \n
- Interactive Data<\/strong>: Replacing lists with clickable maps or charts for deep exploration.<\/li>\n
- Complex Setup<\/strong>: Use one-page forms instead of long, back-and-forth questioning.<\/li>\n
- Rich Media<\/strong>: Embed native viewers to pan, zoom, or rotate 3D models and documents.<\/li>\n
- Live Updates<\/strong>: Maintain real-time dashboards that refresh without new prompts.<\/li>\n
- Workflow Management<\/strong>: Handle multi-step tasks like approvals with navigation buttons and persistent state.<\/li>\n<\/ul>\n
Hosting MCP Apps on Azure Functions<\/h2>\n
Azure Functions provides an easy abstraction to help you build MCP servers without having to learn the nitty-gritty of the MCP protocol. When hosting your MCP App on Functions, you get:<\/p>\n
- \n
- MCP tools<\/strong> (server logic): Handle client requests, call backend services, return structured data – Azure Functions manages the MCP protocol details for you<\/li>\n
- MCP resources<\/strong> (UI payloads such as app widgets): Serve interactive HTML, JSON documents, or formatted content – just focus on your UI logic<\/li>\n
- Secure HTTPS access<\/strong>: Built-in authentication using Azure Functions keys, plus built-in MCP authentication with OAuth support<\/a> for enterprise-grade security<\/li>\n
- Easy deployment<\/strong> with Bicep and azd: Infrastructure as Code for reliable deployments<\/li>\n
- Local development<\/strong>: Test and debug locally before deploying<\/li>\n
- Auto-scaling<\/strong>: Azure Functions handles scaling, retries, and monitoring automatically<\/li>\n<\/ul>\n
The weather app in this repo is an example of this feature, not the only use case.<\/p>\n
Architecture overview<\/h2>\n
![\"Architecture](\"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-content\/uploads\/sites\/58\/2026\/04\/04-01-mcp-apps-on-functions-ts-architecture.png\")
<\/p>\nExample: The classic weather app<\/h2>\n
The sample implementation includes:<\/p>\n
- \n
- A GetWeather MCP tool<\/strong> that fetches weather by location (calls Open-Meteo geocoding and forecast APIs)<\/li>\n
- A Weather Widget MCP resource<\/strong> that serves interactive HTML\/JS code (runs in the client; fetches data via GetWeather tool)<\/li>\n
- A TypeScript service layer that abstracts API calls and data transformation (runs on the server)<\/li>\n
- Local and remote testing flow for MCP clients (via MCP Inspector, Visual Studio Code, or custom clients)<\/li>\n<\/ul>\n
How UI rendering works in MCP Apps<\/h3>\n
In the Weather App example<\/strong>:<\/p>\n
- \n
- Azure Functions serves
getWeatherWidget<\/code> as a resource \u2192 returnsweather-app.ts<\/code> compiled to HTML\/JS<\/li>\n- Client renders the Weather Widget UI<\/li>\n
- User interacts with the widget or requests are made internally<\/li>\n
- The widget calls the
getWeather<\/code> tool \u2192 server processes and returns weather data<\/li>\n- The widget renders the weather data on the client side<\/li>\n<\/ul>\n
This architecture keeps the UI responsive locally<\/strong> while using server-side logic and data<\/strong> on demand.<\/p>\n
Quickstart<\/h2>\n
Clone the repository:<\/p>\n
git clone https:\/\/github.com\/Azure-Samples\/remote-mcp-functions-typescript.git\ncd remote-mcp-functions-typescript<\/code><\/pre>\nRun locally:<\/p>\n
npm install\nnpm run build\nfunc start<\/code><\/pre>\nLocal endpoint:<\/p>\n
http:\/\/0.0.0.0:7071\/runtime\/webhooks\/mcp<\/code><\/pre>\nDeploy to Azure:<\/p>\n
azd provision\nazd deploy<\/code><\/pre>\nRemote endpoint:<\/p>\n
https:\/\/<function-app-name>.azurewebsites.net\/runtime\/webhooks\/mcp<\/code><\/pre>\n![\"MCP](\"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-content\/uploads\/sites\/58\/2026\/04\/04-01-mcp-apps-on-functions-ts-architecture.gif\")
<\/p>\nTypeScript MCP tools snippet (Get Weather service)<\/h2>\n
In Azure Functions, you define MCP tools using
app.mcpTool()<\/code>. ThetoolName<\/code> anddescription<\/code> tell clients what this tool does,toolProperties<\/code> defines the input arguments (likelocation<\/code> as a string), andhandler<\/code> points to your function that processes the request.<\/p>\napp.mcpTool(\"getWeather\", {\n toolName: \"GetWeather\",\n description: \"Returns current weather for a location via Open-Meteo.\",\n toolProperties: {\n location: arg.string().describe(\"City name to check weather for\")\n },\n handler: getWeather,\n});<\/code><\/pre>\nTypeScript MCP Resource trigger snippet (Weather App Hook)<\/h2>\n
MCP resources are defined using
app.mcpResource()<\/code>. Theuri<\/code> is how clients reference this resource,resourceName<\/code> anddescription<\/code> provide metadata,mimeType<\/code> tells clients what type of content to expect, andhandler<\/code> is your function that returns the actual content (like HTML for a widget).<\/p>\napp.mcpResource(\"getWeatherWidget\", {\n uri: \"ui:\/\/weather\/index.html\",\n resourceName: \"Weather Widget\",\n description: \"Interactive weather display for MCP Apps\",\n mimeType: \"text\/html;profile=mcp-app\",\n handler: getWeatherWidget,\n});<\/code><\/pre>\nSample repos and references<\/h2>\n
- \n
- Complete sample repository with TypeScript implementation: Azure-Samples\/remote-mcp-functions-typescript<\/a><\/li>\n
- Official MCP extension documentation: Azure Functions MCP bindings<\/a><\/li>\n
- Java sample: Azure-Samples\/remote-mcp-functions-java<\/a><\/li>\n
- .NET sample: Azure-Samples\/remote-mcp-functions-dotnet<\/a><\/li>\n
- Python sample: Azure-Samples\/remote-mcp-functions-python<\/a><\/li>\n
- MCP Inspector: modelcontextprotocol\/inspector<\/a><\/li>\n<\/ul>\n
Final takeaway<\/h2>\n
MCP Apps are just MCP servers but they represent a paradigm shift by transforming the AI from a text-based chatbot into a functional interface. Instead of forcing users to navigate complex tasks through back-and-forth conversations, these apps embed interactive UIs and tools directly into the chat, significantly improving the user experience and the usefulness of MCP servers.<\/p>\n
Azure Functions<\/strong> allows developers to quickly build and host an MCP app by providing an easy abstraction and deployment experience<\/strong>. The platform also provides built-in features to secure and scale<\/strong> your MCP apps, plus a serverless pricing model so you can just focus on the business logic.<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to build and deploy MCP (Model Context Protocol) apps on Azure Functions using TypeScript. This guide covers MCP tools, resources, local development, and serverless deployment with a practical weather app example.<\/p>\n","protected":false},"author":209626,"featured_media":3682,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[734,765,864,159,940,962,961,959,162,960,733],"class_list":["post-3676","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-azure-sdk","tag-azure","tag-azure-functions","tag-azure-developer-cli","tag-javascript","tag-mcp","tag-mcp-resources","tag-mcp-tools","tag-model-context-protocol","tag-python","tag-serverless","tag-typescript"],"acf":[],"blog_post_summary":"
Learn how to build and deploy MCP (Model Context Protocol) apps on Azure Functions using TypeScript. This guide covers MCP tools, resources, local development, and serverless deployment with a practical weather app example.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/posts\/3676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/users\/209626"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/comments?post=3676"}],"version-history":[{"count":2,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/posts\/3676\/revisions"}],"predecessor-version":[{"id":3695,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/posts\/3676\/revisions\/3695"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/media\/3682"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/media?parent=3676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/categories?post=3676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/tags?post=3676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Official MCP extension documentation: Azure Functions MCP bindings<\/a><\/li>\n
- A Weather Widget MCP resource<\/strong> that serves interactive HTML\/JS code (runs in the client; fetches data via GetWeather tool)<\/li>\n
- MCP resources<\/strong> (UI payloads such as app widgets): Serve interactive HTML, JSON documents, or formatted content – just focus on your UI logic<\/li>\n
- Complex Setup<\/strong>: Use one-page forms instead of long, back-and-forth questioning.<\/li>\n