[Fix] Azure OpenAI returns 404 with resource endpoint

packages/types/src/providers/openai.ts

@@ -705,3 +705,19 @@ export const azureOpenAiDefaultApiVersion = "2024-08-01-preview"
 export const OPENAI_NATIVE_DEFAULT_TEMPERATURE = 0
 
 export const OPENAI_AZURE_AI_INFERENCE_PATH = "/models/chat/completions"
+
+/**
+ * Returns true when the base URL and/or flag indicate an Azure OpenAI endpoint.
+ * Azure AI Inference endpoints (*.services.ai.azure.com) return false — the
+ * backend routes those through the plain OpenAI client, not AzureOpenAI.
+ */
+export function isAzureOpenAiBaseUrl(baseUrl?: string, useAzure?: boolean): boolean {
+	if (useAzure) return true
+
+	try {
+		const host = new URL(baseUrl ?? "").host
+		return (host === "azure.com" || host.endsWith(".azure.com")) && !host.endsWith(".services.ai.azure.com")
+	} catch {
+		return false
+	}
+}

src/api/providers/__tests__/openai.spec.ts

@@ -3,8 +3,12 @@
 import { OpenAiHandler, getOpenAiModels } from "../openai"
 import { ApiHandlerOptions } from "../../../shared/api"
 import { Anthropic } from "@anthropic-ai/sdk"
-import OpenAI from "openai"
-import { openAiModelInfoSaneDefaults, DEEP_SEEK_DEFAULT_TEMPERATURE } from "@roo-code/types"
+import OpenAI, { AzureOpenAI } from "openai"
+import {
+	openAiModelInfoSaneDefaults,
+	DEEP_SEEK_DEFAULT_TEMPERATURE,
+	azureOpenAiDefaultApiVersion,
+} from "@roo-code/types"
 import { Package } from "../../../shared/package"
 import { makeApiHandlerOptions } from "../../../test-utils/api"
 import { asyncStreamFrom, collectStream } from "../../../test-utils/stream"
@@ -20,6 +24,7 @@ const mockCreate = vitest.fn()
 
 vitest.mock("openai", () => {
 	const mockConstructor = vitest.fn()
+	const mockAzureConstructor = vitest.fn()
 	return {
 		__esModule: true,
 		default: mockConstructor.mockImplementation(function () {
@@ -74,6 +79,7 @@ vitest.mock("openai", () => {
 				},
 			}
 		}),
+		AzureOpenAI: mockAzureConstructor,
 	}
 })
 
@@ -126,6 +132,43 @@ describe("OpenAiHandler", () => {
 				timeout: MOCK_TIMEOUT_MS,
 			})
 		})
