Integration with Microsoft.Extensions.AI

The AIPrompt component incorporates the Microsoft.Extensions.AI package to simplify your AI model integration, provide flexibility and allows you to easily use and test various AI providers.

Other components will support similar integration in future versions of UI for ASP.NET Core.

Integration

To integrate the Microsoft.Extensions.AI library with your AIPrompt component, register an IChatClient service and configure it according to the model you are using. The AIPrompt is designed to automatically use the registered IChatClient.

Microsoft.Extensions.AI provides a simple integration with various models where the configuration slightly differs depending on the model. The example below shows usage of Azure OpenAI and you may explore some other examples with different models in this post.

Program.cs

    // Add services to the container.

    // Register the Azure OpenAI client.
    builder.Services.AddSingleton(new AzureOpenAIClient(
        new Uri("YOUR_AZURE_OPENAI_ENDPOINT"),
        new AzureKeyCredential("YOUR_AZURE_OPENAI_CREDENTIAL")
    ));

    // Register the Chat client with the specified model.
    builder.Services.AddChatClient(services => 
        services.GetRequiredService<AzureOpenAIClient>()
            .AsChatClient("gpt-4o-mini")
    );

C#

    using KendoCoreService.Filters;
    using Microsoft.AspNetCore.Components.Forms;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.AI;
    using SharpToken;

    public class LLMController : Controller
    {
        private readonly IChatClient _chatClient;

        public LLMController(IChatClient chatClient)
        {
            _chatClient = chatClient;
        }

        [HttpPost]
        [ServiceFilter(typeof(ApiKeyAuthFilter))]
        public async Task<IActionResult> AIChatCompletion([FromBody] IList<ChatMessage> messages)
        {
            var options = new ChatOptions
            {
                MaxOutputTokens = 500,
                Temperature = 0.7f
            };

            ValidateMessagesLength(messages);

            var hasSystemPrompt = messages.Any(x => x.Role == ChatRole.System);

            if (!hasSystemPrompt)
            {
                messages.Prepend(new ChatMessage(ChatRole.System, DefaultSystemPrompt));
            }

            var response = await _chatClient.CompleteAsync(messages, options);

            return Json(response);
        }

        private void ValidateMessagesLength(IList<ChatMessage> messages)
        {
            var tokenizer = GptEncoding.GetEncoding("cl100k_base");

            foreach (var message in messages)
            {
                var tokens = tokenizer.Encode(message.Text);

                if (tokens.Count > 1000) 
                {
                    var truncatedTokens = tokens.Take(1000).ToList();
                    message.Text = tokenizer.Decode(truncatedTokens);
                }
            }
        }
    }

For the complete IChatClient example, refer to the kendo-ui-demos-service GitHub repository.

See Also

• AIPrompt for ASP.NET Core Overview (Documentation)
• Binding AIPrompt for ASP.NET Core to a remote AI service (Demo)
• Microsoft.Extensions.AI
• Introducing Microsoft.Extensions.AI Preview – Unified AI Building Blocks for .NET