New to Kendo UI for Angular? Start a free 30-day trial

Angular Chat Integrations

Updated on Dec 8, 2025

The Kendo UI Chat component for Angular connects with various external services and platforms. You can build conversational interfaces that link to AI services, chat bots, and other messaging platforms.

AI Service Integration

AI Service Integration lets you connect your Chat component with modern artificial intelligence and machine learning services to create intelligent conversations.

The example uses a Telerik-hosted AI service for demonstration purposes only. For production applications, implement your own AI service that understands your specific domain, data, and business requirements.

The following demo shows the Chat integration with an AI service.

Change Theme

Theme

Loading ...

To integrate your Chat component with an AI service, follow these steps:

Set up the Chat component and configure the basic message handling. Refer to the Data Binding article for more details.
Create an Angular service to handle communication with your AI endpoint.

Handle the sendMessage event of the Chat, send the required prompt to your AI service, and update the Chat messages with the result.

public sendMessage(e: SendMessageEvent): void {
  // Add user message to chat
  this.addMessage(e.message);

  // Show typing indicator
  this.showTyping();

  // Send to AI service
  this.aiService.sendMessage(e.message.text).subscribe(response => {
    this.hideTyping();
    this.addMessage({
      author: this.bot,
      text: response.reply,
      timestamp: new Date()
    });
  });
}

Configure your AI service endpoint to accept messages and return appropriate responses.

Chatbot Integration

Chatbot integration turns your Chat component into a powerful automated conversation platform.

Chatbots are automated programs that simulate human conversation. They handle a wide range of tasks without human intervention.