diff --git a/packages/app/src/components/settings/ApiKeyManager.vue b/packages/app/src/components/settings/ApiKeyManager.vue
new file mode 100644
index 00000000..fc5e050b
--- /dev/null
+++ b/packages/app/src/components/settings/ApiKeyManager.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="space-y-4">
+    <h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
+      API Keys
+    </h3>
+
+    <!-- Configured providers -->
+    <div class="space-y-2">
+      <div
+        v-for="provider in providers"
+        :key="provider.id"
+        class="flex items-center gap-3 p-3 rounded-xl"
+        :class="isDark
+          ? 'bg-white/[0.03] border border-white/5'
+          : 'bg-black/[0.02] border border-black/5'"
+      >
+        <div class="flex-1 min-w-0">
+          <div
+            class="text-xs font-medium"
+            :class="isDark ? 'text-white/80' : 'text-gray-800'"
+          >
+            {{ provider.name }}
+          </div>
+          <div
+            class="text-[10px] font-mono mt-0.5"
+            :class="isDark ? 'text-white/30' : 'text-gray-400'"
+          >
+            {{ provider.masked ?? 'Not configured' }}
+          </div>
+        </div>
+        <button
+          v-if="provider.hasKey"
+          class="text-[10px] px-2 py-1 rounded-md transition-colors"
+          :class="isDark
+            ? 'text-red-400/60 hover:text-red-400 hover:bg-red-500/10'
+            : 'text-red-500/60 hover:text-red-600 hover:bg-red-50'"
+          @click="removeKey(provider.id)"
+        >
+          Remove
+        </button>
+      </div>
+    </div>
+
+    <!-- Add new key -->
+    <div class="space-y-2">
+      <select
+        v-model="selectedProvider"
+        class="w-full px-3 py-2 rounded-lg text-xs outline-none"
+        :class="isDark
+          ? 'bg-white/5 text-white/80 border border-white/10'
+          : 'bg-gray-50 text-gray-800 border border-gray-200'"
+      >
+        <option value="">Select provider...</option>
+        <option value="claude">Claude (Anthropic)</option>
+        <option value="openrouter">OpenRouter</option>
+      </select>
+
+      <div v-if="selectedProvider" class="flex gap-2">
+        <input
+          v-model="newKey"
+          type="password"
+          placeholder="Paste API key..."
+          class="flex-1 px-3 py-2 rounded-lg text-xs outline-none"
+          :class="isDark
+            ? 'bg-white/5 text-white/80 placeholder:text-white/25 border border-white/10'
+            : 'bg-gray-50 text-gray-800 placeholder:text-gray-400 border border-gray-200'"
+          style="font-size: 16px"
+          @keydown.enter="saveKey"
+        />
+        <button
+          :disabled="!newKey.trim()"
+          class="px-3 py-2 rounded-lg text-xs font-medium transition-colors"
+          :class="newKey.trim()
+            ? 'bg-accent text-white hover:bg-accent/90'
+            : isDark
+              ? 'bg-white/5 text-white/20 cursor-not-allowed'
+              : 'bg-gray-100 text-gray-300 cursor-not-allowed'"
+          @click="saveKey"
+        >
+          Save
+        </button>
+      </div>
+
+      <p
+        v-if="statusMessage"
+        class="text-[10px]"
+        :class="statusError ? 'text-red-400' : isDark ? 'text-green-400' : 'text-green-600'"
+      >
+        {{ statusMessage }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useTheme } from '@/composables/useTheme'
+import { storeApiKey, getApiKey, deleteApiKey, listProviders, maskApiKey } from '@/utils/key-vault'
+
+const { isDark } = useTheme()
+
+interface ProviderInfo {
+  id: string
+  name: string
+  hasKey: boolean
+  masked: string | null
+}
+
+const providers = ref<ProviderInfo[]>([])
+const selectedProvider = ref('')
+const newKey = ref('')
+const statusMessage = ref('')
+const statusError = ref(false)
+
+const PROVIDER_NAMES: Record<string, string> = {
+  claude: 'Claude (Anthropic)',
+  openrouter: 'OpenRouter',
+}
+
+async function loadProviders() {
+  const configured = await listProviders()
+  const allProviders = ['claude', 'openrouter']
+
+  providers.value = await Promise.all(
+    allProviders.map(async (id) => {
+      const key = await getApiKey(id)
+      return {
+        id,
+        name: PROVIDER_NAMES[id] ?? id,
+        hasKey: !!key,
+        masked: key ? maskApiKey(key) : null,
+      }
+    })
+  )
+}
+
+async function saveKey() {
+  if (!selectedProvider.value || !newKey.value.trim()) return
+  await storeApiKey(selectedProvider.value, newKey.value.trim())
+  statusMessage.value = `${PROVIDER_NAMES[selectedProvider.value] ?? selectedProvider.value} key saved`
+  statusError.value = false
+  newKey.value = ''
+  selectedProvider.value = ''
+  await loadProviders()
+}
+
+async function removeKey(provider: string) {
+  await deleteApiKey(provider)
+  statusMessage.value = `${PROVIDER_NAMES[provider] ?? provider} key removed`
+  statusError.value = false
+  await loadProviders()
+}
+
+onMounted(loadProviders)
+</script>
diff --git a/packages/app/src/composables/useAI.ts b/packages/app/src/composables/useAI.ts
index 1a28c457..9073f60a 100644
--- a/packages/app/src/composables/useAI.ts
+++ b/packages/app/src/composables/useAI.ts
@@ -1,6 +1,7 @@
 import { ref, computed } from 'vue'
 import { useChatStore } from '@/stores/chat'
 import { searchWeb } from '@/composables/useWebSearch'
