feat: Add Amazon Bedrock provider support with AWS credentials configuration

Author: Agastya18

client/public/bedrock_logo.png

@@ -345,6 +345,15 @@ export function ChatTab({
             className="w-8 h-8 object-contain opacity-70 hover:opacity-100 transition-opacity"
           />
         </div>
+
+        {/* Amazon Bedrock */}
+        <div className="flex items-center justify-center">
+          <img
+            src="/bedrock_logo.png"
+            alt="Amazon Bedrock"
+            className="w-8 h-8 object-contain opacity-70 hover:opacity-100 transition-opacity"
+          />
+        </div>
       </div>
 
       {/* CTA */}

client/src/components/ChatTab.tsx

@@ -43,6 +43,8 @@ export function ChatTabV2() {
     getLiteLLMModelAlias,
     getOpenRouterSelectedModels,
     getOllamaBaseUrl,
+    getBedrockRegion,
+    getBedrockSecretKey,
   } = useAiProviderKeys();
 
   const [input, setInput] = useState("");
@@ -95,10 +97,22 @@ export function ChatTabV2() {
         apiKey: apiKey,
         temperature,
         systemPrompt,
+        ollamaBaseUrl: getOllamaBaseUrl(),
+        bedrockRegion: getBedrockRegion(),
+        bedrockSecretKey: getBedrockSecretKey(),
       },
       headers: authHeaders,
     });
