New to Telerik UI for Blazor? Start a free 30-day trial

Chat Integrations

Updated on Jan 27, 2026

The Chat integrates seamlessly with various AI services, Large Language Models (LLMs), chatbot frameworks, and other messaging platforms to create intelligent conversational experiences. You can use it with popular providers like OpenAI, Azure OpenAI, or custom AI services.

This article describes the following integration scenarios:

Microsoft.Extensions.AI
IChatClient
Chatbot with suggested actions

Microsoft.Extensions.AI

The following example demonstrates using the OnSendMessage event to communicate with an AI service. The event handler passes user messages to the AI service, retrieves the response, and displays it in the Chat:

Use Chat with Microsoft.Extensions.AI

RAZOR
@using Microsoft.Extensions.AI
@using System.Threading

@inject AIPromptService AIPromptService

<TelerikChat @ref="@ChatRef"
             AuthorId="user-id"
             Data="@ChatData"
             OnSendMessage="@OnChatSendMessage" />

@code {
    private TelerikChat<Message>? ChatRef;
    private List<Message> ChatData { get; set; } = new();
    private CancellationTokenSource CancellationToken { get; set; } = new();

    private async Task OnChatSendMessage(ChatSendMessageEventArgs args)
    {
        CancellationToken = new();
        
        Message prompt = new() { AuthorId = "user-id", Text = args.Message };

        Message response = new() { AuthorId = "ai-id", IsTyping = true };

        ChatData.Add(prompt);
        ChatData.Add(response);
        ChatRef?.Refresh();

        var chatMessage = new Microsoft.Extensions.AI.ChatMessage(ChatRole.User, args.Message);

        await foreach (var answer in AIPromptService.GetStreamingResponseAsync(chatMessage, cancellationToken: CancellationToken.Token))
        {
            response.Text += answer.Text;
            ChatRef?.Refresh();
        }

        response.IsTyping = false;
    }
}
C#
    public class Message
    {
        public string Id { get; set; } = Guid.NewGuid().ToString();
        public string AuthorId { get; set; } = string.Empty;
        public string AuthorName { get; set; } = string.Empty;
        public string AuthorImageUrl { get; set; } = string.Empty;
        public IEnumerable<FileSelectFileInfo> Files { get; set; } = new List<FileSelectFileInfo>();
        public bool IsDeleted { get; set; }
        public bool IsPinned { get; set; }
        public bool IsTyping { get; set; }
        public string ReplyToId { get; set; } = string.Empty;
        public string Status { get; set; } = string.Empty;
        public List<string> SuggestedActions { get; set; } = new();
        public string Text { get; set; } = string.Empty;
        public DateTime Timestamp { get; set; } = DateTime.Now;
    }

IChatClient

The Telerik Chat for Blazor can integrate with an IChatClient instance that is registered in Program.cs. In such cases, the Chat component automatically calls the IChatClient service methods and renders the responses.

To enable the IChatClient integration:

Set EnableAIChatClient to true in the Chat component.
Set other optional settings related to:
- Name and image url for the IChatClient responses
- Manual AI response handling
- Response streaming
- Message history
- System prompt

See the ChatAIClientSettings API reference for more information.

Use Chat with a single registered IChatClient

RAZOR
<TelerikChat @ref="@ChatRef"
             EnableAIChatClient="true"
             AuthorId="user-id"
             Data="@ChatData"
             OnSendMessage="@OnChatSendMessage">
    <ChatSettings>
        <ChatAIClientSettings AIName="AI Assistant"
                              HistoryMessageCount="10" />
    </ChatSettings>
</TelerikChat>

@code {
    private List<Message> ChatData { get; set; } = new();

    private void OnChatSendMessage(ChatSendMessageEventArgs args)
    {
        Messages.Add(new() { AuthorId = "user-id", Text = args.Message });
    }
}
C#
IChatClient gpt5Client = new OpenAI.OpenAIClient()
    .GetChatClient("gpt-5.0")
    .AsIChatClient();

builder.Services.AddChatClient(gpt5Client);
C#
    public class Message
    {
        public string Id { get; set; } = Guid.NewGuid().ToString();
        public string AuthorId { get; set; } = string.Empty;
        public string AuthorName { get; set; } = string.Empty;
        public string AuthorImageUrl { get; set; } = string.Empty;
        public IEnumerable<FileSelectFileInfo> Files { get; set; } = new List<FileSelectFileInfo>();
        public bool IsDeleted { get; set; }
        public bool IsPinned { get; set; }
        public bool IsTyping { get; set; }
        public string ReplyToId { get; set; } = string.Empty;
        public string Status { get; set; } = string.Empty;
        public List<string> SuggestedActions { get; set; } = new();
        public string Text { get; set; } = string.Empty;
        public DateTime Timestamp { get; set; } = DateTime.Now;
    }

OnAIResponse Event

You can have flexible control over the IChatClient replies and their rendering in the Chat. Subscribe to the OnAIResponse event in the <ChatAIClientSettings> tag inside <ChatSettings>. Use the event to receive, manupulate and add the AI response to the Chat component Data, similar to the OnSendMessage event. The OnAIResponse event argument is of type ChatAIResponseEventArgs.

When using OnAIResponse, the Chat ignores the AIName and AIImageUrl parameters in ChatAIClientSettings.

RAZOR

