feat(llm): add provider config in options

apps/client/src/translations/en/translation.json

@@ -1632,7 +1632,9 @@
     "tokens_used_with_model": "{{model}}: {{prompt}} prompt + {{completion}} completion = {{total}} tokens",
     "tokens_used_with_model_and_cost": "{{model}}: {{prompt}} prompt + {{completion}} completion = {{total}} tokens (~${{cost}})",
     "tokens": "tokens",
-    "context_used": "{{percentage}}% used"
+    "context_used": "{{percentage}}% used",
+    "note_context_enabled": "Click to disable note context: {{title}}",
+    "note_context_disabled": "Click to include current note in context"
   },
   "sidebar_chat": {
     "title": "AI Chat",
@@ -2267,6 +2269,18 @@
   },
   "llm": {
     "settings_title": "AI / LLM",
-    "settings_description": "Configure AI and Large Language Model integrations."
+    "settings_description": "Configure AI and Large Language Model integrations.",
+    "add_provider": "Add Provider",
+    "add_provider_title": "Add AI Provider",
+    "configured_providers": "Configured Providers",
+    "no_providers_configured": "No providers configured yet.",
+    "provider_name": "Name",
+    "provider_type": "Provider",
+    "actions": "Actions",
+    "delete_provider": "Delete",
+    "delete_provider_confirmation": "Are you sure you want to delete the provider \"{{name}}\"?",
+    "api_key": "API Key",
+    "api_key_placeholder": "Enter your API key",
+    "cancel": "Cancel"
   }
 }

apps/client/src/widgets/type_widgets/options/llm.tsx

@@ -1,10 +1,104 @@
+import { useCallback, useMemo, useState } from "preact/hooks";
 import { t } from "../../../services/i18n";
+import Button from "../../react/Button";
 import OptionsSection from "./components/OptionsSection";
+import AddProviderModal, { type LlmProviderConfig, PROVIDER_TYPES } from "./llm/AddProviderModal";
+import ActionButton from "../../react/ActionButton";
+import dialog from "../../../services/dialog";
+import { useTriliumOption } from "../../react/hooks";
 
 export default function LlmSettings() {
+    const [providersJson, setProvidersJson] = useTriliumOption("llmProviders");
+    const providers = useMemo<LlmProviderConfig[]>(() => {
+        try {
+            return providersJson ? JSON.parse(providersJson) : [];
+        } catch {
+            return [];
+        }
+    }, [providersJson]);
+    const setProviders = useCallback((newProviders: LlmProviderConfig[]) => {
+        setProvidersJson(JSON.stringify(newProviders));
+    }, [setProvidersJson]);
+    const [showAddModal, setShowAddModal] = useState(false);
+
+    const handleAddProvider = useCallback((newProvider: LlmProviderConfig) => {
+        setProviders([...providers, newProvider]);
+    }, [providers, setProviders]);
+
+    const handleDeleteProvider = useCallback(async (providerId: string, providerName: string) => {
+        if (!(await dialog.confirm(t("llm.delete_provider_confirmation", { name: providerName })))) {
+            return;
+        }
+        setProviders(providers.filter(p => p.id !== providerId));
+    }, [providers, setProviders]);
+
     return (
         <OptionsSection title={t("llm.settings_title")}>
             <p>{t("llm.settings_description")}</p>
+
+            <Button
+                size="small"
+                icon="bx bx-plus"
+                text={t("llm.add_provider")}
+                onClick={() => setShowAddModal(true)}
+            />
+
+            <hr />
+
+            <h5>{t("llm.configured_providers")}</h5>
+            <ProviderList
+                providers={providers}
+                onDelete={handleDeleteProvider}
+            />
+
+            <AddProviderModal
+                show={showAddModal}
+                onHidden={() => setShowAddModal(false)}
+                onSave={handleAddProvider}
+            />
         </OptionsSection>
     );
 }
+
+interface ProviderListProps {
+    providers: LlmProviderConfig[];
+    onDelete: (providerId: string, providerName: string) => Promise<void>;
+}
+
+function ProviderList({ providers, onDelete }: ProviderListProps) {
+    if (!providers.length) {
+        return <div>{t("llm.no_providers_configured")}</div>;
+    }
+
+    return (
+        <div style={{ overflow: "auto" }}>
+            <table className="table table-stripped">
+                <thead>
+                    <tr>
+                        <th>{t("llm.provider_name")}</th>
+                        <th>{t("llm.provider_type")}</th>
+                        <th>{t("llm.actions")}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {providers.map((provider) => {
+                        const providerType = PROVIDER_TYPES.find(p => p.id === provider.provider);
+                        return (
+                            <tr key={provider.id}>
+                                <td>{provider.name}</td>
+                                <td>{providerType?.name || provider.provider}</td>
+                                <td>
+                                    <ActionButton
+                                        icon="bx bx-trash"
+                                        text={t("llm.delete_provider")}
+                                        onClick={() => onDelete(provider.id, provider.name)}
+                                    />
+                                </td>
+                            </tr>
+                        );
+                    })}
+                </tbody>
+            </table>
+        </div>
+    );
+}

