DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Chat - AI and Chatbot Integration

This demo uses an Azure OpenAI service and the DevExtreme Chat component to create a chatbot UI. You can integrate Chat with various AI services, including OpenAI, Google Dialogflow, and Microsoft Bot Framework.

Handling dataSource (reloadOnChange: false)

The Chat component's dataSource is a CustomStore that implements its own load and insert functions. The Chat deactivates reloadOnChange to push updates directly into the store and update the conversation manually. See the onMessageEntered event handler and the processMessageSending function to review the code that manages data transfer between the Chat and its data store.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

Custom Message Template

The Chat specifies a messageTemplate that displays "Copy" and "Regenerate" buttons in bot messages.

Response Format Conversion: Markdown to HTML

The AI model outputs responses in Markdown, while the Chat requires HTML output. This example uses the unified plugin library to convert response content. Review convertToHtml function code for implementation details.

Default Caption Customization

The Chat component in this demo displays modified captions when the conversation is empty. The demo uses localization techniques to alter built-in text.