feat: calls to OpenAI API are done in the frontend only

src/components/GameCreator.tsx

@@ -76,6 +76,8 @@ import { RunCircle } from "@mui/icons-material";
 import Introduction from "@/components/Introduction";
 import Instructions from "@/components/Instructions";
 import Examples from "@/components/Examples";
+import { toOpenAI } from "@/services/api";
+import { createClient } from "@/services/api/openai";
 const MonacoEditor = dynamic(import("@monaco-editor/react"), { ssr: false });
 
 export interface ShareProps {
@@ -276,11 +278,15 @@ export default function GameCreator() {
 									const formObject = Object.fromEntries(formData);
 									try {
 										setLoading(true);
-										const { data } = await axios.post(
-											"/api/generate",
-											formObject
+
+										const client = createClient(
+											formObject.openAIAPIKey as string
 										);
-										const answer = data;
+										const answer = await toOpenAI({
+											...formObject,
+											client,
+										});
+
 										setAnswers(previousAnswers => [answer, ...previousAnswers]);
 										setRunningId(answer.id);
 										setActiveId(answer.id);
@@ -296,11 +302,7 @@ export default function GameCreator() {
 								}}
 							>
 								<Stack sx={{ p: 1, pl: 0, gap: 2 }}>
-									<Secret
-										label="OpenAI API Key"
-										name="openAIAPIKey"
-										required={process.env.NODE_ENV === "production"}
-									/>
+									<Secret label="OpenAI API Key" name="openAIAPIKey" />
 
 									<Stack direction="row" spacing={1}>
 										<TextField

src/pages/api/generate.ts

@@ -1,12 +1,16 @@
 import { toOpenAI } from "@/services/api";
 import { NextApiRequest, NextApiResponse } from "next";
 import { AxiosError } from "axios";
+import process from "node:process";
+import { createClient } from "@/services/api/openai";
 
 export default async function handler(request: NextApiRequest, response: NextApiResponse) {
 	switch (request.method) {
 		case "POST":
 			try {
-				const answer = await toOpenAI(request.body);
+				const client = createClient(process.env.OPENAI_API_KEY as string);
+
+				const answer = await toOpenAI({ ...request.body, client });
 				return response.status(200).json(answer);
 			} catch (error) {
 				return response.status((error as AxiosError).status ?? 500).json(error);

src/services/api/index.ts

@@ -1,6 +1,5 @@
 import { ChatCompletionRequestMessage } from "openai";
 import { nanoid } from "nanoid";
-import { createClient, openai } from "@/services/api/openai";
 import { extractCode, miniPrompt } from "@/utils/prompt";
 import { systemMessage } from "@/constants";
 
@@ -11,16 +10,14 @@ export async function toOpenAI({
 	template = "",
 	model = "gpt-3.5-turbo",
 	maxTokens = "2048",
-	openAIAPIKey = "",
+	client = null,
 }) {
-	const prompt_ = prompt.trim();
-
-	let client = openai;
-
-	if (openAIAPIKey !== "") {
-		client = createClient(openAIAPIKey);
+	if (client === null) {
+		throw new Error("OpenAI client is not defined");
 	}
 
+	const prompt_ = prompt.trim();
+
 	const nextMessage: ChatCompletionRequestMessage = {
 		role: "user",
 		content: miniPrompt`
@@ -53,8 +50,6 @@ export async function toOpenAI({
 		const { message } = response.data.choices[0];
 
 		if (message) {
-			console.log("ORIGINAL OUTPUT");
-			console.log(message.content);
 			return {
 				...message,
 				content: extractCode(message.content).replace(

src/services/api/openai.ts

@@ -1,10 +1,4 @@
 import { Configuration, OpenAIApi } from "openai";
-import process from "node:process";
-
-export const configuration = new Configuration({
-	apiKey: process.env.OPENAI_API_KEY,
-});
-export const openai = new OpenAIApi(configuration);
 
 export const createClient = (apiKey: string) => {
 	return new OpenAIApi(new Configuration({ apiKey }));