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

Angular Chat Integrations

The Kendo UI Chat component for Angular provides seamless integration capabilities with various external services and platforms, enabling you to build sophisticated conversational interfaces that can connect to AI services, chatbots, and other messaging platforms.

AI Service Integration

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

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

The following demo showcases 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 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 returned 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 transforms your Chat component into a powerful automated conversation platform.

Chatbots are automated programs designed to simulate human conversation and can handle a wide range of tasks without human intervention.