Link to provider docs from the API options (#2112)

Author: mrubens

webview-ui/src/components/settings/ApiOptions.tsx

@@ -243,10 +243,55 @@ const ApiOptions = ({
 		[selectedProvider],
 	)
 
+	// Base URL for provider documentation
+	const DOC_BASE_URL = "https://docs.roocode.com/providers"
+
+	// Custom URL path mappings for providers with different slugs
+	const providerUrlSlugs: Record<string, string> = {
+		"openai-native": "openai",
+		openai: "openai-compatible",
+	}
+
+	// Helper function to get provider display name from PROVIDERS constant
+	const getProviderDisplayName = (providerKey: string): string | undefined => {
+		const provider = PROVIDERS.find((p) => p.value === providerKey)
+		return provider?.label
+	}
+
+	// Helper function to get the documentation URL and name for the currently selected provider
+	const getSelectedProviderDocUrl = (): { url: string; name: string } | undefined => {
+		const displayName = getProviderDisplayName(selectedProvider)
+		if (!displayName) {
+			return undefined
+		}
+
+		// Get the URL slug - use custom mapping if available, otherwise use the provider key
+		const urlSlug = providerUrlSlugs[selectedProvider] || selectedProvider
+
+		return {
+			url: `${DOC_BASE_URL}/${urlSlug}`,
+			name: displayName,
+		}
+	}
+
 	return (
 		<div className="flex flex-col gap-3">
-			<div>
-				<label className="block font-medium mb-1">{t("settings:providers.apiProvider")}</label>
+			<div className="flex flex-col gap-1 relative">
+				<div className="flex justify-between items-center">
+					<label className="block font-medium mb-1">{t("settings:providers.apiProvider")}</label>
+					{getSelectedProviderDocUrl() && (
+						<div className="text-xs text-vscode-descriptionForeground">
+							<VSCodeLink
+								href={getSelectedProviderDocUrl()!.url}
+								className="hover:text-vscode-foreground"
+								target="_blank">
+								{t("settings:providers.providerDocumentation", {
+									provider: getSelectedProviderDocUrl()!.name,
+								})}
+							</VSCodeLink>
+						</div>
+					)}
+				</div>
 				<Select
 					value={selectedProvider}
 					onValueChange={(value) => setApiConfigurationField("apiProvider", value as ApiProvider)}>
@@ -256,7 +301,7 @@ const ApiOptions = ({
 					<SelectContent>
 						<SelectItem value="openrouter">OpenRouter</SelectItem>
 						<SelectSeparator />
-						{PROVIDERS.map(({ value, label }) => (
+						{PROVIDERS.filter((p) => p.value !== "openrouter").map(({ value, label }) => (
 							<SelectItem key={value} value={value}>
 								{label}
 							</SelectItem>

webview-ui/src/components/settings/constants.ts

@@ -21,6 +21,7 @@ export const MODELS_BY_PROVIDER: Partial<Record<ApiProvider, Record<string, Mode
 }
 
 export const PROVIDERS = [
+	{ value: "openrouter", label: "OpenRouter" },
 	{ value: "anthropic", label: "Anthropic" },
 	{ value: "gemini", label: "Google Gemini" },
 	{ value: "deepseek", label: "DeepSeek" },

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

@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Perfil de configuració",
+		"providerDocumentation": "Documentació de {{provider}}",
 		"description": "Deseu diferents configuracions d'API per canviar ràpidament entre proveïdors i configuracions.",
 		"apiProvider": "Proveïdor d'API",
 		"openRouterApiKey": "Clau API d'OpenRouter",

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

@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Konfigurationsprofil",
+		"providerDocumentation": "{{provider}}-Dokumentation",
 		"description": "Speichern Sie verschiedene API-Konfigurationen, um schnell zwischen Anbietern und Einstellungen zu wechseln.",
 		"apiProvider": "API-Anbieter",
 		"model": "Modell",

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

@@ -82,6 +82,7 @@
 		}
 	},
 	"providers": {
+		"providerDocumentation": "{{provider}} documentation",
 		"configProfile": "Configuration Profile",
 		"description": "Save different API configurations to quickly switch between providers and settings.",
 		"apiProvider": "API Provider",

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

@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Perfil de configuración",
+		"providerDocumentation": "Documentación de {{provider}}",
 		"description": "Guarde diferentes configuraciones de API para cambiar rápidamente entre proveedores y ajustes.",
 		"apiProvider": "Proveedor de API",
 		"model": "Modelo",

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

@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Profil de configuration",
+		"providerDocumentation": "Documentation {{provider}}",
 		"description": "Enregistrez différentes configurations d'API pour basculer rapidement entre les fournisseurs et les paramètres.",
 		"apiProvider": "Fournisseur d'API",
 		"model": "Modèle",

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

@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "कॉन्फिगरेशन प्रोफाइल",
+		"providerDocumentation": "{{provider}} दस्तावेज़ीकरण",
 		"description": "विभिन्न API कॉन्फ़िगरेशन सहेजें ताकि प्रदाताओं और सेटिंग्स के बीच त्वरित रूप से स्विच कर सकें।",
 		"apiProvider": "API प्रदाता",
 		"model": "मॉडल",

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

@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "Profilo di configurazione",
+		"providerDocumentation": "Documentazione {{provider}}",
 		"description": "Salva diverse configurazioni API per passare rapidamente tra fornitori e impostazioni.",
 		"apiProvider": "Fornitore API",
 		"model": "Modello",

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

@@ -83,6 +83,7 @@
 	},
 	"providers": {
 		"configProfile": "設定プロファイル",
+		"providerDocumentation": "{{provider}}のドキュメント",
 		"description": "異なるAPI設定を保存して、プロバイダーと設定をすばやく切り替えることができます。",
 		"apiProvider": "APIプロバイダー",
 		"model": "モデル",