-  }, [selectedModel, getToken, authHeaders, temperature, systemPrompt]);
+  }, [
+    selectedModel,
+    getToken,
+    authHeaders,
+    temperature,
+    systemPrompt,
+    getOllamaBaseUrl,
+    getBedrockRegion,
+    getBedrockSecretKey,
+  ]);
 
   useEffect(() => {
     let active = true;

client/src/components/ChatTabV2.tsx

@@ -5,6 +5,7 @@ import { ProviderConfigDialog } from "./setting/ProviderConfigDialog";
 import { OllamaConfigDialog } from "./setting/OllamaConfigDialog";
 import { LiteLLMConfigDialog } from "./setting/LiteLLMConfigDialog";
 import { OpenRouterConfigDialog } from "./setting/OpenRouterConfigDialog";
+import { BedrockConfigDialog } from "./setting/BedrockConfigDialog";
 import { AccountApiKeySection } from "./setting/AccountApiKeySection";
 
 interface ProviderConfig {
@@ -31,6 +32,10 @@ export function SettingsTab() {
     setLiteLLMModelAlias,
     getOpenRouterSelectedModels,
     setOpenRouterSelectedModels,
+    getBedrockRegion,
+    setBedrockRegion,
+    getBedrockSecretKey,
+    setBedrockSecretKey,
   } = useAiProviderKeys();
 
   const [editingValue, setEditingValue] = useState("");
@@ -47,6 +52,10 @@ export function SettingsTab() {
   const [openRouterApiKeyInput, setOpenRouterApiKeyInput] = useState("");
   const [openRouterSelectedModelsInput, setOpenRouterSelectedModelsInput] =
     useState<string[]>([]);
+  const [bedrockDialogOpen, setBedrockDialogOpen] = useState(false);
+  const [bedrockAccessKeyIdInput, setBedrockAccessKeyIdInput] = useState("");
+  const [bedrockSecretKeyInput, setBedrockSecretKeyInput] = useState("");
+  const [bedrockRegionInput, setBedrockRegionInput] = useState("");
 
   const providerConfigs: ProviderConfig[] = [
     {
@@ -94,9 +103,23 @@ export function SettingsTab() {
       placeholder: "...",
       getApiKeyUrl: "https://console.mistral.ai/api-keys/",
     },
+    {
+      id: "bedrock",
+      name: "Amazon Bedrock",
+      logo: "/bedrock_logo.png",
+      logoAlt: "Amazon Bedrock",
+      description: "Claude 3.5, Llama 3, Mistral models on AWS Bedrock",
+      placeholder: "AWS Access Key ID",
+      getApiKeyUrl: "https://console.aws.amazon.com/iam/",
+    },
   ];
 
   const handleEdit = (providerId: string) => {
+    if (providerId === "bedrock") {
+      handleBedrockEdit();
+      return;
+    }
+
     const provider = providerConfigs.find((p) => p.id === providerId);
     if (provider) {
       setSelectedProvider(provider);
@@ -129,6 +152,11 @@ export function SettingsTab() {
     if (providerId === "openrouter") {
       setOpenRouterSelectedModels([]);
     }
+    // Also clear Bedrock credentials if deleting Bedrock provider
+    if (providerId === "bedrock") {
+      setBedrockSecretKey("");
+      setBedrockRegion("");
+    }
   };
 
   const handleOllamaEdit = () => {
@@ -194,6 +222,30 @@ export function SettingsTab() {
     setOpenRouterSelectedModelsInput([]);
   };
 
+  const handleBedrockEdit = () => {
+    setBedrockAccessKeyIdInput(tokens.bedrock || "");
+    setBedrockSecretKeyInput(getBedrockSecretKey());
+    setBedrockRegionInput(getBedrockRegion());
+    setBedrockDialogOpen(true);
+  };
+
+  const handleBedrockSave = () => {
+    setToken("bedrock", bedrockAccessKeyIdInput);
+    setBedrockSecretKey(bedrockSecretKeyInput);
+    setBedrockRegion(bedrockRegionInput);
+    setBedrockDialogOpen(false);
+    setBedrockAccessKeyIdInput("");
+    setBedrockSecretKeyInput("");
+    setBedrockRegionInput("");
+  };
+
+  const handleBedrockCancel = () => {
+    setBedrockDialogOpen(false);
+    setBedrockAccessKeyIdInput("");
+    setBedrockSecretKeyInput("");
+    setBedrockRegionInput("");
+  };
+
   return (
     <div className="container mx-auto p-6 max-w-6xl space-y-8">
       <div className="flex items-center gap-3 mb-6">
@@ -268,6 +320,20 @@ export function SettingsTab() {
         onSave={handleOpenRouterSave}
         onCancel={handleOpenRouterCancel}
       />
+
+      {/* Bedrock Configuration Dialog */}
+      <BedrockConfigDialog
+        open={bedrockDialogOpen}
+        onOpenChange={setBedrockDialogOpen}
+        accessKeyId={bedrockAccessKeyIdInput}
+        secretKey={bedrockSecretKeyInput}
+        region={bedrockRegionInput}
+        onAccessKeyIdChange={setBedrockAccessKeyIdInput}
+        onSecretKeyChange={setBedrockSecretKeyInput}
+        onRegionChange={setBedrockRegionInput}
+        onSave={handleBedrockSave}
+        onCancel={handleBedrockCancel}
+      />
     </div>
   );
 }

client/src/components/SettingsTab.tsx

@@ -14,6 +14,7 @@ import openrouterLogo from "/openrouter_logo.png";
 import moonshotLightLogo from "/moonshot_light.png";
 import moonshotDarkLogo from "/moonshot_dark.png";
 import zAiLogo from "/z-ai.png";
+import bedrockLogo from "/bedrock_logo.png";
 
 export const getProviderLogoFromProvider = (
   provider: string,
@@ -68,6 +69,8 @@ export const getProviderLogoFromProvider = (
       return moonshotLightLogo;
     case "z-ai":
       return zAiLogo;
+    case "bedrock":
+      return bedrockLogo;
     default:
       return null;
   }
@@ -104,6 +107,8 @@ export const getProviderColor = (provider: string) => {
       return "text-indigo-600 dark:text-indigo-400";
     case "meta":
       return "text-blue-500 dark:text-blue-400";
+    case "bedrock":
+      return "text-orange-500 dark:text-orange-400";
     default:
       return "text-blue-600 dark:text-blue-400";
   }

client/src/components/chat-v2/chat-helpers.ts

@@ -46,6 +46,7 @@ export function buildAvailableModels(params: {
     openrouter: Boolean(
       hasToken("openrouter") && getOpenRouterSelectedModels().length > 0,
     ),
+    bedrock: hasToken("bedrock"),
     meta: false,
     "x-ai": false,
   } as const;

client/src/components/chat-v2/model-helpers.ts

@@ -14,6 +14,7 @@ import openrouterLogo from "/openrouter_logo.png";
 import moonshotLightLogo from "/moonshot_light.png";
 import moonshotDarkLogo from "/moonshot_dark.png";
 import zAiLogo from "/z-ai.png";
+import bedrockLogo from "/bedrock_logo.png";
 
 export const getProviderLogoFromProvider = (
   provider: string,
@@ -68,6 +69,8 @@ export const getProviderLogoFromProvider = (
       return moonshotLightLogo;
     case "z-ai":
       return zAiLogo;
+    case "bedrock":
+      return bedrockLogo;
     default:
       return null;
   }
@@ -104,6 +107,8 @@ export const getProviderColor = (provider: string) => {
       return "text-indigo-600 dark:text-indigo-400";
     case "meta":
       return "text-blue-500 dark:text-blue-400";
+    case "bedrock":
+      return "text-orange-500 dark:text-orange-400";
     default:
       return "text-blue-600 dark:text-blue-400";
   }