This example uses function/tool calling with the DevExpress Blazor DxAIChat component. Function calling allows a model to invoke external functions or APIs in response to user queries.

The solution includes the following projects:

• Project 1: DXBlazorChatFunctionCalling implements function calling using the IChatClient interface from the Microsoft.Extensions.AI library.
• Project 2: DXBlazorChatFunctionCalling.Semantic creates a Microsoft Semantic Kernel plugin with a callable function.

1. The AI model detects when a request requires external execution.
2. The AI model identifies the appropriate function and necessary parameters. In this example, these are CustomAIFunctions.GetWeatherTool() and WeatherPlugin.MyGetWhether(string city) functions.
3. The AI model calls the function and processes the result.
4. The response is formatted and returned to the Blazor AI Chat control.

Before you run the example, register your AI service. This example uses Azure OpenAI. You’ll need to specify your credentials in Program.cs:

// Replace with your endpoint, API key, and deployed AI model name.
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
string deploymentName = string.Empty;

• The GetWeatherTool function retrieves weather information for a specified city.

• The System.ComponentModel.Description attribute helps the AI model select and call the appropriate method (in this example this is the GetWeather method). By using this attribute, the AI-powered system can better analyze, select, and invoke the correct function when responding to user queries.

  using System.ComponentModel;
  using Microsoft.Extensions.AI;
  
  namespace DXBlazorChatFunctionCalling.Services;
  public class CustomAIFunctions {
  
      // Describe the function so the AI service understands its purpose.
      public static AIFunction GetWeatherTool => AIFunctionFactory.Create(GetWeather);
      [Description("Gets the current weather in the city")]
      public static string GetWeather([Description("The name of the city")] string city) {
          switch (city) {
              case "Los Angeles":
              case "LA":
                  return GetTemperatureValue(20);
              case "London":
                  return GetTemperatureValue(15);
              default:
                  return $"The information about the weather in {city} is not available.";
          }
      }
      static string GetTemperatureValue(int value) {
          var valueInFahrenheits = value * 9 / 5 + 32;
          return $"{valueInFahrenheits}\u00b0F ({value}\u00b0C)";
      }
  }

• To enable function calling in a chat client, you must first configure chat client options. Once configured, call the UseFunctionInvocation() method to activate function invocation.

  using Azure;
  using Azure.AI.OpenAI;
  using Microsoft.Extensions.AI;
  //...
  IChatClient chatClient = new ChatClientBuilder(azureChatClient)
      .ConfigureOptions(x =>
      {
          x.Tools = [CustomAIFunctions.GetWeatherTool];
      })
      .UseFunctionInvocation()
      .Build();
  
  builder.Services.AddChatClient(chatClient);

When a user asks the AI Chat about the weather, the AI model automatically calls the GetWeatherTool function and returns the formatted result to the AI Chat control.

The DXBlazorChatFunctionCalling.Semantic project implements a custom IChatClient to invoke IChatCompletionService methods from the Semantic Kernel. DevExpress AI-powered APIs use this interface to operate with LLMs.

The WeatherPlugin class implements a Microsoft Semantic Kernel plugin. The Microsoft.SemanticKernel.KernelFunction attribute annotates the GetWeather() method as a callable function within the Semantic Kernel runtime.

using Microsoft.SemanticKernel;
using System.ComponentModel;
 
public class WeatherPlugin
{
    [KernelFunction]
    [Description("Gets the current weather in the city, returning a value in Celsius")]
    public static string GetWeather([Description("The name of the city")] string city) {
        switch(city) {
            case "Los Angeles":
            case "LA":
                return GetTemperatureValue(20);
            case "London":
                return GetTemperatureValue(15);
            default:
                return $"The information about the weather in {city} is not available.";
        }
    }
    static string GetTemperatureValue(int value)
    {
      var valueInFahrenheits = value * 9 / 5 + 32;
      return $"{valueInFahrenheits}\u00b0F ({value}\u00b0C)";
    }
}

DXBlazorChatFunctionCalling

• Program.cs
• CustomAIFunctions.cs

DXBlazorChatFunctionCalling.Semantic

• Program.cs
• WeatherPlugin.cs
• SemanticKernelPluginCallingChatClient.cs

• DevExpress Blazor AI Chat — Implement Function Calling (Blog Post)
• DevExpress AI-powered Extensions for Blazor
• DevExpress Blazor AI Chat Control

• AI-powered Extensions: AI Chat

• Blazor AI Chat — How to add the DevExpress Blazor AI Chat component to your next Blazor, MAUI, WPF, and WinForms application

• Blazor Grid and Report Viewer — Incorporate an AI Assistant (Azure OpenAI) in your next DevExpress-powered Blazor app

(you will be redirected to DevExpress.com to submit your response)