Back to Devexpress

DxAIChat.ChatClientServiceKey Property

blazor-devexpress-dot-aiintegration-dot-blazor-dot-chat-dot-dxaichat.md

latest5.2 KB
Original Source

DxAIChat.ChatClientServiceKey Property

Associates the chat component with the specific chat client service.

Namespace : DevExpress.AIIntegration.Blazor.Chat

Assembly : DevExpress.AIIntegration.Blazor.Chat.v25.2.dll

NuGet Package : DevExpress.AIIntegration.Blazor.Chat

Declaration

csharp
[Parameter]
public string ChatClientServiceKey { get; set; }

Property Value

TypeDescription
String

The unique identifier of the chat client service.

|

Remarks

Use the ChatClientServiceKey property to dynamically bind the DevExpress Blazor AI Chat component to a specific AI service at runtime. You can offer users a choice of AI models, or programmatically select the most appropriate model for a task. For example, you can use a powerful, “thinking” model for complex queries and a faster, more cost-effective model for simpler interactions.

In a typical setup, all DevExpress AI-powered extensions for Blazor work with a single IChatClient registered when the application starts. To offer a choice of AI services in your application, register several AI models using the .NET keyed services mechanism. Each IChatClient is associated with a unique string key by calling the AddKeyedChatClient method. This approach allows you to integrate different providers, tenants, or different models from the same provider.

Once the AI service is registered, you can dynamically bind it to the AI chat component by specifying its string identifier in the ChatClientServiceKey property.

razor
<DxFormLayout>
    <DxFormLayoutItem Caption="LLM Provider:">
        <DxComboBox Data="chatClients"
                    TextFieldName="Value"
                    ValueFieldName="Key"
                    @bind-Value="chatClientServiceKey" />
    </DxFormLayoutItem>
</DxFormLayout>

<DxAIChat ChatClientServiceKey="@chatClientServiceKey" />

@code {
    Dictionary<string, string> chatClients = new()
    {
        { "AzureOpenAI", "Cloud" },
        { "Ollama", "Local" }
    };

    string chatClientServiceKey = "";

    protected override void OnInitialized()
    {
        chatClientServiceKey = chatClients.First().Key;
        base.OnInitialized();
    }
}
csharp
public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);
        // Azure OpenAI client
        string azureOpenAiKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_KEY");
        string azureOpenAiEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
        string azureOpenAiModel = Environment.GetEnvironmentVariable("AZURE_OPENAI_MODEL");
        AzureOpenAIClient azureOpenAIClient = new(
              new Uri(azureOpenAiEndpoint),
              new ApiKeyCredential(azureOpenAiKey)
        );
        IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAiModel)
                                                             .AsIChatClient();
        // Ollama client
        string aiModel = Environment.GetEnvironmentVariable("OLLAMA_MODEL");
        IChatClient ollamaChatClient = new OllamaApiClient("http://localhost:11434", aiModel);
        // Register keyed AI services
        builder.Services.AddKeyedChatClient("AzureOpenAI", azureOpenAIChatClient);
        builder.Services.AddKeyedChatClient("Ollama", ollamaChatClient);
        /* ... */
    }
}

Backward Compatibility

You can combine keyed chat client services and the primary client registered with the AddChatClient method. The AI Chat components that do not specify ChatClientServiceKey will continue to function with the primary client.

csharp
public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);

        /* define chat clients */

        builder.Services.AddChatClient(azureOpenAIChatClient);
        builder.Services.AddKeyedChatClient("Gemini", geminiChatClient);
        builder.Services.AddKeyedChatClient("Ollama", ollamaChatClient);

        /* ... */
    }
}

This pattern allows you to maintain compatibility with your existing code and still have an option to select from multiple AI models when needed.

See Also

DxAIChat Class

DxAIChat Members

DevExpress.AIIntegration.Blazor.Chat Namespace