This is a minimial example of using Remix with OpenAI's streaming API for completions. There are many ways to do this, but this example uses:
- OpenAI npm module: The official library. It uses Axios, and you could instead justhit the REST APIs directly.
eventStreamfrom remix-utils is used to return a Response with the right headers for an SSE.- EventSource is used to listen for messages from the server. Could also use
useEventSourcefromremix-utilsinstead. - The index page contains the form which simply sends the input query to a resource route at
/completion. That resource route does the OpenAI call (using gpt-3.5-turbo but you can change to gpt-4 if you fancy, withstream:true)
You must set the OPENAI_API_KEY environment variable before you npm run dev.