Azure Functionsの MCP リソース トリガー

この最初の例では、リソースを使用して MCP Apps の UI 要素を実装する方法を示します。

次のコードでは、 Weather Widget という名前のリソースを公開するエンドポイントを作成します。このリソースは、対話型の天気表示をバンドルされた HTML コンテンツとして提供します。 リソースは、 ui:// スキームを使用して、MCP アプリ UI リソースであることを示します。

// Optional resource 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);
}

ツールは、メタデータ内の resourceUri を宣言し、 ui://weather/index.htmlをポイントすることで、このリソースを参照できます。 ツールが呼び出されると、MCP ホストはリソースをフェッチしてレンダリングします。

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

完全なコード例については、WeatherFunction.cs を参照してください。

このコード例では、マークダウン ファイルを読み取り、その内容をプレーン テキストとして返す readme という名前のリソースを公開するエンドポイントを作成します。 クライアントは、 file://readme.md URI を使用してこのリソースにアクセスできます。

    private const string ReadmeMetadata = """
        {
            "author": "John Doe",
            "file": {
                "version": 1.0,
                "releaseDate": "2024-01-01"
            },
            "test": {
                "example": ["list", "of", "values"]
            }
        }
        """;

    [Function(nameof(GetTextResource))]
    public string GetTextResource(
        [McpResourceTrigger(
            "file://readme.md",
            "readme",
            Description = "Application readme file",
            MimeType = "text/plain")]
        [McpMetadata(ReadmeMetadata)]
        ResourceInvocationContext context)
    {
        _logger.LogInformation("Reading text resource from local file storage");
        var file = Path.Combine(AppContext.BaseDirectory, "assets", "readme.md");
        return File.ReadAllText(file);
    }

この例では、assets ファイルに次のディレクティブが存在するため、readmeを含む .csproj という名前のフォルダーがビルド時に関数アプリにバンドルされます。

<ItemGroup>
  <None Update="assets\**\*">
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
  </None>
</ItemGroup>

完全なコード例については、Azure Functions MCP 拡張機能リポジトリを参照してください。

JavaScript のコード例は現在使用できません。 一般的なガイダンスについては、TypeScript の例を参照してください。

次のコードでは、 Weather Widget という名前のリソースを登録します。このリソースは、インタラクティブな天気表示をバンドルされた HTML コンテンツとして提供します。 リソースは、 ui:// スキームを使用して、MCP アプリ UI リソースであることを示します。

// Constants for the Weather Widget resource
const WEATHER_WIDGET_URI = "ui://weather/index.html";
const WEATHER_WIDGET_NAME = "Weather Widget";
const WEATHER_WIDGET_DESCRIPTION = "Interactive weather display for MCP Apps";
const WEATHER_WIDGET_MIME_TYPE = "text/html;profile=mcp-app";

// Metadata for the resource 
const RESOURCE_METADATA = JSON.stringify({
  ui: {
    prefersBorder: true
  }
});

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

次のコードは、 getWeatherWidget ハンドラーです。

