⚡ (openai) Use Vercel's AI SDK for streaming

apps/viewer/package.json

@@ -19,6 +19,7 @@
     "@typebot.io/js": "workspace:*",
     "@typebot.io/prisma": "workspace:*",
     "@typebot.io/react": "workspace:*",
+    "ai": "^2.1.3",
     "aws-sdk": "2.1384.0",
     "bot-engine": "workspace:*",
     "cors": "2.8.5",
@@ -30,6 +31,7 @@
     "nextjs-cors": "2.1.2",
     "nodemailer": "6.9.2",
     "openai": "3.2.1",
+    "openai-edge": "^1.1.0",
     "qs": "6.11.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/viewer/src/features/blocks/integrations/openai/getChatCompletionStream.ts

@@ -6,10 +6,12 @@ import {
   OpenAICredentials,
 } from '@typebot.io/schemas/features/blocks/integrations/openai'
 import { SessionState } from '@typebot.io/schemas/features/chat'
-import type {
+import { OpenAIStream } from 'ai'
+import {
   ChatCompletionRequestMessage,
-  CreateChatCompletionRequest,
-} from 'openai'
+  Configuration,
+  OpenAIApi,
+} from 'openai-edge'
 
 export const getChatCompletionStream =
   (conn: Connection) =>
@@ -37,19 +39,18 @@ export const getChatCompletionStream =
       options.advancedSettings?.temperature
     )
 
-    const res = await fetch('https://api.openai.com/v1/chat/completions', {
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${apiKey}`,
-      },
-      method: 'POST',
-      body: JSON.stringify({
-        messages,
-        model: options.model,
-        temperature,
-        stream: true,
-      } satisfies CreateChatCompletionRequest),
+    const config = new Configuration({
+      apiKey,
     })
 
-    return res.body
+    const openai = new OpenAIApi(config)
+
+    const response = await openai.createChatCompletion({
+      model: options.model,
+      temperature,
+      stream: true,
+      messages,
+    })
+
+    return OpenAIStream(response)
   }

apps/viewer/src/pages/api/integrations/openai/streamer.ts

@@ -1,6 +1,7 @@
 import { getChatCompletionStream } from '@/features/blocks/integrations/openai/getChatCompletionStream'
 import { connect } from '@planetscale/database'
 import { IntegrationBlockType, SessionState } from '@typebot.io/schemas'
+import { StreamingTextResponse } from 'ai'
 import { ChatCompletionRequestMessage } from 'openai'
 
 export const config = {
@@ -15,8 +16,7 @@ const handler = async (req: Request) => {
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Methods': 'POST',
         'Access-Control-Expose-Headers': 'Content-Length, X-JSON',
-        'Access-Control-Allow-Headers':
-          'apikey,X-Client-Info, Content-Type, Authorization, Accept, Accept-Language, X-Authorization',
+        'Access-Control-Allow-Headers': '*',
       },
     })
   }
@@ -66,12 +66,10 @@ const handler = async (req: Request) => {
     messages
   )
 
-  if (!stream) return new Response('Missing credentials', { status: 400 })
+  if (!stream) return new Response('Could not create stream', { status: 400 })
 
-  return new Response(stream, {
-    status: 200,
+  return new StreamingTextResponse(stream, {
     headers: {
-      'Content-Type': 'application/json; charset=utf-8',
       'Access-Control-Allow-Origin': '*',
     },
   })