From 1e9afcca5f6ad086ab6a32686beb8ba932e487fd Mon Sep 17 00:00:00 2001 From: Jack Williams Date: Thu, 30 Apr 2026 13:10:27 +0200 Subject: [PATCH 1/2] Use AzureOpenAI client and clean up env config in chat & image apps - Switch to the SDK's AzureOpenAI client when VITE_OPENAI_BASE_URL is set so Azure auth uses the supported single api-key header path with api-version, instead of the base OpenAI client with a manually-injected baseURL. - Drop the dead process.env.OPENAI_* fallbacks. vite.config.ts defines process.env as {}, so those reads were inlined as undefined at build time and never did anything. - Read VITE_OPENAI_API_VERSION (new) and use it when constructing the Azure client. Update vite-env.d.ts on both apps with the new optional types. - Default chat model is now gpt-4.1 to match the rest of the codebase. - Mirror the .env.example layout across both apps and comment out the optional vars so copying .env.example does not silently activate the Azure path with a placeholder URL. - Document the optional VITE_OPENAI_* configuration in the README. Co-authored-by: Jace Medlin <32235747+based-jace@users.noreply.github.com> --- README.md | 12 +++++++++ apps/promptions-chat/.env.example | 13 +++++++--- .../src/services/ChatService.ts | 26 ++++++++++++------- apps/promptions-chat/src/vite-env.d.ts | 3 +++ apps/promptions-image/.env.example | 14 +++++++--- .../src/services/ImageService.ts | 26 ++++++++++++------- apps/promptions-image/src/vite-env.d.ts | 3 +++ 7 files changed, 71 insertions(+), 26 deletions(-) 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..e32809a 100644 --- a/apps/promptions-chat/.env.example +++ b/apps/promptions-chat/.env.example @@ -3,8 +3,13 @@ # Required: Set your 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: 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: Set model to use (if blank, defaults to gpt-3.5-turbo) -# VITE_OPENAI_MODEL= +# Optional: API version is typically Azure-specific/custom-endpoint specific. +# Required when VITE_OPENAI_BASE_URL points at Azure OpenAI. +# VITE_OPENAI_API_VERSION=2024-12-01-preview + +# Optional: override the chat model (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..be74099 100644 --- a/apps/promptions-image/.env.example +++ b/apps/promptions-image/.env.example @@ -3,8 +3,14 @@ # Required: Set your 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: 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: Set model to use (if blank, defaults to gpt-3.5-turbo) -# VITE_OPENAI_MODEL= +# Optional: API version is typically Azure-specific/custom-endpoint specific. +# Required when VITE_OPENAI_BASE_URL points at Azure OpenAI. +# 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 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..e7a0439 100644 --- a/apps/promptions-image/src/vite-env.d.ts +++ b/apps/promptions-image/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... } From 0e4bfc146e9bd26a5bdf518bbe293e7748bb71c3 Mon Sep 17 00:00:00 2001 From: Jace Medlin <32235747+based-jace@users.noreply.github.com> Date: Mon, 4 May 2026 04:46:01 -0400 Subject: [PATCH 2/2] Updated documentation and .env.example to include model limitations and API versatility (#38) * Updated documentation and .env.example to include model limitations and API versatility * Ran prettier on README --------- Co-authored-by: Jace Medlin (AIM Consulting Addison Group) --- README.md | 53 +++++++++++++++++++++++-------- apps/promptions-chat/.env.example | 3 +- apps/promptions-chat/README.md | 48 ++++++++++++++++++---------- 3 files changed, 73 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index efc07fb..60768b2 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Before building and running this project, ensure you have: - **Node.js** (v18 or higher) - **Corepack** (included with Node.js v16.10+, enables automatic Yarn management) - **TypeScript** (v5.0 or higher) -- **OpenAI API Key** (for chat and image generation features) +- An **OpenAI API key** _or_ an **Azure OpenAI** resource (API key, endpoint, and a deployment) for chat and image generation features ### Setting up Corepack (Recommended) @@ -97,44 +97,69 @@ yarn build ### 3. Run the applications (and set your API key) -Set your OpenAI API key so the apps can call the OpenAI APIs. +The apps can call either the **standard OpenAI API** or your own **Azure OpenAI**-hosted models. Configure whichever you have access to via environment variables — the same `VITE_OPENAI_API_KEY` variable is used in both cases (it holds either your OpenAI key or your Azure OpenAI key). Option A — .env files (recommended for local development): -- Create `apps/promptions-chat/.env` with: +**Standard OpenAI** + +- Create `apps/promptions-chat/.env` (and `apps/promptions-image/.env`) with: ```dotenv VITE_OPENAI_API_KEY=your_openai_api_key_here + # Optional: override the chat model (defaults to gpt-4.1). + # The chat app supports GPT-4* and below; GPT-5* and later are NOT supported. + # VITE_OPENAI_MODEL=gpt-4.1 ``` -- Create `apps/promptions-image/.env` with: +**Azure OpenAI** (using your own hosted deployment) + +- Create `apps/promptions-chat/.env` (and `apps/promptions-image/.env`) with: ```dotenv - VITE_OPENAI_API_KEY=your_openai_api_key_here + # Your Azure OpenAI resource key + VITE_OPENAI_API_KEY=your_azure_openai_key_here + # Your Azure OpenAI resource endpoint + VITE_OPENAI_BASE_URL=https://your-resource.openai.azure.com + # Required for Azure OpenAI + VITE_OPENAI_API_VERSION=2024-12-01-preview + # On Azure, this is your DEPLOYMENT NAME (not the underlying model id). + # The chat app supports GPT-4* family deployments and below; GPT-5* and later are NOT supported. + VITE_OPENAI_MODEL=your_chat_deployment_name ``` Option B — set it in your shell (PowerShell example): ```powershell -# Chat app +# Chat app — standard OpenAI $env:VITE_OPENAI_API_KEY="your_openai_api_key_here" ; yarn workspace @promptions/promptions-chat dev -# Image app +# Chat app — Azure OpenAI +$env:VITE_OPENAI_API_KEY="your_azure_openai_key_here" +$env:VITE_OPENAI_BASE_URL="https://your-resource.openai.azure.com" +$env:VITE_OPENAI_API_VERSION="2024-12-01-preview" +$env:VITE_OPENAI_MODEL="your_chat_deployment_name" +yarn workspace @promptions/promptions-chat dev + +# Image app (swap workspace name; same variable conventions apply) $env:VITE_OPENAI_API_KEY="your_openai_api_key_here" ; yarn workspace @promptions/promptions-image dev ``` -#### Optional configuration +#### Configuration reference -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. +Both apps read these `VITE_*` variables from their respective `.env` files. -| 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)_ | +| Variable | Description | Default | +| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `VITE_OPENAI_API_KEY` | **Required.** Your OpenAI API key, or your Azure OpenAI resource key when `VITE_OPENAI_BASE_URL` is set. | _(unset)_ | +| `VITE_OPENAI_MODEL` | Chat model used for completions. On Azure OpenAI this is the **deployment name**. The image-generation model is selected in the UI. | `gpt-4.1` | +| `VITE_OPENAI_BASE_URL` | Custom endpoint. Set this to use Azure OpenAI (e.g. `https://your-resource.openai.azure.com`) or another OpenAI-compatible service. | _(unset)_ | +| `VITE_OPENAI_API_VERSION` | API version. **Required** when `VITE_OPENAI_BASE_URL` points at Azure OpenAI (e.g. `2024-12-01-preview`). | _(unset)_ | When `VITE_OPENAI_BASE_URL` is set, the apps use the Azure OpenAI client; otherwise they use the standard OpenAI client. +> **Model compatibility:** The chat reference app supports **GPT-4\* family models and below** (e.g. `gpt-4`, `gpt-4.1`, `gpt-4o`). **GPT-5\* and later are not supported.** On Azure OpenAI, make sure the deployment named in `VITE_OPENAI_MODEL` targets a supported model. + Start the dev servers: - Chat application (http://localhost:3003): diff --git a/apps/promptions-chat/.env.example b/apps/promptions-chat/.env.example index e32809a..ec2b089 100644 --- a/apps/promptions-chat/.env.example +++ b/apps/promptions-chat/.env.example @@ -11,5 +11,6 @@ VITE_OPENAI_API_KEY=your_openai_api_key_here # Required when VITE_OPENAI_BASE_URL points at Azure OpenAI. # VITE_OPENAI_API_VERSION=2024-12-01-preview -# Optional: override the chat model (defaults to gpt-4.1). +# Optional: override the chat model (defaults to gpt-4.1). +# Note that the Promptions Chat App does not support GPT-5* or later # VITE_OPENAI_MODEL=gpt-4.1 diff --git a/apps/promptions-chat/README.md b/apps/promptions-chat/README.md index 5beec06..4841cf7 100644 --- a/apps/promptions-chat/README.md +++ b/apps/promptions-chat/README.md @@ -16,33 +16,45 @@ A modern chat interface built with React, Vite, Fluent UI, and OpenAI streaming - Node.js 18+ - Yarn (workspace package manager) -- OpenAI API key +- An OpenAI API key, _or_ an Azure OpenAI resource (API key, endpoint, and a deployment) ### Installation 1. From the workspace root, install dependencies: - ```bash - yarn install - ``` +```bash +yarn install +``` 2. Navigate to the chat app directory: - ```bash - cd apps/promptions-chat - ``` +```bash +cd apps/promptions-chat +``` -3. Copy the environment file and add your OpenAI API key: +3. Copy the environment file and configure your provider: - ```bash - cp .env.example .env - ``` +```bash +cp .env.example .env +``` - Edit `.env` and add your OpenAI API key: +**Standard OpenAI** — edit `.env` and add your OpenAI API key: - ``` - VITE_OPENAI_API_KEY=your_api_key_here - ``` +``` +VITE_OPENAI_API_KEY=your_api_key_here +``` + +**Azure OpenAI** — to use your own Azure-hosted deployment, set: + +``` +VITE_OPENAI_API_KEY=your_azure_openai_key_here +VITE_OPENAI_BASE_URL=https://your-resource.openai.azure.com +VITE_OPENAI_API_VERSION=2024-12-01-preview +# On Azure, VITE_OPENAI_MODEL is your DEPLOYMENT NAME (not a model id). +VITE_OPENAI_MODEL=your_chat_deployment_name +``` + +When `VITE_OPENAI_BASE_URL` is set, the app uses the Azure OpenAI client; otherwise it uses the standard OpenAI client. ### Development @@ -75,9 +87,13 @@ yarn typecheck - **React 18** - Modern React with hooks - **Vite** - Fast build tool and dev server - **Fluent UI** - Microsoft's design system -- **OpenAI API** - GPT-3.5-turbo with streaming +- **OpenAI / Azure OpenAI API** - Streaming chat completions (defaults to `gpt-4.1`) - **TypeScript** - Full type safety +## Model compatibility + +The chat app supports **GPT-4\* family models and below** (e.g. `gpt-4`, `gpt-4.1`, `gpt-4o`). **GPT-5\* and later are not supported.** When using Azure OpenAI, ensure the deployment named in `VITE_OPENAI_MODEL` targets a supported model. + ## Security Notes ⚠️ **Important**: This demo uses `dangerouslyAllowBrowser: true` for the OpenAI client, which exposes your API key in the browser. In a production application, you should: