From ac8198e5ba9c29b7ec15e7f612623e9aa8f343ef Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Fri, 17 May 2024 12:30:26 -0400
Subject: [PATCH] Add field for Anthropic API key in settings

---
 frontend/src/components/SettingsDialog.tsx | 20 ++++++++++++++++++++
 frontend/src/types.ts                      |  1 +
 2 files changed, 21 insertions(+)

diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 2e7814b..1a9c5a6 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -108,6 +108,26 @@ function SettingsDialog({ settings, setSettings }: Props) {
             </>
           )}
 
+          <Label htmlFor="anthropic-api-key">
+            <div>Anthropic API key</div>
+            <div className="font-light mt-2 leading-relaxed">
+              Only stored in your browser. Never stored on servers. Overrides
+              your .env config.
+            </div>
+          </Label>
+
+          <Input
+            id="anthropic-api-key"
+            placeholder="Anthropic API key"
+            value={settings.anthropicApiKey || ""}
+            onChange={(e) =>
+              setSettings((s) => ({
+                ...s,
+                anthropicApiKey: e.target.value,
+              }))
+            }
+          />
+
           <Accordion type="single" collapsible className="w-full">
             <AccordionItem value="item-1">
               <AccordionTrigger>Screenshot by URL Config</AccordionTrigger>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index bbabeff..dbe10ad 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -16,6 +16,7 @@ export interface Settings {
   codeGenerationModel: CodeGenerationModel;
   // Only relevant for hosted version
   isTermOfServiceAccepted: boolean;
+  anthropicApiKey: string | null; // Added property for anthropic API key
 }
 
 export enum AppState {