Snabbstart: Skapa MCP-appar med Azure Functions

I den här snabbstarten skapar du en mcp-app (Model Context Protocol från ett mallprojekt som skapats med hjälp av Azure Functions MCP-tillägget. MCP-appar är MCP-servrar med verktyg som returnerar resultat i omfattande, interaktiva användargränssnitt i stället för text. Du distribuerar appen med hjälp av Azure Developer CLI (azd). Du kan också använda Azure Functions MCP-tillägget för att skapa MCP-servrar som har textbaserade verktyg.

När du har kört projektet lokalt och verifierat koden med hjälp av GitHub Copilot distribuerar du den till en ny serverlös funktionsapp i Azure Functions som följer gällande metodtips för säkra och skalbara distributioner.

Skärmbild av ett användargränssnitt för väderappen för Seattle som visar duggregn, temperatur, luftfuktighet, vind och rapporttidsstämpel.

Eftersom den nya appen körs på Flex Consumption-planen, som följer en pay-for-what-you-use faktureringsmodell, medför slutförandet av den här snabbstarten en liten kostnad på några USD cent eller mindre i ditt Azure konto.

Viktigt!

MCP-tillägget stöder för närvarande inte PowerShell-appar.

Den här artikeln stöder version 4 av Node.js programmeringsmodellen för Azure Functions.

Den här artikeln stöder version 2 av Python programmeringsmodellen för Azure Functions.

Förutsättningar

Initiera projektet

Använd Azure Developer CLI för att skapa ett Azure Functions kodprojekt från en mall.

  1. Kör det här azd init kommandot från en terminal för att skapa ett lokalt projekt från mallen:

    azd init --template remote-mcp-functions-dotnet -e mcpweather-dotnet
    

    Det här kommandot hämtar projektfilerna från lagringsplatsen template och initierar projektet i en ny mapp. Flaggan -e anger ett namn för den aktuella miljön. I azdbehåller miljön en unik distributionskontext för din app och du kan definiera mer än en. Den används också i namnen på de resurser som du skapar i Azure.

  2. Ändra till projektkatalogen:

    cd remote-mcp-functions-dotnet
    
  1. Kör det här azd init kommandot från en terminal för att skapa ett lokalt projekt från mallen:

    azd init --template remote-mcp-functions-typescript -e mcpweather-ts
    

    Det här kommandot hämtar projektfilerna från lagringsplatsen template och initierar projektet i en ny mapp. I azdbehåller miljön en unik distributionskontext för din app och du kan definiera mer än en. Den används också i namnen på de resurser som du skapar i Azure.

  2. Ändra till projektkatalogen:

    cd remote-mcp-functions-typescript
    
  1. Kör det här azd init kommandot från en terminal för att skapa ett lokalt projekt från mallen:

    azd init --template remote-mcp-functions-javascript -e mcpweather-js
    

    Det här kommandot hämtar projektfilerna från lagringsplatsen template och initierar projektet i en ny mapp. I azdbehåller miljön en unik distributionskontext för din app och du kan definiera mer än en. Den används också i namnen på de resurser som du skapar i Azure.

  2. Ändra till projektkatalogen:

    cd remote-mcp-functions-javascript
    
  1. Kör det här azd init kommandot från en terminal för att skapa ett lokalt projekt från mallen:

    azd init --template remote-mcp-functions-python -e mcpweather-python
    

    Det här kommandot hämtar projektfilerna från lagringsplatsen template och initierar projektet i en ny mapp. I azdbehåller miljön en unik distributionskontext för din app och du kan definiera mer än en. Den används också i namnen på de resurser som du skapar i Azure.

  2. Ändra till projektkatalogen:

    cd remote-mcp-functions-python
    
  1. Kör det här azd init kommandot från en terminal för att skapa ett lokalt projekt från mallen:

    azd init --template remote-mcp-functions-java -e mcpweather-java
    

    Det här kommandot hämtar projektfilerna från lagringsplatsen template och initierar projektet i en ny mapp. I azdbehåller miljön en unik distributionskontext för din app och du kan definiera mer än en. Den används också i namnen på de resurser som du skapar i Azure.

  2. Ändra till projektkatalogen:

    cd remote-mcp-functions-java
    
  1. Öppna projektet i Visual Studio Code:

    code .
    

Starta lagringsemulatorn

Använd Azurite-emulatorn för att simulera en Azure Storage kontoanslutning när du kör kodprojektet lokalt.

  1. Om du inte redan har gjort det installerar du Azurite.

  2. Tryck på F1. I kommandopaletten söker du efter och kör kommandot Azurite: Start för att starta den lokala lagringsemulatorn.

Skapa användargränssnittet för MCP-appar

MCP Apps väderverktyg innehåller ett klientdelsprogram som du måste skapa innan du kör projektet.

  1. I terminalen går du till mappen för användargränssnittsappen och skapar programmet:

    cd src/McpWeatherApp/app
    npm install
    npm run build
    cd ../
    
  1. I terminalen går du till mappen för användargränssnittsappen och skapar programmet:

    cd samples/McpWeatherApp/app
    npm install
    npm run build
    cd ..
    
  1. I terminalen går du till mappen för användargränssnittsappen och skapar programmet:

    cd src/McpWeatherApp/app
    npm install
    npm run build
    cd ../../..
    
  1. I terminalen går du till mappen för användargränssnittsappen och skapar programmet:

    cd src/app
    npm install
    npm run build
    cd ../..
    
  1. I terminalen går du till mappen för användargränssnittsappen och skapar programmet:

    cd mcp-weather-app/src/app
    npm install
    npm run build
    cd ../../..
    

Kör MCP-servern lokalt

När du uppmanas till det väljer du src/McpWeatherApp. Du ser den här uppmaningen eftersom det finns två projekt i lösningen och det andra projektet används inte av den här artikeln.

Kontrollera att du är i projektmappen samples/McpWeatherApp i ett terminalfönster.

Visual Studio Code integreras med Azure Functions Core-verktyg så att du kan köra projektet på din lokala utvecklingsdator. Starta Functions-appen lokalt genom att trycka på F5 eller välja ikonen Kör och felsöka i aktivitetsfältet till vänster.

Terminalpanelen visar utdata från Core Tools. Appen startar i terminalpanelen och du kan se namnen på de funktioner som körs lokalt.

Verifiera med hjälp av GitHub Copilot

Projektmallen innehåller en .vscode/mcp.json fil som definierar en local-mcp-function server som pekar på din lokala MCP-slutpunkt. Använd den här konfigurationen för att verifiera koden med hjälp av GitHub Copilot i Visual Studio Code:

  1. När funktionen körs lokalt öppnar .vscode/mcp.json du filen och väljer knappen Start ovanför konfigurationen local-mcp-function .

  2. I fönstret Copilot Chat säkerställer du att läget Agent är valt, väljer verktygsikonen Konfigurera verktyg och verifierar att MCP Server:local-mcp-function är aktiverat i chatten.

  3. Kör den här uppmaningen:

    What's the weather in Seattle?
    

    När du uppmanas att köra verktyget väljer du Tillåt på den här arbetsytan så att du inte behöver fortsätta bevilja behörighet. Kommandotolken kör GetWeather verktyget, som returnerar väderdata. Eftersom det här verktyget deklarerar metadata för användargränssnittet hämtar MCP-värden även användargränssnittsresursen och renderar en interaktiv väderwidget i en sandbox-iframe i chatten.

  4. När du är klar med testningen trycker du på Ctrl+C för att stoppa Functions-värden.

Granska koden (valfritt)

Du kan granska koden som definierar MCP Apps-verktygen. Ett MCP Apps-verktyg kräver två komponenter:

  • Ett verktyg med metadata för användargränssnittet som deklarerar en ui.resourceUri pekar på en användargränssnittsresurs.
  • En resurs som hanterar den paketerade HTML/JavaScript vid matchande ui:// URI.

Funktionskoden för MCP Apps väderverktyg definieras i src/functions/weatherMcpApp.js filen. I denna funktion lägger egenskapen på metadata till UI-metadata för app.mcpTool()-verktyget vid registrering.

  metadata: TOOL_METADATA,
  handler: getWeather,
});

