Added Azure OpenAI support and support for Managed Identities (apikey…

…-less) access
stackblitz-labs · Feb 16, 2025 · a74994d · a74994d
1 parent 294adfd
commit a74994d
Show file tree

Hide file tree

Showing 17 changed files with 1,410 additions and 406 deletions.
diff --git a/.env.example b/.env.example
@@ -16,6 +16,17 @@ HuggingFace_API_KEY=
 # You only need this environment variable set if you want to use GPT models
 OPENAI_API_KEY=
 
+# Get your Azure Open AI API Key by following these instructions -
+# https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key
+# You only need this environment variable set if you want to use GPT models
+AZURE_OPENAI_API_KEY=
+AZURE_OPENAI_ENDPOINT_NAME=
+AZURE_OPENAI_USE_MI=
+AZURE_OPENAI_VERSION=
+AZURE_TENANT_ID=
+AZURE_SUBSCRIPTION_ID=
+AZURE_RESOURCE_GROUP_NAME=
+
 # Get your Anthropic API Key in your account settings -
 # https://console.anthropic.com/settings/keys
 # You only need this environment variable set if you want to use Claude models

diff --git a/Dockerfile b/Dockerfile
@@ -23,6 +23,13 @@ FROM base AS bolt-ai-production
 ARG GROQ_API_KEY
 ARG HuggingFace_API_KEY
 ARG OPENAI_API_KEY
+ARG AZURE_OPENAI_API_KEY
+ARG AZURE_OPENAI_ENDPOINT_NAME
+ARG AZURE_OPENAI_USE_MI
+ARG AZURE_OPENAI_VERSION
+ARG AZURE_TENANT_ID
+ARG AZURE_SUBSCRIPTION_ID
+ARG AZURE_RESOURCE_GROUP_NAME
 ARG ANTHROPIC_API_KEY
 ARG OPEN_ROUTER_API_KEY
 ARG GOOGLE_GENERATIVE_AI_API_KEY
@@ -38,6 +45,13 @@ ENV WRANGLER_SEND_METRICS=false \
     GROQ_API_KEY=${GROQ_API_KEY} \
     HuggingFace_KEY=${HuggingFace_API_KEY} \
     OPENAI_API_KEY=${OPENAI_API_KEY} \
+    AZURE_OPENAI_API_KEY=${AZURE_OPENAI_API_KEY} \
+    AZURE_OPENAI_ENDPOINT_NAME=${AZURE_OPENAI_ENDPOINT_NAME} \
+    AZURE_OPENAI_USE_MI=${AZURE_OPENAI_USE_MI} \
+    AZURE_OPENAI_VERSION=${AZURE_OPENAI_VERSION} \
+    AZURE_TENANT_ID=${AZURE_TENANT_ID} \
+    AZURE_SUBSCRIPTION_ID=${AZURE_SUBSCRIPTION_ID} \
+    AZURE_RESOURCE_GROUP_NAME=${AZURE_RESOURCE_GROUP_NAME} \
     ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY} \
     OPEN_ROUTER_API_KEY=${OPEN_ROUTER_API_KEY} \
     GOOGLE_GENERATIVE_AI_API_KEY=${GOOGLE_GENERATIVE_AI_API_KEY} \
@@ -65,6 +79,13 @@ FROM base AS bolt-ai-development
 ARG GROQ_API_KEY
 ARG HuggingFace 
 ARG OPENAI_API_KEY
+ARG AZURE_OPENAI_API_KEY
+ARG AZURE_OPENAI_ENDPOINT_NAME
+ARG AZURE_OPENAI_USE_MI
+ARG AZURE_OPENAI_VERSION
+ARG AZURE_TENANT_ID
+ARG AZURE_SUBSCRIPTION_ID
+ARG AZURE_RESOURCE_GROUP_NAME
 ARG ANTHROPIC_API_KEY
 ARG OPEN_ROUTER_API_KEY
 ARG GOOGLE_GENERATIVE_AI_API_KEY
@@ -78,6 +99,13 @@ ARG DEFAULT_NUM_CTX
 ENV GROQ_API_KEY=${GROQ_API_KEY} \
     HuggingFace_API_KEY=${HuggingFace_API_KEY} \
     OPENAI_API_KEY=${OPENAI_API_KEY} \
+    AZURE_OPENAI_API_KEY=${AZURE_OPENAI_API_KEY} \
+    AZURE_OPENAI_ENDPOINT_NAME=${AZURE_OPENAI_ENDPOINT_NAME} \
+    AZURE_OPENAI_USE_MI=${AZURE_OPENAI_USE_MI} \
+    AZURE_OPENAI_VERSION=${AZURE_OPENAI_VERSION} \
+    AZURE_TENANT_ID=${AZURE_TENANT_ID} \
+    AZURE_SUBSCRIPTION_ID=${AZURE_SUBSCRIPTION_ID} \
+    AZURE_RESOURCE_GROUP_NAME=${AZURE_RESOURCE_GROUP_NAME} \
     ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY} \
     OPEN_ROUTER_API_KEY=${OPEN_ROUTER_API_KEY} \
     GOOGLE_GENERATIVE_AI_API_KEY=${GOOGLE_GENERATIVE_AI_API_KEY} \

