72
Views
2
Comments
POST SSE with OpenAI API for typewriter effect
Question
Application Type
Reactive

Hi everyone,


I'm currently trying to implement the typewriter-effect for my ChatGPT-inspired reactive Outsystems application.

The OpenAI API supports Server Sent Events (SSE) for the endpoint: /v1/chat/completions. This is enabled by setting the stream attribute to true, as in the following example request:

{    

"model": "gpt-3.5-turbo", 

"messages": [{"role": "user", "content": "Hello!"}],   

 "stream": true

}

The response will then be SSE chunks that can be iterated over and added to the ChatGPT answer. The typewriter effect can be achieved by adding a characters in chunks with JavaScript and using the CSS-animation "cursorBlink" for the element that displays the text. 

A solution I found creates a Flask/Django server that proxy the OpenAI SSE back to the client: https://betterprogramming.pub/openai-sse-sever-side-events-streaming-api-733b8ec32897

Are there any ways of implementing this proxy-solution for handling the SSE in OutSystems? Or will I eventually have to make my own server as the example above and then handle the SSE with forge components like SSE Push Event Hub?




2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

Hi Eivind,

This reads as a bit over-complicated solution, to simulate a typewriter effect to display a response you get back from ChatGPT.

Are you aware that there are several typewriter components available in the Forge, with demo app (Tryout)?

Maybe you can use them.

Regards,

Daniel

2026-03-02 11-55-26
Mahdi Ben Dhafer

I want to achieve the same thing if anyone has any ideas. 

And to be clear, I want the typewriter effect for response speed too not just a visual thing.. So ideally it would show the chunks as they come from the openAi API and not do it after getting the full response from the API. 


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.