+import { getApiKey } from '@/utils/key-vault'
 
 type Provider = 'claude' | 'openrouter' | 'mock'
 
@@ -136,9 +137,17 @@ async function streamClaude(
   webSearch: boolean,
   signal?: AbortSignal,
 ): Promise<void> {
+  const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+
+  // Use vault key if available, proxy uses its own key as fallback
+  const vaultKey = await getApiKey('claude')
+  if (vaultKey) {
+    headers['x-api-key'] = vaultKey
+  }
+
   const res = await fetch(CLAUDE_PATH, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers,
     body: JSON.stringify({
       model: activeModel.value,
       system: systemPrompt,
@@ -177,13 +186,21 @@ async function streamOpenRouter(
     ...messages.map((m) => ({ role: m.role as 'user' | 'assistant', content: m.content })),
   ]
 
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    'HTTP-Referer': window.location.origin,
+    'X-Title': 'AIUI',
+  }
+
+  // Use vault key if available, otherwise proxy handles auth
+  const vaultKey = await getApiKey('openrouter')
+  if (vaultKey) {
+    headers['Authorization'] = `Bearer ${vaultKey}`
+  }
+
   const res = await fetch(OPENROUTER_PATH, {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'HTTP-Referer': window.location.origin,
-      'X-Title': 'AIUI',
-    },
+    headers,
     body: JSON.stringify({
       model: activeModel.value,
       messages: orMessages,
diff --git a/packages/app/src/utils/key-vault.ts b/packages/app/src/utils/key-vault.ts
new file mode 100644
index 00000000..a54f70ff
--- /dev/null
+++ b/packages/app/src/utils/key-vault.ts
@@ -0,0 +1,114 @@
+/**
+ * Encrypted API key vault using IndexedDB + AES-256-GCM.
+ * Keys are encrypted with the session key derived from passphrase.
+ * Falls back to plaintext storage when crypto is disabled (dev mode).
+ */
+import {
+  isCryptoEnabled,
+  getSessionKey,
+  encryptToString,
+  decryptFromString,
+} from './crypto'
+
+const DB_NAME = 'aiui-vault'
+const DB_VERSION = 1
+const STORE_NAME = 'api-keys'
+
+function openDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION)
+    req.onupgradeneeded = () => {
+      const db = req.result
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: 'provider' })
+      }
+    }
+    req.onsuccess = () => resolve(req.result)
+    req.onerror = () => reject(req.error)
+  })
+}
+
+interface VaultRecord {
+  provider: string
+  value: string // encrypted or plaintext API key
+  encrypted: boolean
+}
+
+export async function storeApiKey(provider: string, key: string): Promise<void> {
+  if (typeof indexedDB === 'undefined') return
+  const db = await openDB()
+  const sessionKey = getSessionKey()
+  const useEncryption = isCryptoEnabled() && !!sessionKey
+
+  const value = useEncryption
+    ? await encryptToString(key, sessionKey!)
+    : key
+
+  const record: VaultRecord = { provider, value, encrypted: useEncryption }
+
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readwrite')
+    tx.objectStore(STORE_NAME).put(record)
+    tx.oncomplete = () => resolve()
+    tx.onerror = () => reject(tx.error)
+  })
+}
+
+export async function getApiKey(provider: string): Promise<string | null> {
+  if (typeof indexedDB === 'undefined') return null
+  const db = await openDB()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readonly')
+    const req = tx.objectStore(STORE_NAME).get(provider)
+    req.onsuccess = async () => {
+      const record = req.result as VaultRecord | undefined
+      if (!record) {
+        resolve(null)
+        return
+      }
+      if (record.encrypted) {
+        const sessionKey = getSessionKey()
+        if (!sessionKey) {
+          resolve(null)
+          return
+        }
+        try {
+          const decrypted = await decryptFromString(record.value, sessionKey)
+          resolve(decrypted)
+        } catch {
+          resolve(null)
+        }
+      } else {
+        resolve(record.value)
+      }
+    }
+    req.onerror = () => reject(req.error)
+  })
+}
+
+export async function deleteApiKey(provider: string): Promise<void> {
+  if (typeof indexedDB === 'undefined') return
+  const db = await openDB()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readwrite')
+    tx.objectStore(STORE_NAME).delete(provider)
+    tx.oncomplete = () => resolve()
+    tx.onerror = () => reject(tx.error)
+  })
+}
+
+export async function listProviders(): Promise<string[]> {
+  if (typeof indexedDB === 'undefined') return []
+  const db = await openDB()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readonly')
+    const req = tx.objectStore(STORE_NAME).getAllKeys()
+    req.onsuccess = () => resolve(req.result as string[])
+    req.onerror = () => reject(req.error)
+  })
+}
+
+export function maskApiKey(key: string): string {
+  if (key.length <= 4) return '****'
+  return '****' + key.slice(-4)
+}