Kendo UI for Angular
Angular Inline AI Prompt
- • Add contextual AI assistance directly inside your UI • Stream responses with built-in commands and actions • Plug in your own AI service, template the output and track events
- Part of the Kendo UI for Angular library along with 110+ professionally-designed components.
- Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
-
Bring AI assistance inline with your content
The Kendo UI for Angular Inline AI Prompt component provides a focused popup for composing prompts and reading AI responses without switching context. Bind the prompt output from your service, enable streaming, add predefined commands and actions, then style the popup to match your app. Built for Angular, the component integrates with Conversational UI and supports accessibility, keyboard navigation and theming.
-
Prompt output binding
Bind the component to your AI service by providing an InlineAIPromptOutput object that contains the prompt and generated output. Keep the prompt text in the editor with promptValue and update the bound object when your service returns results.
See the Angular Inline AI Prompt configuration demo.
-
Prompt commands
Offer one-click actions like fix grammar, rewrite or explain through promptCommands. Handle commandExecute to route the selected command to your AI endpoint or app logic.
See the Angular Inline AI Prompt configuration demo.
-
Output actions
Let users copy, retry or discard results with built-in output actions, or register custom ones. Use outputActions to define the list and handle outputActionClick to implement behavior.
See the Angular Inline AI Prompt configuration demo.
-
Popup appearance
Control where and how the popup renders with popupSettings including alignment, collision handling, animation and custom CSS class. Position the prompt next to any anchor for an unobtrusive inline experience.
See the Angular Inline AI Prompt configuration demo.
-
Speech to text
Enable voice input for prompts by turning on enableSpeechToText or passing SpeechToTextButtonSettings. Combine with your preferred provider when you need advanced recognition.
See the Angular Inline AI Prompt configuration demo.
-
Streaming responses
Display tokens as they arrive so users see the response build in real time. Toggle streaming, start work on promptRequest and stop on promptRequestCancel to match your AI service behavior.
-
Templates
Customize the output card with an ng-template and kendoInlineAIPromptOutputTemplate. Present branded layouts, add links or embed other components in the response area.
See the Angular Inline AI Prompt templates demo.
-
Events
Subscribe to events like promptRequest, promptRequestCancel, commandExecute, outputActionClick and close to implement analytics and guardrails. Build tailored flows that match your product’s content and safety requirements.
See the Angular InlineAIPrompt events demo.
-
Keyboard navigation
Support efficient input with shortcuts for sending prompts, inserting new lines and closing the popup. Keyboard navigation works whenever the popup is open.
See the Angular Inline AI Prompt keyboard navigation demo.
-
Accessibility
Deliver inclusive experiences with WCAG 2.2 AA and Section 508 support. Validate your configuration with tools like Axe Core and recommended A11y swatches.
See the Angular Inline AI Prompt accessibility demo.
Get Started with Kendo UI for Angular