Hanteraren getWeather hämtar väderdata för en plats och returnerar dem som JSON.

  const location = mcptoolargs?.location ?? "";

  try {
    const result = await weatherService.getCurrentWeatherAsync(location);
    
    if ("TemperatureC" in result) {
      context.log(`Weather fetched for ${result.Location}: ${result.TemperatureC}°C`);
    } else {
      context.warn(`Weather error for ${result.Location}: ${result.Error}`);
    }

    return result;
  } catch (error) {
    context.error(`Failed to get weather for ${location}: ${error}`);
    return {
      Location: location || "Unknown",
      Error: `Unable to fetch weather: ${error instanceof Error ? error.message : String(error)}`,
      Source: "api.open-meteo.com"
    };
  }
}

// Register the GetWeatherWidget resource
app.mcpResource("getWeatherWidget", {
  uri: WEATHER_WIDGET_URI,
  resourceName: WEATHER_WIDGET_NAME,
  description: WEATHER_WIDGET_DESCRIPTION,

Funktionen app.mcpResource() registrerar getWeatherWidget hanteraren, som hanterar HTML-widgeten.

  handler: getWeatherWidget,
});

// Register the GetWeather tool
// Note: metadata property is not yet supported in the JavaScript SDK for mcpTool
// The TOOL_METADATA is defined for future use when the SDK is updated
app.mcpTool("getWeather", {
  toolName: "GetWeather",
  description: "Returns current weather for a location via Open-Meteo.",
  toolProperties: {

Hanteraren getWeatherWidget läser och returnerar den paketerade HTML-filen.

  context.log("Getting weather widget");
  
  try {
    // __dirname is src/functions, go up 1 level to src/, then into app/dist
    const filePath = path.join(__dirname, "..", "app", "dist", "index.html");
    return fs.readFileSync(filePath, "utf-8");
  } catch (error) {
    context.log(`Error reading weather widget file: ${error}`);
    // Return a fallback HTML if file not found
    return `<!DOCTYPE html>
<html>
<head><title>Weather Widget</title></head>
<body>
  <h1>Weather Widget</h1>
  <p>Widget content not found. Please ensure the app/dist/index.html file exists.</p>
</body>
</html>`;
  }
}

// GetWeather function - returns current weather for a location
async function getWeather(_toolArguments, context) {
  context.log("Getting weather");

Konstanten TOOL_METADATA deklarerar en ui.resourceUri som instruerar MCP-värden att hämta det interaktiva användargränssnittet från ui://weather/index.html när verktyget har körts klart.

const TOOL_METADATA = JSON.stringify({
  ui: {
    resourceUri: "ui://weather/index.html"
  }
});

Du kan visa den fullständiga projektmallen på lagringsplatsen Azure Functions JavaScript MCP Server GitHub.

Funktionskoden för väderverktyget MCP Apps definieras i src/McpWeatherApp mappen . I den [McpMetadata] här funktionen lägger attributet till UI-metadata i GetWeather verktyget.

[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)
{
    try
    {
        var result = await _weatherService.GetCurrentWeatherAsync(location);
        
        if (result is WeatherResult weather)
        {
            _logger.LogInformation("Weather fetched for {Location}: {TempC}°C", weather.Location, weather.TemperatureC);
        }
        else if (result is WeatherError error)
        {
            _logger.LogWarning("Weather error for {Location}: {Error}", error.Location, error.Error);
        }

        return result;
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Failed to get weather for {Location}", location);
        return new WeatherError(location ?? "Unknown", $"Unable to fetch weather: {ex.Message}", "api.open-meteo.com");
    }
}

Attributet [McpResourceTrigger] tillämpas på GetWeatherWidget funktionen, som hanterar HTML-widgeten.

[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);
}

Konstanten ToolMetadata deklarerar en ui.resourceUri som instruerar MCP-värden att hämta det interaktiva användargränssnittet från ui://weather/index.html när verktyget har körts klart.

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

Funktionen GetWeatherWidget hanterar den paketerade HTML-filen på den URI:n med hjälp av [McpResourceTrigger].

Du kan visa den fullständiga projektmallen på lagringsplatsen Azure Functions .NET MCP Server GitHub.

Funktionskoden för MCP Apps väderverktyg definieras i src/McpWeatherApp/function_app.py filen. I den här funktionen lägger parametern metadata@app.mcp_tool() till UI-metadata i get_weather verktyget.

# Get Weather Tool - returns current weather for a location
@app.mcp_tool(metadata=TOOL_METADATA)
@app.mcp_tool_property(arg_name="location", description="City name to check weather for (e.g., Seattle, New York, Miami)")
def get_weather(location: str) -> Dict[str, Any]:
    """Returns current weather for a location via Open-Meteo."""
    logging.info(f"Getting weather for location: {location}")
    
    try:
        result = weather_service.get_current_weather(location)
        
        if "TemperatureC" in result:
            logging.info(f"Weather fetched for {result['Location']}: {result['TemperatureC']}°C")
        else:
            logging.warning(f"Weather error for {result['Location']}: {result.get('Error', 'Unknown error')}")
        
        return json.dumps(result)
    except Exception as e:
        logging.error(f"Failed to get weather for {location}: {e}")
        return json.dumps({
            "Location": location or "Unknown",
            "Error": f"Unable to fetch weather: {str(e)}",
            "Source": "api.open-meteo.com"
        })

Dekoratören @app.mcp_resource_trigger() tillämpas på get_weather_widget funktionen, som hanterar HTML-widgeten.

@app.mcp_resource_trigger(
    arg_name="context",
    uri=WEATHER_WIDGET_URI,
    resource_name=WEATHER_WIDGET_NAME,
    description=WEATHER_WIDGET_DESCRIPTION,
    mime_type=WEATHER_WIDGET_MIME_TYPE,
    metadata=RESOURCE_METADATA
)
def get_weather_widget(context) -> str:
    """Get the weather widget HTML content."""
    logging.info("Getting weather widget")
    
    try:
        # Get the path to the widget HTML file
        # Current file is src/function_app.py, look for src/app/index.html
        current_dir = Path(__file__).parent
        file_path = current_dir / "app" / "dist" / "index.html"
        
        if file_path.exists():
            return file_path.read_text(encoding="utf-8")
        else:
            logging.warning(f"Weather widget file not found at: {file_path}")
            # Return a fallback HTML if file not found
            return """<!DOCTYPE html>
<html>
<head><title>Weather Widget</title></head>
<body>
  <h1>Weather Widget</h1>
  <p>Widget content not found. Please ensure the app/index.html file exists.</p>
</body>
</html>"""
    except Exception as e:
        logging.error(f"Error reading weather widget file: {e}")
        return """<!DOCTYPE html>
<html>
<head><title>Weather Widget Error</title></head>
<body>
  <h1>Weather Widget</h1>
  <p>Error loading widget content.</p>
</body>
</html>"""

Konstanten TOOL_METADATA deklarerar en ui.resourceUri som instruerar MCP-värden att hämta det interaktiva användargränssnittet från ui://weather/index.html när verktyget har körts klart.

TOOL_METADATA = json.dumps({"ui": {"resourceUri": "ui://weather/index.html"}})

Funktionen get_weather_widget hanterar den paketerade HTML-filen på den URI:n med hjälp av @app.mcp_resource_trigger().

Du kan visa den fullständiga projektmallen på lagringsplatsen Azure Functions Python MCP Server GitHub.

Funktionskoden för MCP Apps väderverktyg definieras i mcp-weather-app/src/functions/weatherMcpApp.ts filen. I denna funktion lägger egenskapen på metadata till UI-metadata för app.mcpTool()-verktyget vid registrering.

// Register the GetWeather tool
app.mcpTool("getWeather", {
  toolName: "GetWeather",
  description: "Returns current weather for a location via Open-Meteo.",
  toolProperties: {
    location: arg.string().describe("City name to check weather for (e.g., Seattle, New York, Miami)")
  },
  metadata: TOOL_METADATA,
  handler: getWeather,
});

Hanteraren getWeather hämtar väderdata för en plats och returnerar dem som JSON.

// GetWeather function - returns current weather for a location
export async function getWeather(
  _toolArguments: unknown,
  context: InvocationContext
): Promise<object> {
  context.log("Getting weather");

  const mcptoolargs = context.triggerMetadata.mcptoolargs as {
    location?: string;
  };
  const location = mcptoolargs?.location ?? "";

  try {
    const result = await weatherService.getCurrentWeatherAsync(location);

    if ("TemperatureC" in result) {
      const weather = result as WeatherResult;
      context.log(`Weather fetched for ${weather.Location}: ${weather.TemperatureC}°C`);
    } else {
      const error = result as WeatherError;
      context.warn(`Weather error for ${error.Location}: ${error.Error}`);
    }

    return result;
  } catch (error) {
    context.error(`Failed to get weather for ${location}: ${error}`);
    return {
      Location: location || "Unknown",
      Error: `Unable to fetch weather: ${error instanceof Error ? error.message : String(error)}`,
      Source: "api.open-meteo.com"
    } as WeatherError;
  }
}

Funktionen app.mcpResource() registrerar getWeatherWidget hanteraren, som hanterar HTML-widgeten.

// Register the GetWeatherWidget resource
app.mcpResource("getWeatherWidget", {
  uri: WEATHER_WIDGET_URI,
  resourceName: WEATHER_WIDGET_NAME,
  description: WEATHER_WIDGET_DESCRIPTION,
  mimeType: WEATHER_WIDGET_MIME_TYPE,
  metadata: RESOURCE_METADATA,
  handler: getWeatherWidget,
});

Hanteraren getWeatherWidget läser och returnerar den paketerade HTML-filen.

// GetWeatherWidget function - returns the HTML content for the weather widget
export async function getWeatherWidget(
  resourceContext: unknown,
  context: InvocationContext
): Promise<string> {
  context.log("Getting weather widget");

  try {
    // __dirname is dist/src/functions — go up 3 levels to project root, then to src/app/dist
    const filePath = path.join(__dirname, "..", "..", "..", "src", "app", "dist", "index.html");
    return fs.readFileSync(filePath, "utf-8");
  } catch (error) {
    context.log(`Error reading weather widget file: ${error}`);
    return `<!DOCTYPE html>
<html>
<head><title>Weather Widget</title></head>
<body>
  <h1>Weather Widget</h1>
  <p>Widget content not found. Run <code>npm run build:app</code> first.</p>
</body>
</html>`;
  }
}

Konstanten TOOL_METADATA deklarerar en ui.resourceUri som instruerar MCP-värden att hämta det interaktiva användargränssnittet från ui://weather/index.html när verktyget har körts klart.

// Metadata for the tool (as valid JSON string)
const TOOL_METADATA = JSON.stringify({
  ui: {
    resourceUri: "ui://weather/index.html"
  }
});

Du kan visa den fullständiga projektmallen på Azure Functions TypeScript MCP Server GitHub lagringsplats.

Funktionskoden för väderverktyget MCP Apps definieras i samples/McpWeatherApp mappen . I den här funktionen lägger annoteringen @McpMetadata till UI-metadata för verktyget GetWeather.

    try (InputStream is = getClass().getClassLoader().getResourceAsStream("app/dist/index.html")) {
        if (is != null) {
            return new String(is.readAllBytes(), StandardCharsets.UTF_8);
        }
    } catch (IOException e) {
        executionContext.getLogger().log(Level.WARNING, "Failed to read UI from classpath", e);
    }

    return "<html><body><p>Weather widget UI not found. Run <code>npm run build</code> in the <code>app/</code> directory.</p></body></html>";
}

/**
 * MCP Tool: fetches current weather for a given location.
 * <p>
 * Returns structured weather data (JSON) that the MCP host can pass to the
 * UI resource declared in the tool metadata.
 */
@FunctionName("GetWeather")
public String getWeather(
        @McpToolTrigger(
                name = "GetWeather",
                description = "Returns current weather for a location via Open-Meteo.")
        @McpMetadata(
                name = "GetWeather",
                json = TOOL_METADATA)
        String context,
        @McpToolProperty(
                name = "location",
                propertyType = "string",
                description = "City name to check weather for (e.g., Seattle, New York, Miami)")
        String location,
        final ExecutionContext executionContext) {

    executionContext.getLogger().info("GetWeather: looking up weather for '" + location + "'");

Anteckningen @McpResourceTrigger tillämpas på GetWeatherWidget funktionen, som hanterar HTML-widgeten.

@FunctionName("GetWeatherWidget")
public String getWeatherWidget(
        @McpResourceTrigger(
                name = "context",
                uri = "ui://weather/index.html",
                resourceName = "Weather Widget",
                title = "Weather Widget",
                description = "Interactive weather display for MCP Apps",
                mimeType = "text/html;profile=mcp-app")
        @McpMetadata(
                name = "context",
                json = RESOURCE_METADATA)
        String context,
        final ExecutionContext executionContext) {

Konstanten TOOL_METADATA deklarerar en ui.resourceUri som instruerar MCP-värden att hämta det interaktiva användargränssnittet från ui://weather/index.html när verktyget har körts klart.

private static final String TOOL_METADATA = """
        {
            "ui": {
                "resourceUri": "ui://weather/index.html"
            }
        }
        """;

Funktionen GetWeatherWidget hanterar den paketerade HTML-filen på den URI:n med hjälp av @McpResourceTrigger.

Du kan visa den fullständiga projektmallen på lagringsplatsen Azure Functions Java MCP Server GitHub.

När du har verifierat MCP Apps-verktygen lokalt kan du publicera projektet till Azure.

Distribuera till Azure

Det här projektet är konfigurerat för att använda azd för att distribuera projektet till en ny funktionsapp i en Flex Consumption-plan i Azure. Projektet innehåller en uppsättning Bicep-filer som azd använder för att skapa en säker distribution till en Flex Consumption-plan som följer bästa praxis.

  1. I Visual Studio Code trycker du på F1 för att öppna kommandopaletten. Sök efter och kör kommandot Azure Developer CLI (azd): Package, Provision and Deploy (up). Logga sedan in med ditt Azure-konto.

  2. När du uppmanas till det väljer du följande nödvändiga distributionsparametrar:

    Parameter Description
    Azure prenumeration Prenumeration där dina resurser skapas.
    Azure plats Azure region där du vill skapa resursgruppen som innehåller de nya Azure resurserna. Endast regioner som för närvarande stöder Flex Consumption-planen visas.
    vnetEnabled False för att hoppa över att skapa virtuella nätverksresurser, vilket förenklar distributionen.

    När kommandot har slutförts visas länkar till de resurser som du har skapat.

Det här projektet är konfigurerat för att använda azd för att distribuera projektet till en ny funktionsapp i en Flex Consumption-plan i Azure. Projektet innehåller en uppsättning Bicep-filer som azd använder för att skapa en säker distribution till en Flex Consumption-plan som följer bästa praxis.

  1. Kör följande azd env set kommando i terminalen:

    azd env set DEPLOY_SERVICE weather
    

    Det här kommandot anger variabeln DEPLOY_SERVICE för att etablera weather apprelaterade resurser

  2. azd provision Kör kommandot och ange de parametrar som krävs för att etablera resurser:

    azd provision
    
    Parameter Description
    Azure prenumeration Prenumeration där dina resurser skapas.
    Azure plats Azure region där du vill skapa resursgruppen som innehåller de nya Azure resurserna. Endast regioner som för närvarande stöder Flex Consumption-planen visas.
    vnetEnabled False för att hoppa över att skapa virtuella nätverksresurser, vilket förenklar distributionen.

    När du uppmanas till det väljer du din prenumeration, en Azure region för resurserna och väljer false för att hoppa över att skapa virtuella nätverksresurser för att förenkla distributionen.

  3. Kör kommandot azd deploy för att distribuera appen weather till Azure:

    azd deploy --service weather
    

Ansluta till din fjärranslutna MCP-server

McP-servern körs nu i Azure. Projektmallen innehåller en remote-mcp-function post i .vscode/mcp.json som redan har konfigurerats för att ansluta till fjärrservern. Eftersom inbyggd MCP-auktorisering är aktiverad som standard hanterar Visual Studio Code OAuth-inloggningsflödet automatiskt när du ansluter.

  1. Hämta funktionsappens namn från distributionen genom att köra det här kommandot i terminalen:

    azd env get-value AZURE_FUNCTION_NAME
    
  2. I .vscode/mcp.jsonväljer du Starta ovanför konfigurationen remote-mcp-function .

  3. När du uppmanas till det anger du funktionsappens namn från föregående steg.

  4. Visual Studio Code uppmanar dig att logga in med Microsoft Entra. Följ anvisningarna för autentisering för att auktorisera åtkomst till din fjärranslutna MCP-server.

Verifiera din distribution

Nu kan du ha GitHub Copilot använda dina fjärr-MCP-verktyg precis som du gjorde lokalt, men nu körs koden säkert i Azure. Spela upp samma kommandon som du använde tidigare för att säkerställa att allt fungerar korrekt.

Rensa resurser

När du är klar med mcp-servern och relaterade resurser använder du det här kommandot för att ta bort funktionsappen och dess relaterade resurser från Azure för att undvika ytterligare kostnader:

azd down 

Nästa steg