From bd14fdaf8258b8761ee897790785d558fb53fe4a Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Sun, 28 Jun 2026 17:45:32 +0800
Subject: [PATCH] feat(web): add Download Plugin Config button to API key
 creation

---
 .../profile/settings-api-keys-tab.tsx         | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/apps/web/components/profile/settings-api-keys-tab.tsx b/apps/web/components/profile/settings-api-keys-tab.tsx
index 12df467..dadde7f 100644
--- a/apps/web/components/profile/settings-api-keys-tab.tsx
+++ b/apps/web/components/profile/settings-api-keys-tab.tsx
@@ -13,6 +13,7 @@ import {
   EyeOff,
   Clock,
   AlertCircle,
+  Download,
 } from "lucide-react"
 import { motion, AnimatePresence } from "motion/react"
 
@@ -187,6 +188,27 @@ export function SettingsApiKeysTab() {
     }
   }
 
+  const handleDownloadConfig = () => {
+    if (!createdKey?.key) return
+    const config = {
+      apiKey: createdKey.key,
+      exportPath: "/home/deck/Downloads",
+      baseUrl: "https://deckyvault.xyz",
+      hardwareSlug: null,
+    }
+    const blob = new Blob([JSON.stringify(config, null, 2)], {
+      type: "application/json",
+    })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = "deckyvault-config.json"
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
   
 
   // Show the created key modal
@@ -261,6 +283,14 @@ export function SettingsApiKeysTab() {
           >
             Done
           </button>
+
+          <button
+            onClick={handleDownloadConfig}
+            className='mt-2 px-4 py-2 rounded-lg border border-border text-text/70 text-sm font-medium hover:border-primary/40 hover:text-primary transition-colors cursor-pointer flex items-center justify-center gap-2 w-full'
+          >
+            <Download className='h-4 w-4' />
+            Download Plugin Config
+          </button>
         </div>
       </motion.div>
     )