KendoReact Chat OverviewPremium
The KendoReact Chat component allows users to engage in real-time conversations with other users, chatbots or AI models.
Start Free Trial
Starting with v12.0.0, the Chat component has been completely redesigned. The properties and methods has been modified or replaced, requiring updates to existing implementations.
The KendoReact Chat component provides a flexible conversational interface that helps boost user engagement in web applications. It enables seamless real-time communication and supports advanced features, such as AI-powered conversation mode, speech-to-text button, attachments, predefined quick actions for the user. The Chat component is ideal for implementing customer support chatbots, live help desks, virtual assistants for booking or scheduling, interactive FAQ systems, and more.
The following example demonstrates the Chat component in action with its key features.
Key Features
- Data Binding—Bind the message list of the Chat to streaming data with support for both standard data structures and custom field mapping. Configure field mapping to integrate with existing APIs and databases that use different naming conventions.
- AI Service Integration—Configure the Chat to interact with a large language model through a standalone AI chat client service.
- File Uploads and Media—Enable comprehensive media sharing including file uploads, message attachments, and speech-to-text functionality for voice input.
- Message Toolbar & ContextMenu—Configure message context menus and toolbar actions for enhanced user interaction, including copy, reply, delete, and pin operations.
- Suggested Actions—Display quick actions such as preset replies for the last message.
- Predefined Suggestions—Implement predefined message suggestions and quick reply options to streamline user interactions.
- Message Customization & Templates—Customize the appearance of Chat messages by using templates.
- Keyboard Navigation—Access all Chat functions using keyboard navigation for enhanced accessibility.
- Accessibility—Built-in support for WAI-ARIA, Section 508, and WCAG 2.1 accessibility standards.
- Globalization—The Chat component provides several globalization options.