+
+		it.each([
+			["https://resource.openai.azure.com", "https://resource.openai.azure.com/openai"],
+			["https://resource.openai.azure.com/", "https://resource.openai.azure.com/openai"],
+			["https://resource.openai.azure.com/openai", "https://resource.openai.azure.com/openai"],
+			["https://resource.openai.azure.com/openai/", "https://resource.openai.azure.com/openai"],
+		])("normalizes Azure OpenAI base URL %s", (openAiBaseUrl, expectedBaseUrl) => {
+			new OpenAiHandler({ ...mockOptions, openAiBaseUrl })
+
+			expect(vi.mocked(AzureOpenAI)).toHaveBeenLastCalledWith(
+				expect.objectContaining({
+					baseURL: expectedBaseUrl,
+					apiKey: mockOptions.openAiApiKey,
+					apiVersion: azureOpenAiDefaultApiVersion,
+					defaultHeaders: expect.any(Object),
+					timeout: MOCK_TIMEOUT_MS,
+				}),
+			)
+		})
+
+		it("normalizes reverse-proxy URLs when Azure mode is enabled", () => {
+			new OpenAiHandler({
+				...mockOptions,
+				openAiBaseUrl: "https://models.example.com/azure/",
+				openAiUseAzure: true,
+			})
+
+			expect(vi.mocked(AzureOpenAI)).toHaveBeenLastCalledWith(
+				expect.objectContaining({
+					baseURL: "https://models.example.com/azure/openai",
+					apiKey: mockOptions.openAiApiKey,
+					apiVersion: azureOpenAiDefaultApiVersion,
+					defaultHeaders: expect.any(Object),
+					timeout: MOCK_TIMEOUT_MS,
+				}),
+			)
+		})
 	})
 
 	describe("createMessage", () => {

src/api/providers/openai.ts

@@ -5,6 +5,7 @@ import axios from "axios"
 import {
 	type ModelInfo,
 	azureOpenAiDefaultApiVersion,
+	isAzureOpenAiBaseUrl,
 	openAiModelInfoSaneDefaults,
 	DEEP_SEEK_DEFAULT_TEMPERATURE,
 	OPENAI_AZURE_AI_INFERENCE_PATH,
@@ -40,8 +41,7 @@ export class OpenAiHandler extends BaseProvider implements SingleCompletionHandl
 		const baseURL = this.options.openAiBaseUrl || "https://api.openai.com/v1"
 		const apiKey = this.options.openAiApiKey ?? "not-provided"
 		const isAzureAiInference = this._isAzureAiInference(this.options.openAiBaseUrl)
-		const urlHost = this._getUrlHost(this.options.openAiBaseUrl)
-		const isAzureOpenAi = urlHost === "azure.com" || urlHost.endsWith(".azure.com") || options.openAiUseAzure
+		const isAzureOpenAi = isAzureOpenAiBaseUrl(this.options.openAiBaseUrl, options.openAiUseAzure)
 
 		const headers = {
 			...DEFAULT_HEADERS,
@@ -60,8 +60,9 @@ export class OpenAiHandler extends BaseProvider implements SingleCompletionHandl
 		} else if (isAzureOpenAi) {
 			// Azure API shape slightly differs from the core API shape:
 			// https://github.com/openai/openai-node?tab=readme-ov-file#microsoft-azure-openai
+			const azureBaseURL = `${baseURL.replace(/\/openai\/?$/i, "").replace(/\/$/, "")}/openai`
 			this.client = new AzureOpenAI({
-				baseURL,
+				baseURL: azureBaseURL,
 				apiKey,
 				apiVersion: this.options.azureApiVersion || azureOpenAiDefaultApiVersion,
 				defaultHeaders: headers,

webview-ui/src/components/settings/providers/OpenAICompatible.tsx

@@ -10,6 +10,7 @@ import {
 	type OrganizationAllowList,
 	type ExtensionMessage,
 	azureOpenAiDefaultApiVersion,
+	isAzureOpenAiBaseUrl,
 	openAiModelInfoSaneDefaults,
 } from "@roo-code/types"
 
@@ -42,6 +43,7 @@ export const OpenAICompatible = ({
 	simplifySettings,
 }: OpenAICompatibleProps) => {
 	const { t } = useAppTranslation()
+	const isAzureOpenAi = isAzureOpenAiBaseUrl(apiConfiguration?.openAiBaseUrl, apiConfiguration?.openAiUseAzure)
 
 	const [azureApiVersionSelected, setAzureApiVersionSelected] = useState(!!apiConfiguration?.azureApiVersion)
 
@@ -129,7 +131,11 @@ export const OpenAICompatible = ({
 				value={apiConfiguration?.openAiBaseUrl || ""}
 				type="url"
 				onInput={handleInputChange("openAiBaseUrl")}
-				placeholder={t("settings:placeholders.baseUrl")}
+				placeholder={
+					isAzureOpenAi
+						? t("settings:providers.azureOpenAiBaseUrlPlaceholder")
+						: t("settings:placeholders.baseUrl")
+				}
 				className="w-full">
 				<label className="block font-medium mb-1">{t("settings:providers.openAiBaseUrl")}</label>
 			</VSCodeTextField>
@@ -147,12 +153,18 @@ export const OpenAICompatible = ({
 				defaultModelId="gpt-4o"
 				models={openAiModels}
 				modelIdKey="openAiModelId"
+				label={isAzureOpenAi ? t("settings:providers.azureOpenAiDeploymentName") : undefined}
 				serviceName="OpenAI"
 				serviceUrl="https://platform.openai.com"
 				organizationAllowList={organizationAllowList}
 				errorMessage={modelValidationError}
 				simplifySettings={simplifySettings}
 			/>
+			{isAzureOpenAi && (
+				<div className="text-sm text-vscode-descriptionForeground">
+					{t("settings:providers.azureOpenAiDeploymentNameDescription")}
+				</div>
+			)}
 			<R1FormatSetting
 				onChange={handleInputChange("openAiR1FormatEnabled", noTransform)}
 				openAiR1FormatEnabled={apiConfiguration?.openAiR1FormatEnabled ?? false}

webview-ui/src/components/settings/providers/__tests__/OpenAICompatible.spec.tsx

@@ -68,8 +68,13 @@ vi.mock("@src/components/ui", () => ({
 }))
 
 // Mock other components
+const { mockModelPicker } = vi.hoisted(() => ({ mockModelPicker: vi.fn() }))
+
 vi.mock("../../ModelPicker", () => ({
-	ModelPicker: () => <div data-testid="model-picker">Model Picker</div>,
+	ModelPicker: (props: any) => {
+		mockModelPicker(props)
+		return <div data-testid="model-picker">Model Picker</div>
+	},
 }))
 
 vi.mock("../../R1FormatSetting", () => ({
@@ -144,6 +149,60 @@ describe("OpenAICompatible Component - includeMaxTokens checkbox", () => {
 		})
 	})
 
+	describe("Azure OpenAI guidance", () => {
+		it.each([
+			{ openAiBaseUrl: "https://resource.openai.azure.com/" },
+			{ openAiBaseUrl: "https://models.example.com", openAiUseAzure: true },
+		])("shows Azure-specific endpoint and deployment guidance", (apiConfiguration) => {
+			render(
+				<OpenAICompatible
+					apiConfiguration={apiConfiguration as ProviderSettings}
+					setApiConfigurationField={mockSetApiConfigurationField}
+					organizationAllowList={mockOrganizationAllowList}
+				/>,
+			)
+
+			expect(screen.getByPlaceholderText("settings:providers.azureOpenAiBaseUrlPlaceholder")).toBeInTheDocument()
+			expect(mockModelPicker).toHaveBeenLastCalledWith(
+				expect.objectContaining({ label: "settings:providers.azureOpenAiDeploymentName" }),
+			)
+			expect(screen.getByText("settings:providers.azureOpenAiDeploymentNameDescription")).toBeInTheDocument()
+		})
+
+		it("keeps generic OpenAI-compatible guidance for non-Azure endpoints", () => {
+			render(
+				<OpenAICompatible
+					apiConfiguration={{ openAiBaseUrl: "https://models.example.com/v1" } as ProviderSettings}
+					setApiConfigurationField={mockSetApiConfigurationField}
+					organizationAllowList={mockOrganizationAllowList}
+				/>,
+			)
+
+			expect(screen.getByPlaceholderText("settings:placeholders.baseUrl")).toBeInTheDocument()
+			expect(mockModelPicker).toHaveBeenLastCalledWith(expect.objectContaining({ label: undefined }))
+			expect(
+				screen.queryByText("settings:providers.azureOpenAiDeploymentNameDescription"),
+			).not.toBeInTheDocument()
+		})
+
+		it("keeps generic OpenAI-compatible guidance for Azure AI Inference endpoints", () => {
+			render(
+				<OpenAICompatible
+					apiConfiguration={
+						{ openAiBaseUrl: "https://my-resource.services.ai.azure.com/models" } as ProviderSettings
+					}
+					setApiConfigurationField={mockSetApiConfigurationField}
+					organizationAllowList={mockOrganizationAllowList}
+				/>,
+			)
+
+			expect(mockModelPicker).toHaveBeenLastCalledWith(expect.objectContaining({ label: undefined }))
+			expect(
+				screen.queryByText("settings:providers.azureOpenAiDeploymentNameDescription"),
+			).not.toBeInTheDocument()
+		})
+	})
+
 	describe("Initial State", () => {
 		it("should show checkbox as checked when includeMaxTokens is true", () => {
 			const apiConfiguration: Partial<ProviderSettings> = {

webview-ui/src/components/settings/providers/__tests__/OpenAICompatible.visual.fixture.tsx

@@ -0,0 +1,66 @@
+/* v8 ignore file -- Playwright component fixture is covered by the visual test. */
+import React from "react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+
+import { type ProviderSettings } from "@roo-code/types"
+
+import { TranslationContext as AppTranslationContext } from "@/i18n/TranslationContext"
+import { TranslationContext as PlaywrightTranslationContext } from "@src/i18n/TranslationContext"
+import { TooltipProvider } from "@src/components/ui/tooltip"
+import { OpenAICompatible } from "../OpenAICompatible"
+import enSettings from "@/i18n/locales/en/settings.json"
+
+function flattenTranslations(obj: Record<string, unknown>, prefix = "settings:"): Record<string, string> {
+	const result: Record<string, string> = {}
+	for (const [key, value] of Object.entries(obj)) {
+		const fullKey = `${prefix}${key}`
+		if (typeof value === "string") {
+			result[fullKey] = value
+		} else if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+			Object.assign(result, flattenTranslations(value as Record<string, unknown>, `${fullKey}.`))
+		}
+	}
+	return result
+}
+
+const translations = flattenTranslations(enSettings as Record<string, unknown>)
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: { retry: false },
+	},
+})
+
+const apiConfiguration: ProviderSettings = {
+	apiProvider: "openai",
+	openAiBaseUrl: "",
+	openAiModelId: "my-gpt4o-deployment",
+	openAiUseAzure: true,
+}
+
+export const OpenAICompatibleAzureFixture = () => (
+	<PlaywrightTranslationContext.Provider
+		value={{
+			t: (key) => translations[key] ?? key,
+			i18n: null as unknown as typeof import("../../../../i18n/setup").default,
+		}}>
+		<AppTranslationContext.Provider
+			value={{
+				t: (key) => translations[key] ?? key,
+				i18n: null as unknown as typeof import("../../../../i18n/setup").default,
+			}}>
+			<QueryClientProvider client={queryClient}>
+				<TooltipProvider>
+					<div className="h-[295px] w-[480px] overflow-hidden bg-vscode-editor-background p-4 text-vscode-foreground">
+						<OpenAICompatible
+							apiConfiguration={apiConfiguration}
+							setApiConfigurationField={() => {}}
+							organizationAllowList={{ allowAll: true, providers: {} }}
+							simplifySettings
+						/>
+					</div>
+				</TooltipProvider>
+			</QueryClientProvider>
+		</AppTranslationContext.Provider>
+	</PlaywrightTranslationContext.Provider>
+)

webview-ui/src/components/settings/providers/__tests__/OpenAICompatible.visual.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+
+import { expect, test } from "../../../../../playwright/coverage-fixture"
+import { OpenAICompatibleAzureFixture } from "./OpenAICompatible.visual.fixture"
+
+test("renders Azure OpenAI endpoint and deployment guidance in the VS Code dark theme", async ({ mount, page }) => {
+	// The full provider bundle leaves a bare Zod reference after CT tree-shaking.
+	await page.evaluate(() => Object.assign(globalThis, { z: undefined }))
+	const component = await mount(<OpenAICompatibleAzureFixture />)
+
+	await component.evaluate((element) => {
+		const { document } = element.ownerDocument.defaultView!
+		document.documentElement.className = "vscode-dark"
+		document.body.className = "vscode-dark"
+		document.body.dataset.vscodeThemeId = "Default Dark Modern"
+	})
+
+	await expect
+		.poll(() =>
+			component.evaluate((element) => {
+				return getComputedStyle(element.ownerDocument.body)
+					.getPropertyValue("--vscode-editor-background")
+					.trim()
+			}),
+		)
+		.toBe("#1e1e1e")
+
+	await component.evaluate(async () => {
+		await document.fonts.ready
+		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+	})
+
+	await expect(component).toHaveScreenshot("openai-compatible-azure-guidance-dark.png")
+})

webview-ui/src/i18n/locales/en/settings.json

@@ -575,6 +575,9 @@
 		"openAiApiKey": "OpenAI API Key",
 		"apiKey": "API Key",
 		"openAiBaseUrl": "Base URL",
+		"azureOpenAiBaseUrlPlaceholder": "https://<resource>.openai.azure.com/openai",
+		"azureOpenAiDeploymentName": "Azure deployment name",
+		"azureOpenAiDeploymentNameDescription": "Enter the deployment name from Azure AI Studio, not the underlying model name.",
 		"getOpenAiApiKey": "Get OpenAI API Key",
 		"mistralApiKey": "Mistral API Key",
 		"getMistralApiKey": "Get Mistral / Codestral API Key",