KendoReact
React AI Prompt
- Create custom AI commands, stream responses in real time, and format outputs with the KendoReact AI Prompt for a flexible, natural user experience.
- 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!
-
Seamlessly Integrate GenAI Services into Your React App
With the KendoReact AI Prompt, you let your users write prompts and interact with AI-generated responses directly in your app. Stream responses in real time for immediate feedback, and connect OpenAI to power intelligent suggestions. Enable full keyboard navigation and built-in accessibility so everyone can work efficiently. You can customize buttons, inputs, output cards, and views, and integrate the Speech-to-Text component to let users dictate prompts. This gives your app a flexible, responsive AI experience that feels natural and tailored to your users’ workflow.
See the React AI Prompt overview demo
-
Streaming AI Responses
The KendoReact AI Prompt can stream responses in real time, letting users see content as it’s generated. Enable streaming, handle generation with
onPromptRequestevent, and stop it withonCancel, while updating the output progressively. This keeps users engaged, especially for long responses or chat-like interactions where immediate feedback matters.
-
AI Services Integration
The KendoReact AI Prompt makes it easy to connect your app to any AI service. Using the
onPromptRequestevent, you can send user input to your AI API and display responses directly in the component. Integration is straightforward—configure your keys and model, and the component handles the flow, letting you focus on delivering AI-powered features to your users.See the React AI Prompt integration demo
-
Keyboard Navigation
prompts, insert new lines, and close the popup. The tab sequence includes the expand header and suggestion list, so users can navigate suggestions smoothly without leaving the keyboard, keeping interactions quick and uninterrupted. Keyboard navigation works whenever the popup is open.
-
Accessibility
Deliver inclusive experiences with WCAG 2.2 AA and Section 508 support. Follow WAI-ARIA best practices and enable full keyboard navigation that works seamlessly with popular screen readers, giving users with disabilities complete control over the component. You can also validate your configuration with tools like Axe Core and recommended accessibility swatches, ensuring your AI-powered features are usable and compliant out of the box.
-
Customization
The KendoReact AI Prompt is highly flexible, allowing you to tailor its interface and behavior to fit seamlessly into your application. You can replace the default generate button and input with custom components, enable voice input through the integrated Speech-to-Text component, design custom views and toolbar items, and fully control the layout of AI output cards. You can leverage structured response handling events to manipulate or format output before it reaches users. This lets you integrate third-party libraries for custom styling, rich text, or specialized formats, giving you full control over both the input experience and the generated results.
-
Suggestions
The AI Prompt component enables you to generate custom suggestions that will be prompted to the user by simply setting a custom
suggestionsListand passing it to thepromptSuggestionsprop. -
Commands
The component empowers you to easily define custom prompt commands for the
AIPromptCommandsView. -
Events
To ensure smooth interaction, the KendoReact AI Prompt emits a number of events that enable you to control its behavior upon user interaction.
