diff --git a/README.md b/README.md index 21d93aa..efc07fb 100644 --- a/README.md +++ b/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): diff --git a/apps/promptions-chat/.env.example b/apps/promptions-chat/.env.example index 383181f..0195cd5 100644 --- a/apps/promptions-chat/.env.example +++ b/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 diff --git a/apps/promptions-chat/src/services/ChatService.ts b/apps/promptions-chat/src/services/ChatService.ts index ebf5d0c..e0bcc43 100644 --- a/apps/promptions-chat/src/services/ChatService.ts +++ b/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,9 +12,7 @@ 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( @@ -22,11 +20,21 @@ export class ChatService { ); } - 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( diff --git a/apps/promptions-chat/src/vite-env.d.ts b/apps/promptions-chat/src/vite-env.d.ts index c8d8de6..e7a0439 100644 --- a/apps/promptions-chat/src/vite-env.d.ts +++ b/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... } diff --git a/apps/promptions-image/.env.example b/apps/promptions-image/.env.example index 383181f..0cbf61f 100644 --- a/apps/promptions-image/.env.example +++ b/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 diff --git a/apps/promptions-image/src/services/ImageService.ts b/apps/promptions-image/src/services/ImageService.ts index 3a668c0..142958e 100644 --- a/apps/promptions-image/src/services/ImageService.ts +++ b/apps/promptions-image/src/services/ImageService.ts @@ -1,4 +1,4 @@ -import OpenAI from "openai"; +import OpenAI, { AzureOpenAI } from "openai"; import { ImageGenerationParams, GeneratedImage } from "../types"; export class ImageService { @@ -6,9 +6,7 @@ export class ImageService { 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( @@ -16,11 +14,21 @@ export class ImageService { ); } - 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 { diff --git a/apps/promptions-image/src/vite-env.d.ts b/apps/promptions-image/src/vite-env.d.ts index c8d8de6..f77a8c0 100644 --- a/apps/promptions-image/src/vite-env.d.ts +++ b/apps/promptions-image/src/vite-env.d.ts @@ -1,10 +1,13 @@ -/// - -interface ImportMetaEnv { - readonly VITE_OPENAI_API_KEY: string; - // more env variables... -} - -interface ImportMeta { - readonly env: ImportMetaEnv; -} +/// + +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; +}