Streaming AI Responses with InlineAIPrompt

The Kendo UI for jQuery InlineAIPrompt component supports streaming responses, allowing users to see AI-generated content as it is being produced. This feature enhances the user experience by providing immediate feedback and a more interactive interface.

Streaming is particularly useful when:

• Working with long-form AI responses that take several seconds to generate.
• Creating inline editing interfaces where users expect real-time feedback.
• Integrating with AI services that support chunked responses.
• Enhancing user engagement in contextual AI assistance scenarios.

Configuration

To enable streaming in the InlineAIPrompt component, follow these steps:

1. Enable the isStreaming property of the InlineAIPrompt. This property controls whether the component displays the Stop Generation button and indicates that a response is being streamed.

   js

   $("#inlineaiprompt").kendoInlineAIPrompt({
       isStreaming: true
   })

2. Handle the promptRequest event to start streaming. When the user clicks the Send button or presses Enter, the promptRequest event is fired.

   js

   promptRequest: async function(ev) {
       const inlineAiPromptInstance = this;
       if (ev.prompt && ev.prompt.trim()) {
           // handle the prompt and use it to start the streaming
       } else {
           console.log("Prompt is empty, not sending request.");
       }
   },

3. Utilize the startStreaming, stopStreaming methods to start and stop the prompt animation for streaming. To update the prompt output content, use the updatePromptOutputContent

   js

   promptRequest: async function(ev) {
       const inlineAiPromptInstance = this;
       if (ev.prompt && ev.prompt.trim()) {
           const promptText = ev.prompt.trim();
           const currentOutputId = kendo.guid();
           try {
               const finalText = await apiClient.sendMessage(promptText, {
                   onStart: (data) => {
                       inlineAiPromptInstance.startStreaming();
                   },
                   onProgress: (accumulatedText, data) => {
                       inlineAiPromptInstance.updatePromptOutputContent(accumulatedText);
                   },
                   onComplete: (finalText, data) => {
                       inlineAiPromptInstance.stopStreaming();
                   }
               });
           } catch (error) {
               console.log(error)
           }
       } else {
           console.log("Prompt is empty, not sending request.");
       }
   },

See Also

• Streaming Demo of the InlineAIPrompt
• JavaScript API Reference of the InlineAIPrompt