Create a real-time chatbot with streaming and OpenAI

info

For general concepts around streaming in Superblocks, see Streaming Applications.

This guide explains how to create a chatbot in Superblocks that streams messages back from OpenAI as they're received in real time.

1. Create a temporary state variable called ChatHistory with a default value of an empty array.

   

2. Add a Chat component and set its Message History Data property to the value of the state variable, {{ChatHistory.value}}.

   

3. Create a backend API with a single Stream block. Here we've named the API OpenAI_streaming and the Stream block chatStream. Since no custom processing will be needed, disable Process messages. For more details on when and how to add custom processing, see the Stream block docs.

   

4. Add an OpenAI step to the Trigger section of the Stream block. Here we've named the step callOpenAI. Configure the OpenAI step as follows:

   • Set Action to "Generate ChatGPT Response"
   • Set Prompt to {{Chat1.userMessageText}}
   • Set Message History to {{Chat1.messageHistory}}
     

5. Configure the response block of the API.

   
   • Set Response type to "Stream"
   • Under Frontend Event Handlers, add an onMessage event handler that sets the previously created ChatHistory state variable with the Set State Variable action. Use the following JavaScript inside bindings as the Value of the state variable.

     {{[
       ...ChatHistory.value.slice(0, ChatHistory.value.length - 1),
       {
        role: "assistant",
        name: "AI",
        avatar: "https://superblocks.s3.us-west-2.amazonaws.com/img/integrations/chat_gpt_logo.png",
        content: ChatHistory.value[ChatHistory.value.length - 1].content + message.value ?? ""
       }
     ]}}

6. Navigate back to the frontend and configure the Chat component's onMessageSend event handler.

   
   • Set the ChatHistory state variable to the following JavaScript inside bindings.

     {{[
       ...ChatHistory.value,
       {
          role: "user",
          name: "You",
          content: Chat1.userMessageText
       }, {
          role: "assistant",
          name: "AI",
          avatar:"https://superblocks.s3.us-west-2.amazonaws.com/img/integrations/chat_gpt_logo.png",
          content: ""
       }
     ]}}
   • Set the Show Pending Message toggle to false.
   • Run the previously created streaming backend API.

7. Deploy the app and start chatting to see the Chat component stream each message back in real time!