<TelerikChat @ref="@ChatRef"
             EnableAIChatClient="true"
             AuthorId="user-id"
             Data="@ChatData"
             OnSendMessage="@OnChatSendMessage">
    <ChatSettings>
        <ChatAIClientSettings OnAIResponse="@OnChatAIResponse" />
    </ChatSettings>
</TelerikChat>

@code {
    private List<Message> ChatData { get; set; } = new();

    private void OnChatSendMessage(ChatSendMessageEventArgs args)
    {
        Messages.Add(new() { AuthorId = "user-id", Text = args.Message });
    }

    private async Task OnChatAIResponse(ChatAIResponseEventArgs args)
    {
        Message newMessage = new() { AuthorId = "ai-id", AuthorName = "AI Assistant", IsTyping = true };

        Messages.Add(newMessage);

        if (args.Response is not null)
        {
            newMessage.Text = (await args.Response).Text;
            newMessage.IsTyping = false;
            ChatRef?.Refresh();
        }
    }
}

Stream Responses

To stream the IChatClient responses, set EnableStreaming to true in ChatAIClientSettings.

Use Chat with streamed IChatClient responses

RAZOR

<TelerikChat EnableAIChatClient="true">
    <ChatSettings>
        <ChatAIClientSettings AIName="AI Assistant"
                              EnableStreaming="true" />
    </ChatSettings>
</TelerikChat>

When using the OnAIResponse event, iterate the IAsyncEnumerable ResponseStream event argument in the handler.

Use Chat with streamed IChatClient responses and OnAIResponse event

RAZOR

<TelerikChat EnableAIChatClient="true">
    <ChatSettings>
        <ChatAIClientSettings EnableStreaming="true"
                              OnAIResponse="@OnChatAIResponse" />
    </ChatSettings>
</TelerikChat>

@code {
    private async Task OnChatAIResponse(ChatAIResponseEventArgs args)
    {
        var newMessage = new() { AuthorId = "ai-id", AuthorName = "AI Assistant", IsTyping = true };

        Messages.Add(newMessage);

        if (args.ResponseStream is not null)
        {
            await foreach (ChatAIResponse chunk in args.ResponseStream)
            {
                newMessage.Text += chunk.Text;
                ChatRef?.Refresh();
            }
        }

        newMessage.IsTyping = false;
    }
}

Multiple Instances

When the app has registered several IChatClient instances, then the ChatClientKey parameter of ChatAIClientSettings must point to the service key that matches the respective AddKeyedChatClient("serviceKey") method call in Program.cs.

Use Chat with one of multiple registered IChatClient instances

C#
IChatClient gpt4Client = new OpenAI.OpenAIClient()
    .GetChatClient("gpt-4.1")
    .AsIChatClient();

IChatClient gpt5Client = new OpenAI.OpenAIClient()
    .GetChatClient("gpt-5.0")
    .AsIChatClient();

builder.Services.AddKeyedChatClient("gpt4.1", gptChat4Client);
builder.Services.AddKeyedChatClient("gpt5.0", gptChat5Client);
RAZOR
<TelerikChat @ref="@ChatRef"
             EnableAIChatClient="true"
             AuthorId="user-id"
             Data="@ChatData"
             OnSendMessage="@OnChatSendMessage">
    <ChatSettings>
        <ChatAIClientSettings AIName="AI Assistant"
                              ChatClientKey="@ChatServiceKey" />
    </ChatSettings>
</TelerikChat>

@code {
    private List<Message> ChatData { get; set; } = new();

    private string ChatServiceKey { get; set; } = "gpt5.0";

    private void OnChatSendMessage(ChatSendMessageEventArgs args)
    {
        Messages.Add(new Message() { AuthorId = "user-id", Text = args.Message });
    }
}
C#
    public class Message
    {
        public string Id { get; set; } = Guid.NewGuid().ToString();
        public string AuthorId { get; set; } = string.Empty;
        public string AuthorName { get; set; } = string.Empty;
        public string AuthorImageUrl { get; set; } = string.Empty;
        public IEnumerable<FileSelectFileInfo> Files { get; set; } = new List<FileSelectFileInfo>();
        public bool IsDeleted { get; set; }
        public bool IsPinned { get; set; }
        public bool IsTyping { get; set; }
        public string ReplyToId { get; set; } = string.Empty;
        public string Status { get; set; } = string.Empty;
        public List<string> SuggestedActions { get; set; } = new();
        public string Text { get; set; } = string.Empty;
        public DateTime Timestamp { get; set; } = DateTime.Now;
    }

Chatbot

Chatbots are intelligent software solutions that replicate human-like conversations and can manage various tasks autonomously without requiring manual intervention.

You can connect the Chat component to various chatbot platforms including Microsoft Bot Framework, custom REST APIs, or third-party chatbot services. The component handles the user interface while your bot service processes messages and generates appropriate responses.

The Person to Bot demo showcases chatbot functionality. This demo utilizes a Telerik-hosted AI service solely for illustration purposes. In production environments, you should develop your own AI service tailored to your specific business domain, requirements, and organizational needs.

Suggested Actions

The Chat component supports suggested actions per message. This feature allows chatbots to provide quick reply options that users can click instead of typing responses manually. You can bind the SuggestedActionsField parameter to a property of your Chat model class to display these interactive buttons. The default assumed value for the property name is SuggestedActions.

RAZOR

<TelerikChat SuggestedActionsField="@nameof(MessageModel.MySuggestedActionsProperty)" />