Fix environment variable loading, add OpenAI Organization support

app/lib/getHtmlFromOpenAI.ts

@@ -8,13 +8,15 @@ import {
 export async function getHtmlFromOpenAI({
 	image,
 	apiKey,
+	openAIOrganizationId,
 	text,
 	grid,
 	theme = 'light',
 	previousPreviews = [],
 }: {
 	image: string
 	apiKey: string
+	openAIOrganizationId: string
 	text: string
 	theme?: string
 	grid?: {
@@ -102,13 +104,19 @@ export async function getHtmlFromOpenAI({
 
 	let json = null
 
+	const headers: Record<string, string> = {
+	  'Content-Type': 'application/json',
+	  Authorization: `Bearer ${apiKey}`,
+	};
+
+	if (openAIOrganizationId) {
+	  headers['OpenAI-Organization'] = openAIOrganizationId;
+	}
+
 	try {
 		const resp = await fetch('https://api.openai.com/v1/chat/completions', {
 			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${apiKey}`,
-			},
+			headers,
 			body: JSON.stringify(body),
 		})
 		json = await resp.json()

app/lib/makeReal.tsx

@@ -9,6 +9,7 @@ export async function makeReal(editor: Editor, apiKey: string) {
 	// Get the selected shapes (we need at least one)
 	const selectedShapes = editor.getSelectedShapes()
 
+	const openAIOrganizationId = process.env.OPENAI_ORGANIZATION_ID ?? ''
 	if (selectedShapes.length === 0) throw Error('First select something to make real.')
 
 	// Create the preview shape
@@ -58,6 +59,7 @@ export async function makeReal(editor: Editor, apiKey: string) {
 		const json = await getHtmlFromOpenAI({
 			image: dataUrl,
 			apiKey,
+			openAIOrganizationId,
 			text: getSelectionAsText(editor),
 			previousPreviews,
 			grid,

next.config.js

@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  env: {
+    OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+    OPENAI_ORGANIZATION_ID: process.env.OPENAI_ORGANIZATION_ID,
+  },
+}
 
 module.exports = nextConfig