apps/client/src/widgets/type_widgets/options/llm/AddProviderModal.tsx

@@ -0,0 +1,106 @@
+import { createPortal } from "preact/compat";
+import { useState, useRef } from "preact/hooks";
+import Modal from "../../../react/Modal";
+import FormGroup from "../../../react/FormGroup";
+import FormSelect from "../../../react/FormSelect";
+import FormTextBox from "../../../react/FormTextBox";
+import { t } from "../../../../services/i18n";
+
+export interface LlmProviderConfig {
+    id: string;
+    name: string;
+    provider: string;
+    apiKey: string;
+}
+
+export interface ProviderType {
+    id: string;
+    name: string;
+}
+
+export const PROVIDER_TYPES: ProviderType[] = [
+    { id: "anthropic", name: "Anthropic" }
+];
+
+interface AddProviderModalProps {
+    show: boolean;
+    onHidden: () => void;
+    onSave: (provider: LlmProviderConfig) => void;
+}
+
+export default function AddProviderModal({ show, onHidden, onSave }: AddProviderModalProps) {
+    const [selectedProvider, setSelectedProvider] = useState(PROVIDER_TYPES[0].id);
+    const [apiKey, setApiKey] = useState("");
+    const formRef = useRef<HTMLFormElement>(null);
+
+    function handleSubmit() {
+        if (!apiKey.trim()) {
+            return;
+        }
+
+        const providerType = PROVIDER_TYPES.find(p => p.id === selectedProvider);
+        const newProvider: LlmProviderConfig = {
+            id: `${selectedProvider}_${Date.now()}`,
+            name: providerType?.name || selectedProvider,
+            provider: selectedProvider,
+            apiKey: apiKey.trim()
+        };
+
+        onSave(newProvider);
+        resetForm();
+        onHidden();
+    }
+
+    function resetForm() {
+        setSelectedProvider(PROVIDER_TYPES[0].id);
+        setApiKey("");
+    }
+
+    function handleCancel() {
+        resetForm();
+        onHidden();
+    }
+
+    return createPortal(
+        <Modal
+            show={show}
+            onHidden={handleCancel}
+            onSubmit={handleSubmit}
+            formRef={formRef}
+            title={t("llm.add_provider_title")}
+            className="add-provider-modal"
+            size="md"
+            footer={
+                <>
+                    <button type="button" className="btn btn-secondary" onClick={handleCancel}>
+                        {t("llm.cancel")}
+                    </button>
+                    <button type="submit" className="btn btn-primary" disabled={!apiKey.trim()}>
+                        {t("llm.add_provider")}
+                    </button>
+                </>
+            }
+        >
+            <FormGroup name="provider-type" label={t("llm.provider_type")}>
+                <FormSelect
+                    values={PROVIDER_TYPES}
+                    keyProperty="id"
+                    titleProperty="name"
+                    currentValue={selectedProvider}
+                    onChange={setSelectedProvider}
+                />
+            </FormGroup>
+
+            <FormGroup name="api-key" label={t("llm.api_key")}>
+                <FormTextBox
+                    type="password"
+                    currentValue={apiKey}
+                    onChange={setApiKey}
+                    placeholder={t("llm.api_key_placeholder")}
+                    autoFocus
+                />
+            </FormGroup>
+        </Modal>,
+        document.body
+    );
+}

apps/server/src/routes/api/options.ts

@@ -104,7 +104,8 @@ const ALLOWED_OPTIONS = new Set<OptionNames>([
     "experimentalFeatures",
     "newLayout",
     "mfaEnabled",
-    "mfaMethod"
+    "mfaMethod",
+    "llmProviders"
 ]);
 
 function getOptions() {

packages/commons/src/lib/options_interface.ts

@@ -140,6 +140,10 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
 
     seenCallToActions: string;
     experimentalFeatures: string;
+
+    // AI / LLM
+    /** JSON array of configured LLM providers with their API keys */
+    llmProviders: string;
 }
 
 export type OptionNames = keyof OptionDefinitions;