Building MCP Apps with Azure Functions MCP Extension

Microsoft

Feb 23, 2026

Today, we are thrilled to announce the release of MCP App support in the Azure Functions MCP (Model Context Protocol) extension!

You can now build MCP Apps using the Functions MCP Extension in Python, TypeScript, and .NET.

What are MCP Apps

Until now, MCP has primarily been a way for AI agents to “talk” to data and tools. A tool would take an input, perform a task, and return a text response. While powerful, text has limits. For example, it’s easier to see a chart than to read a long list of data points. It’s also more convenient and accurate to provide complex inputs via a form than a series of text responses.

MCP Apps addresses the limits by allowing MCP servers to return interactive HTML interfaces that render directly in the conversation. The following scenarios shed light into how the UI capabilities of MCP Apps improve the user experience of MCP tools in ways that texts can’t:

Data exploration: A sales analytics tool returns an interactive dashboard. Users filter by region, drill down into specific accounts, and export reports without leaving the conversation.
Configuration wizards: A deployment tool presents a form with dependent fields. Selecting “production” reveals additional security options; selecting “staging” shows different defaults.
Real-time monitoring: A server health tool shows live metrics that update as systems change. No need to re-run the tool to see current status.

Building MCP Apps with Azure Functions MCP Extension

Azure Functions is the ideal platform for hosting remote MCP servers because of its built-in authentication, event-driven scaling from 0 to N, and serverless billing. This ensures your agentic tools are secure, cost-effective, and ready to handle any load.

How It Works: Connecting Tools to Resources

Building an MCP App involves two main components:

Tools: Tools are executable functions that allow an LLM to interact with external systems (e.g., querying a database or sending an email).
Resources: Resources are read-only data entities (e.g., log files, API docs, or database schemas) that provide the LLM with information without triggering side effects.

You connect the tools to resources via the tools’ metadata.

1. The Tool with UI Metadata

The following code snippet defines an MCP tool called GetWeather using the McpToolTrigger and associated metadata using McpMetadata. The McpMetadata declares that the tool has an associated UI, telling AI clients that when this tool is invoked, there’s a specific visual component available to display the results.

Example (C#):

private const string ToolMetadata = """
    {
        "ui": {
            "resourceUri": "ui://weather/index.html"
        }
    }
    """;

[Function(nameof(GetWeather))]
public async Task<object> GetWeather(
    [McpToolTrigger(nameof(GetWeather), "Returns current weather for a location via Open-Meteo.")]
    [McpMetadata(ToolMetadata)]
    ToolInvocationContext context,
    [McpToolProperty("location", "City name to check weather for (e.g., Seattle, New York, Miami)")]
    string location)
{
    var result = await _weatherService.GetCurrentWeatherAsync(location);
    return result;
}

2. The Resource Serving the UI

The following snippet defines an MCP resource called GetWeatherWidget, which serves the bundled HTML at the matching URI. The MimeType is set to text/html;profile=mcp-app. Note that the resource URI (ui://weather/index.html) is the same as the one specified in ToolMetadata from above.

Example (C#):

// Optional UI metadata
private const string ResourceMetadata = """
    {
        "ui": {
            "prefersBorder": true
        }
    }
    """;

[Function(nameof(GetWeatherWidget))]
public string GetWeatherWidget(
    [McpResourceTrigger(
        "ui://weather/index.html",
        "Weather Widget",
        MimeType = "text/html;profile=mcp-app",
        Description = "Interactive weather display for MCP Apps")]
    [McpMetadata(ResourceMetadata)]
    ResourceInvocationContext context)
{
    var file = Path.Combine(AppContext.BaseDirectory, "app", "dist", "index.html");
    return File.ReadAllText(file);
}

3. Putting It All Together

User asks: “What’s the weather in Seattle?”
Agent calls the GetWeathertool.
The tool returns weather data (as a normal tool result). The tool also includes ui.resourceUri metadata (ui://weather/index.html) telling the client an interactive UI is available.
The client fetches the UI resource from ui://weather/index.html and loads it in a sandboxed iframe.
The client passes the tool result to the UI app.
User sees an interactive weather widget instead of plain text.