diff --git a/app/components/@settings/tabs/data/DataTab.tsx b/app/components/@settings/tabs/data/DataTab.tsx
@@ -1,8 +1,8 @@
-import { useState, useRef } from 'react';
 import { motion } from 'framer-motion';
+import { useRef, useState } from 'react';
 import { toast } from 'react-toastify';
-import { DialogRoot, DialogClose, Dialog, DialogTitle } from '~/components/ui/Dialog';
-import { db, getAll, deleteById } from '~/lib/persistence';
+import { Dialog, DialogClose, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
+import { db, deleteById, getAll } from '~/lib/persistence';
 
 export default function DataTab() {
   const [isDownloadingTemplate, setIsDownloadingTemplate] = useState(false);
@@ -139,6 +139,13 @@ export default function DataTab() {
       const template = {
         Anthropic_API_KEY: '',
         OpenAI_API_KEY: '',
+        AZURE_OPENAI_API_KEY: '',
+        AZURE_OPENAI_ENDPOINT_NAME: '',
+        AZURE_OPENAI_USE_MI: '',
+        AZURE_OPENAI_VERSION: '',
+        AZURE_TENANT_ID: '',
+        AZURE_SUBSCRIPTION_ID: '',
+        AZURE_RESOURCE_GROUP_NAME: '',
         Google_API_KEY: '',
         Groq_API_KEY: '',
         HuggingFace_API_KEY: '',

diff --git a/app/components/@settings/tabs/providers/status/ServiceStatusTab.tsx b/app/components/@settings/tabs/providers/status/ServiceStatusTab.tsx
@@ -1,16 +1,14 @@
-import React, { useEffect, useState, useCallback } from 'react';
 import { motion } from 'framer-motion';
-import { classNames } from '~/utils/classNames';
-import { TbActivityHeartbeat } from 'react-icons/tb';
-import { BsCheckCircleFill, BsXCircleFill, BsExclamationCircleFill } from 'react-icons/bs';
-import { SiAmazon, SiGoogle, SiHuggingface, SiPerplexity, SiOpenai } from 'react-icons/si';
-import { BsRobot, BsCloud } from 'react-icons/bs';
-import { TbBrain } from 'react-icons/tb';
-import { BiChip, BiCodeBlock } from 'react-icons/bi';
-import { FaCloud, FaBrain } from 'react-icons/fa';
+import React, { useCallback, useEffect, useState } from 'react';
 import type { IconType } from 'react-icons';
-import { useSettings } from '~/lib/hooks/useSettings';
+import { BiChip, BiCodeBlock } from 'react-icons/bi';
+import { BsCheckCircleFill, BsCloud, BsExclamationCircleFill, BsRobot, BsXCircleFill } from 'react-icons/bs';
+import { FaBrain, FaCloud } from 'react-icons/fa';
+import { SiAmazon, SiGoogle, SiHuggingface, SiOpenai, SiPerplexity } from 'react-icons/si';
+import { TbActivityHeartbeat, TbBrain, TbBrandAzure } from 'react-icons/tb';
 import { useToast } from '~/components/ui/use-toast';
+import { useSettings } from '~/lib/hooks/useSettings';
+import { classNames } from '~/utils/classNames';
 
 // Types
 type ProviderName =
@@ -23,6 +21,7 @@ type ProviderName =
   | 'HuggingFace'
   | 'Mistral'
   | 'OpenAI'
+  | 'AzureOpenAI'
   | 'OpenRouter'
   | 'Perplexity'
   | 'Together'
@@ -73,6 +72,15 @@ const PROVIDER_STATUS_URLS: Record<ProviderName, ProviderConfig> = {
     },
     testModel: 'gpt-3.5-turbo',
   },
+  AzureOpenAI: {
+    statusUrl: 'https://azure.status.microsoft/en-us/status',
+    apiUrl:
+      'https://$AZURE_OPENAI_API_KEY.openai.azure.com/openai/deployments/gpt-4o-mini/chat/completions?api-version=2024-02-15-preview',
+    headers: {
+      Authorization: 'Bearer $AZURE_OPENAI_API_KEY',
+    },
+    testModel: 'gpt-4o-mini',
+  },
   Anthropic: {
     statusUrl: 'https://status.anthropic.com/',
     apiUrl: 'https://api.anthropic.com/v1/messages',
@@ -181,6 +189,7 @@ const PROVIDER_ICONS: Record<ProviderName, IconType> = {
   HuggingFace: SiHuggingface,
   Mistral: TbBrain,
   OpenAI: SiOpenai,
+  AzureOpenAI: TbBrandAzure,
   OpenRouter: FaCloud,
   Perplexity: SiPerplexity,
   Together: BsCloud,
@@ -208,6 +217,7 @@ const ServiceStatusTab = () => {
       // Map provider names to environment variable names
       const envKeyMap: Record<ProviderName, string> = {
         OpenAI: 'OPENAI_API_KEY',
+        AzureOpenAI: 'AZURE_OPENAI_API_KEY',
         Anthropic: 'ANTHROPIC_API_KEY',
         Cohere: 'COHERE_API_KEY',
         Google: 'GOOGLE_GENERATIVE_AI_API_KEY',