route.ts

app/api/open-ai/chat.ts

@@ -1,31 +0,0 @@
-import OpenAI from 'openai';
-
-export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const openai = new OpenAI({
-      apiKey: process.env.OPENAI_API_KEY
-    });
-
-    const { model, messages, functions } = req.body.payload;
-
-    try {
-      const chatCompletion = await openai.chat.completions.create({
-        model: model,
-        messages: messages,
-        functions: functions
-      });
-
-      const message = chatCompletion.choices[0].message;
-      res.status(200).json({ text: message });
-    } catch (error) {
-      if (error instanceof OpenAI.APIError) {
-        res.status(error.status).json({ error: error.message });
-      } else {
-        res.status(500).json({ error: error.message });
-      }
-    }
-  } else {
-    res.setHeader('Allow', ['POST']);
-    res.status(405).end(`Method ${req.method} Not Allowed`);
-  }
-}

app/api/open-ai/chat/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from 'next/server';
+import OpenAI from 'openai';
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  if (req.method === 'POST') {
+    const openai = new OpenAI({
+      apiKey: process.env.OPENAI_API_KEY
+    });
+
+    const { model, messages, functions } = await req.json();
+
+    try {
+      const chatCompletion = await openai.chat.completions.create({
+        model: model,
+        messages: messages,
+        functions: functions
+      });
+
+      const message = chatCompletion.choices[0].message;
+      return new NextResponse(JSON.stringify({ text: message }), {
+        status: 200
+      });
+    } catch (error) {
+      if (error instanceof OpenAI.APIError) {
+        return new NextResponse(JSON.stringify({ error: error.message }), {
+          status: 400
+        });
+      }
+      return new NextResponse(JSON.stringify({ error: error.message }), {
+        status: 500
+      });
+    }
+  }
+  const response = NextResponse.next();
+  response.headers.set('Allow', 'POST');
+
+  // Return a 405 response with a custom message
+  return new NextResponse(`Method ${req.method} Not Allowed`, {
+    status: 405,
+    headers: {
+      Allow: 'POST'
+    }
+  });
+}

app/pdf/page.tsx

@@ -1,12 +0,0 @@
-import dynamic from 'next/dynamic';
-
-// Dynamically import PDFTest with no SSR
-const DynamicPDFTest = dynamic(() => import('components/pdf/PDFTest'), {
-  ssr: false
-});
-
-export const runtime = 'edge';
-
-export default function Test() {
-  return <DynamicPDFTest />;
-}

app/sandbox/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+// const DynamicPDFTest = dynamic(() => import('components/pdf/PDFTest'), {
+//   ssr: false
+// });
+
+const GenerateStoryComponent = dynamic(() => import('components/generate/GenerateStoryComponent'), {
+  ssr: false
+});
+
+export const runtime = 'edge';
+
+export default function Test() {
+  return <GenerateStoryComponent />;
+}

components/generate/GenerateStoryComponent.tsx

@@ -0,0 +1,29 @@
+'use-client';
+import chatOperations from 'operations/chatOperations';
+import { useState } from 'react';
+
+export default function GenerateStory() {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState();
+
+  const getStory = async () => {
+    setLoading(true);
+    const data = await chatOperations.createStoryAsync();
+    setData(data);
+    setLoading(false);
+  };
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <button
+        onClick={getStory}
+        className="mb-10 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
+      >
+        Run A New Story
+      </button>
+
+      {loading ? <div className="mb10">Loading...</div> : null}
+      {JSON.stringify(data)}
+    </main>
+  );
+}

operations/chatOperations.ts

@@ -41,6 +41,7 @@ async function createStoryAsync(
     }
   ];
   const data = await post('/api/open-ai/chat', generateRequestPayload(messages));
+  // const data = await post('/api/revalidate', generateRequestPayload(messages));
   return getFunctionCallArguments<any>(data);
 }
 

operations/fetch.ts

@@ -5,7 +5,7 @@ async function post(path: string, payload?: any): Promise<any> {
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ payload })
+      body: JSON.stringify(payload)
     });
 
     if (!response.ok) {