KendoReact
React Chat
- Add an extensible, interactive chat interface to your React apps. Connect to AI or bot services, customize messages and templates, and deliver rich, accessible conversations.
- Part of the KendoReact library along with 120+ free and paid enterprise-grade UI components.
- Includes legendary technical support, design resources, comprehensive documentation, demos, and more!
-
Build Interactive, Rich Chat Experiences in React
The KendoReact Chat lets you build interactive, real-time conversations with rich media, voice input, and attachments. Connect effortlessly to AI services or bot frameworks, guide users with suggestions and quick actions, and fully customize messages, templates, and layouts—delivering a fast, accessible, and seamless chat experience for both developers and users.
-
Data Binding
The React Chat component supports flexible data binding from local storage, APIs, or bot services, with support for JSON data in any schema. You can easily map properties like
id,text,author, andtimestampto control how conversations appear, enabling smooth integration with customer support systems, AI bots, or real-time messaging services.
-
AI Services Integration
Easily connect the Chat component with AI and machine learning services to deliver intelligent, dynamic conversations. Using the
onSendMessageevent, you can capture user input, send it to your AI service, and display the response as a new message in real time. The component supports async handling for loading states and errors, ensuring smooth user experiences whether you’re integrating with OpenAI, Azure, or any other AI provider.
-
Chatbot Integration
Out-of-the-box integration with services like Google DialogFlow and Microsoft Bot Framework enables you to build automated conversations quickly. Chatbots can simulate human interaction, answer common questions, and perform tasks without human involvement, turning the Chat component into a powerful platform for guided, rule-based conversations.
-
Message Actions
The KendoReact Chat makes conversations more interactive by letting users copy, reply, delete, pin, or trigger custom commands through message actions. Whether shown in a context menu or a toolbar, these options give users a familiar, intuitive experience while giving you full flexibility to tailor actions to your app’s needs.
-
Message Appearance
The Chat component lets you style messages to fit your app’s design. You can enable expand/collapse so users can open long messages for full content or hide them to keep the chat easy to scan. With the
messageWidthModeproperty, you can also control message width—use the defaultstandardmode or make messages span the full chat container for a more flexible layout.See the React Chat appearance demo
-
Message Templates and Customization
The Chat component gives you complete control over how conversations look and feel, from message bubbles and timestamps to suggestion buttons, status indicators, headers, input areas, and even file attachments. This flexibility lets developers tailor every part of the experience while ensuring end users enjoy a chat interface that matches the design, tone, and interaction style of the app.
-
Predefined Suggestions
Predefined suggestions guide users through the conversation by offering quick-select options for common responses or phrases. These appear as part of the chat flow before the user replies, helping maintain consistent messaging and streamline input, especially in structured or scripted conversation tracks.
-
Suggested Actions
Suggested actions provide users with post-reply options to quickly take the next step after receiving a message. They appear above the message input for the last message only and can include replies, links, calls, or custom actions. By selecting a suggestion, users can instantly respond, trigger tasks, or navigate, improving the user experience by offering consistent, actionable choices without typing.
-
File Uploads and Media
The Chat component supports rich input and media sharing, including speech-to-text for hands-free messaging, file uploads with customizable behavior and UI, and flexible attachment layouts for images, videos, and documents. You get full control over configuration and display, while end users benefit from a seamless, accessible, and engaging chat experience.
See the React Chat speech-to-text demo
-
Keyboard Navigation
The Chat component lets users navigate and interact entirely via keyboard, ensuring full accessibility. Users can move through the message list, focus the input box, and trigger the send button using standard tab sequences. Within the message list, common keyboard shortcuts allow actions such as selecting messages, replying, or performing other message-level commands, making it possible to use the chat efficiently without a mouse.
-
Accessibility
The KendoReact Chat provides an inclusive experience with full accessibility support built in. It complies with WCAG 2.2 AA and Section 508, adheres to WAI-ARIA best practices, and facilitates proper focus management and keyboard navigation. The message list is configured as a live region, so screen readers can announce new messages, and the component is tested with tools and screen readers to deliver reliable accessibility across browsers.