export async function getWeatherWidget(
  resourceContext: unknown,
  context: InvocationContext
): Promise<string> {
  context.log("Getting weather widget");

  try {
    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. Please ensure the app/dist/index.html file exists.</p>
      </body>
      </html>`;
  }
}

ツールは、メタデータ内の resourceUri を宣言することで、このリソースを参照できます。 ツールが呼び出されると、MCP ホストはリソースをフェッチしてレンダリングします。

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

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

完全なコード例については、weatherMcpApp.ts を参照してください。

次のコードでは、 Weather Widget という名前のリソースを登録します。このリソースは、インタラクティブな天気表示をバンドルされた HTML コンテンツとして提供します。 リソースは、 ui:// スキームを使用して、MCP アプリ UI リソースであることを示します。

# Constants for the Weather Widget resource
WEATHER_WIDGET_URI = "ui://weather/index.html"
WEATHER_WIDGET_NAME = "Weather Widget"
WEATHER_WIDGET_DESCRIPTION = "Interactive weather display for MCP Apps"
WEATHER_WIDGET_MIME_TYPE = "text/html;profile=mcp-app"

# Metadata for the resource 
RESOURCE_METADATA = '{"ui": {"prefersBorder": true}}'

@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")

    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 """<!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>"""

ツールは、メタデータ内の resourceUri を宣言し、 ui://weather/index.htmlをポイントすることで、このリソースを参照できます。 ツールが呼び出されると、MCP ホストはリソースをフェッチしてレンダリングします。

# Metadata for the tool
TOOL_METADATA = '{"ui": {"resourceUri": "ui://weather/index.html"}}'

@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}")

    result = weather_service.get_current_weather(location)
    return json.dumps(result)

完全なコード例については、function_app.pyを参照してください。

次のコードでは、 Weather Widget という名前のリソースを登録します。このリソースは、インタラクティブな天気表示をバンドルされた HTML コンテンツとして提供します。 リソースは、 ui:// スキームを使用して、MCP アプリ UI リソースであることを示します。

private static final String RESOURCE_METADATA = """
        {
            "ui": {
                "prefersBorder": true
            }
        }
        """;

@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) {

    executionContext.getLogger().info("GetWeatherWidget: serving weather widget UI");

    return java.nio.file.Files.readString(file.toPath(), StandardCharsets.UTF_8);
}

ツールは、メタデータ内の resourceUri を宣言し、 ui://weather/index.htmlをポイントすることで、このリソースを参照できます。 ツールが呼び出されると、MCP ホストはリソースをフェッチしてレンダリングします。

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

@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 + "'");

    Object result = weatherService.getCurrentWeather(location);

    return MAPPER.writeValueAsString(result);
}

完全なコード例については、WeatherFunction.java を参照してください。

属性

C# ライブラリでは、 McpResourceTriggerAttribute を使用して関数トリガーを定義します。

この属性のコンストラクターは、次のパラメーターを受け取ります。

この属性は、次の名前付きプロパティもサポートしています。

[McpMetadata]属性を使用して、リソースのメタデータを増やすことができます。 このメタデータは、クライアントが resources/listを呼び出すときに各リソースのメタ フィールドに含まれており、リソース コンテンツの表示または処理方法に影響を与える可能性があります。

リソース トリガーが関数にデータを提供する方法については、「 使用法」 を参照してください。

デコレーター

mcp_resource_triggerでは、次の MCP リソース トリガー プロパティがサポートされています。

コンフィギュレーション

コードでトリガーのバインド オプションを定義します。 トリガーでは、次のオプションがサポートされています。

属性

@McpResourceTrigger注釈を関数パラメーターに適用して、MCP リソース トリガーを定義します。

@McpResourceTrigger注釈では、次のプロパティがサポートされています。

メタデータ注釈

必要に応じて、@McpResourceTriggerと同じパラメーターに@McpMetadataを適用して、任意の JSON メタデータをリソースにアタッチできます。 クライアントがresources/listを呼び出すと、このメタデータが MCP プロトコルの _meta フィールドに表示されます。

@McpMetadata注釈では、次のプロパティがサポートされています。

Example:

@McpResourceTrigger(
        name = "context",
        uri = "file://readme.md",
        resourceName = "readme",
        description = "Application readme file",
        mimeType = "text/plain")
@McpMetadata(
        name = "context",
        json = "{\"author\": \"John Doe\", \"version\": 1.0}")

完全な例については、セクションの例を参照してください。

Usage

MCP リソース トリガーは、次の種類にバインドできます。

ResourceInvocationContext型には、次のプロパティがあります。

mcp_resource_triggerデコレーターは、MCP クライアントからのリソース要求を表すコンテキスト パラメーターにバインドします。 トリガーは、 str、 dict、または bytesの種類にバインドできます。

リソース ハンドラー関数には、次の 2 つのパラメーターがあります。

MCP リソース トリガーは、リソース呼び出しコンテキストを関数パラメーターにバインドします。 トリガーは、 String、またはバイナリ コンテンツの byte[] の種類にバインドできます。

リソース URI

MCP リソースでは、URI を使用してリソースのアドレスを定義します。 URI はリソースを一意に識別し、クライアントがリソースを要求するために使用します。 UI リソースの ui:// やファイル ベースのリソースの file:// など、リソースに適した任意の URI スキームを使用できます。

リソース メタデータ

McpMetadata属性を使用して、リソースに追加のメタデータを提供します。 MCP クライアントはこのメタデータを受け取り、リソース コンテンツの表示または処理方法に影響を与える可能性があります。

リソースに追加のメタデータを提供するには、metadata デコレーターで mcp_resource_trigger パラメーターを使用します。 このメタデータは、クライアントがmetaを呼び出すときに、各リソースの resources/list フィールドに含まれる JSON でシリアル化された文字列です。 これは、リソース コンテンツの表示または処理方法に影響を与える可能性があります。

metadata オプションを使用して、リソースに追加のメタデータを提供します。 このメタデータは、クライアントがmetaを呼び出すときに、各リソースの resources/list フィールドに含まれる JSON でシリアル化された文字列です。 これは、リソース コンテンツの表示または処理方法に影響を与える可能性があります。

@McpMetadata注釈を使用して、リソースに追加のメタデータを提供します。 このメタデータは、クライアントがmetaを呼び出すときに、各リソースの resources/list フィールドに含まれる JSON でシリアル化された文字列です。 これは、リソース コンテンツの表示または処理方法に影響を与える可能性があります。

戻り値の型

MCP リソース トリガーでは、次の戻り値の種類がサポートされます。

MCP リソース トリガーでは、次の戻り値の種類がサポートされます。

この関数は、リソース コンテンツ (HTML、JSON、プレーン テキストなど) を含む string を返す必要があります。

MCP リソース トリガーでは、次の戻り値の種類がサポートされます。

リソース検出

関数アプリは、起動すると、すべてのリソース トリガー関数を MCP サーバーに登録します。 クライアントは、MCP resources/list メソッドを呼び出して使用可能なリソースを検出します。 このメソッドは、各リソースの URI、名前、説明、MIME の種類、サイズ、メタデータ ( meta フィールドを通じて) を返します。 クライアントは、リソース URI を使用して resources/read を呼び出してリソースを読み取る。

Sessions

SessionIdの ResourceInvocationContext プロパティは、要求を行っている MCP セッションを識別します。 このプロパティを使用して、リソースの提供時にセッションごとの状態を維持するか、セッション固有のロジックを適用します。

詳細については、「例」を参照してください。

host.json 設定

host.json ファイルには、MCP トリガーの動作を制御する設定が含まれています。 使用可能な設定の詳細については、「host.json 設定」を参照してください。