Kendo UI for Vue
Vue AI Prompt
- Create custom AI commands, stream responses in real time, and format outputs with the Vue AI Prompt for a flexible, natural user experience.
- Part of the Kendo UI for Vue library along with 110+ professionally-designed components.
- Includes support, documentation, demos, virtual classrooms, learning resources and more!
-
Easily Integrate GenAI Services into Your Vue App
With the Vue 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. Customize buttons, inputs, 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.
-
Streaming AI Responses
The Vue 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.See the Vue AI Prompt streaming demo
-
OpenAI Integration
The Vue AI Prompt makes it simple to connect your app to services like OpenAI or Azure OpenAI. By hooking into the
onPromptRequestevent, you can pass user input to your AI service and display the response right in the component. Whether you’re building with OpenAI or Azure, integration is straightforward—configure your keys and model, and the component handles the flow, allowing you to focus on delivering AI-powered features to your users. -
Suggestions
The component enables you to provide sample prompt suggestions that can be submitted to the LLM with a single click. Simply set a custom suggestionsList and pass it to the promptSuggestions prop of the AIPromptView component.
-
Custom Templates
Get more flexibility by customizing the toolbar and tailoring views to your specific needs. Define custom tools inside the AI Prompt toolbar or build a custom
PromptContentview to match your design or workflow. You can replace the default generate button and input with custom components and enable voice input through the integrated Speech-to-Text component. In addition, 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. -
Commands
The Kendo UI for Vue AI Prompt empowers you to easily define custom commands that can be used by users to fine-tune a response.
-
Events
To ensure smooth interaction, the component emits several events that enable you to control its behavior upon user interaction:
onActiveviewchange– fires when the active view is changedonCommandexecute– fires each time a user clicks a command in the Command viewonPromptrequest– fires when the user clicks the Generate button in the Prompt view
-
Globalization and RTL Support
The Kendo UI for Vue AI Prompt component has built-in localization and right-to-left (RTL) support to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.
Get Started with Kendo UI for Vue
