Use AzureOpenAI client and clean up env config in chat & image apps

README.md

@@ -123,6 +123,18 @@ $env:VITE_OPENAI_API_KEY="your_openai_api_key_here" ; yarn workspace @promptions
 $env:VITE_OPENAI_API_KEY="your_openai_api_key_here" ; yarn workspace @promptions/promptions-image dev
 ```
 
+#### Optional configuration
+
+Both apps read these additional `VITE_*` variables from their respective `.env` files. They're all optional — leave them unset to use the standard OpenAI API.
+
+| Variable                  | Description                                                                         | Default   |
+| ------------------------- | ----------------------------------------------------------------------------------- | --------- |
+| `VITE_OPENAI_MODEL`       | Chat model used for completions. The image-generation model is selected in the UI.  | `gpt-4.1` |
+| `VITE_OPENAI_BASE_URL`    | Custom endpoint. Set this to use Azure OpenAI or another OpenAI-compatible service. | _(unset)_ |
+| `VITE_OPENAI_API_VERSION` | API version. Required when `VITE_OPENAI_BASE_URL` points at Azure OpenAI.           | _(unset)_ |
+
+When `VITE_OPENAI_BASE_URL` is set, the apps use the Azure OpenAI client; otherwise they use the standard OpenAI client.
+
 Start the dev servers:
 
 - Chat application (http://localhost:3003):

apps/promptions-chat/.env.example

@@ -1,10 +1,10 @@
-# Copy this file to .env
-
-# Required: Set your API key
+# Copy this file to .env and add your OpenAI API key
 VITE_OPENAI_API_KEY=your_openai_api_key_here
-
-# Optional: Set base URL for the OpenAI-compatible API endpoint (if blank, defaults to OpenAI API endpoint)
-# VITE_OPENAI_BASE_URL=
-
-# Optional: Set model to use (if blank, defaults to gpt-3.5-turbo)
-# VITE_OPENAI_MODEL=
+# Optional: only set for Azure or other custom OpenAI-compatible endpoints.
+# Omit for standard OpenAI API usage.
+# VITE_OPENAI_BASE_URL=https://your-resource.openai.azure.com
+# Optional: API version is typically Azure-specific/custom-endpoint specific.
+# Omit for standard OpenAI API usage.
+# VITE_OPENAI_API_VERSION=2024-12-01-preview
+# Optional: override the model used for chat completions (defaults to gpt-4.1).
+# VITE_OPENAI_MODEL=gpt-4.1

apps/promptions-chat/src/services/ChatService.ts

@@ -1,4 +1,4 @@
-import OpenAI from "openai";
+import OpenAI, { AzureOpenAI } from "openai";
 
 interface ChatMessage {
     role: "user" | "assistant" | "system";
@@ -12,21 +12,29 @@ export class ChatService {
     constructor() {
         // In a real application, you'd want to handle the API key more securely
         // For development, you can set VITE_OPENAI_API_KEY in your .env file
-        const apiKey = import.meta.env.VITE_OPENAI_API_KEY || process.env.OPENAI_API_KEY;
-        const baseURL = import.meta.env.VITE_OPENAI_BASE_URL || process.env.OPENAI_BASE_URL;
-        this.model = import.meta.env.VITE_OPENAI_MODEL || process.env.OPENAI_MODEL || "gpt-3.5-turbo";
+        const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
 
         if (!apiKey) {
             throw new Error(
                 "OpenAI API key is required. Please set VITE_OPENAI_API_KEY in your environment variables.",
             );
         }
 
-        this.client = new OpenAI({
-            apiKey,
-            baseURL,
-            dangerouslyAllowBrowser: true, // Only for demo purposes - use a backend in production
-        });
+        const baseURL = import.meta.env.VITE_OPENAI_BASE_URL;
+        const apiVersion = import.meta.env.VITE_OPENAI_API_VERSION;
+        this.model = import.meta.env.VITE_OPENAI_MODEL || "gpt-4.1";
+
+        this.client = baseURL
+            ? new AzureOpenAI({
+                  apiKey,
+                  endpoint: baseURL,
+                  apiVersion,
+                  dangerouslyAllowBrowser: true, // Only for demo purposes - use a backend in production
+              })
+            : new OpenAI({
+                  apiKey,
+                  dangerouslyAllowBrowser: true, // Only for demo purposes - use a backend in production
+              });
     }
 
     async streamChat(

apps/promptions-chat/src/vite-env.d.ts

@@ -2,6 +2,9 @@
 
 interface ImportMetaEnv {
     readonly VITE_OPENAI_API_KEY: string;
+    readonly VITE_OPENAI_BASE_URL?: string;
+    readonly VITE_OPENAI_API_VERSION?: string;
+    readonly VITE_OPENAI_MODEL?: string;
     // more env variables...
 }
 

apps/promptions-image/.env.example

@@ -1,10 +1,11 @@
-# Copy this file to .env
-
-# Required: Set your API key
+# Copy this file to .env and add your OpenAI API key
 VITE_OPENAI_API_KEY=your_openai_api_key_here
-
-# Optional: Set base URL for the OpenAI-compatible API endpoint (if blank, defaults to OpenAI API endpoint)
-# VITE_OPENAI_BASE_URL=
-
-# Optional: Set model to use (if blank, defaults to gpt-3.5-turbo)
-# VITE_OPENAI_MODEL=
+# Optional: only set for Azure or other custom OpenAI-compatible endpoints.
+# Omit for standard OpenAI API usage.
+# VITE_OPENAI_BASE_URL=https://your-resource.openai.azure.com
+# Optional: API version is typically Azure-specific/custom-endpoint specific.
+# Omit for standard OpenAI API usage.
+# VITE_OPENAI_API_VERSION=2024-12-01-preview
+# Optional: override the chat model used for prompt-related completions (defaults to gpt-4.1).
+# The image generation model itself is selected in the UI.
+# VITE_OPENAI_MODEL=gpt-4.1

apps/promptions-image/src/services/ImageService.ts

@@ -1,26 +1,34 @@
-import OpenAI from "openai";
+import OpenAI, { AzureOpenAI } from "openai";
 import { ImageGenerationParams, GeneratedImage } from "../types";
 
 export class ImageService {
     private client: OpenAI;
     private chatModel: string;
 
     constructor() {
-        const apiKey = import.meta.env.VITE_OPENAI_API_KEY || process.env.OPENAI_API_KEY;
-        const baseURL = import.meta.env.VITE_OPENAI_BASE_URL || process.env.OPENAI_BASE_URL;
-        this.chatModel = import.meta.env.VITE_OPENAI_MODEL || process.env.OPENAI_MODEL || "gpt-3.5-turbo";
+        const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
 
         if (!apiKey) {
             throw new Error(
                 "OpenAI API key is required. Please set VITE_OPENAI_API_KEY in your environment variables.",
             );
         }
 
-        this.client = new OpenAI({
-            apiKey,
-            baseURL,
-            dangerouslyAllowBrowser: true, // Only for demo purposes - use a backend in production
-        });
+        const baseURL = import.meta.env.VITE_OPENAI_BASE_URL;
+        const apiVersion = import.meta.env.VITE_OPENAI_API_VERSION;
+        this.chatModel = import.meta.env.VITE_OPENAI_MODEL || "gpt-4.1";
+
+        this.client = baseURL
+            ? new AzureOpenAI({
+                  apiKey,
+                  endpoint: baseURL,
+                  apiVersion,
+                  dangerouslyAllowBrowser: true, // Only for demo purposes - use a backend in production
+              })
+            : new OpenAI({
+                  apiKey,
+                  dangerouslyAllowBrowser: true, // Only for demo purposes - use a backend in production
+              });
     }
 
     async generateImage(params: ImageGenerationParams, options?: { signal?: AbortSignal }): Promise<GeneratedImage[]> {

apps/promptions-image/src/vite-env.d.ts

@@ -1,10 +1,13 @@
-/// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-    readonly VITE_OPENAI_API_KEY: string;
-    // more env variables...
-}
-
-interface ImportMeta {
-    readonly env: ImportMetaEnv;
-}
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_OPENAI_API_KEY: string;
+    readonly VITE_OPENAI_BASE_URL?: string;
+    readonly VITE_OPENAI_API_VERSION?: string;
+    readonly VITE_OPENAI_MODEL?: string;
+    // more env variables...
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}