Add web-UI field for the Anthropic API key

Conversation mode needs an Anthropic key; previously only the
ANTHROPIC_API_KEY env var worked, which is awkward to set on the wireless
robot. Add an alternative: enter the key in the app's own settings UI.

- llm.py: get_api_key() reads ~/.config/talk/api_key first, then the env
var (so a key entered in the UI always wins); add has_api_key() and
save_api_key()
- main.py: POST /set_api_key endpoint; /status now also reports api_key_set
- static UI: "Einstellungen" section with a password field, save button,
and a live "key set?" indicator
- the key file lives outside the repo (chmod 600) so it is never committed
or packaged into the published Space

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

CLAUDE.md

@@ -32,7 +32,11 @@ reachy-mini-app run talk
 
 The control panel web UI is served at `http://0.0.0.0:8042` while the app runs.
 
-The `ANTHROPIC_API_KEY` environment variable must be set for conversation mode.
+Conversation mode needs an Anthropic API key. Provide it either via the
+`ANTHROPIC_API_KEY` environment variable, or by entering it in the app's web UI
+(`http://0.0.0.0:8042` → *Einstellungen*). A key entered in the UI is stored at
+`~/.config/talk/api_key` (chmod 600, outside the repo) and takes precedence over
+the env var.
 
 ## Publishing
 
@@ -75,7 +79,7 @@ SLEEPING → (speech detected) → TIME → CONVERSING → (silence/antenna pres
 
 - **`talk/tts.py`**: edge-tts (MS neural, `de-DE-KatjaNeural`) → MP3 → `media.play_sound()`. Falls back to espeak-ng. Blocks for estimated playback duration.
 - **`talk/stt.py`**: records from ReSpeaker (16 kHz float32), uses RMS-energy VAD (DoA is for head direction only), converts to mono 16-bit WAV, transcribes via Google Speech Recognition. Accepts an `idle_timeout` so a silent conversation returns to sleep.
-- **`talk/llm.py`**: stateless Claude API wrapper. Caller owns `messages` list. Requires `ANTHROPIC_API_KEY`.
+- **`talk/llm.py`**: stateless Claude API wrapper. Caller owns `messages` list. Resolves the API key via `get_api_key()` — the web-UI file (`~/.config/talk/api_key`) first, then `ANTHROPIC_API_KEY`. Also exposes `has_api_key()` and `save_api_key()` for the web UI.
 
 ## Key SDK APIs
 
@@ -104,4 +108,4 @@ reachy_mini.goto_sleep()
 
 ## Settings UI
 
-`talk/static/` polls `GET /status` every second. Returns `{state, last_user, last_assistant}`. Shows colour-coded status chip and conversation bubbles (user on right, assistant on left) during CONVERSING.
+`talk/static/` polls `GET /status` every second. Returns `{state, last_user, last_assistant, api_key_set}`. Shows colour-coded status chip and conversation bubbles (user on right, assistant on left) during CONVERSING. An *Einstellungen* section lets the user enter the Anthropic API key, which is `POST`ed to `/set_api_key` (`{api_key}`) and persisted via `save_api_key()`; the `api_key_set` flag drives a "key set?" indicator.

talk/llm.py

@@ -7,6 +7,7 @@ caller owns the history (keeps this module stateless and testable).
 
 import logging
 import os
+from pathlib import Path
 from typing import Optional
 
 logger = logging.getLogger(__name__)
@@ -19,6 +20,51 @@ SYSTEM_PROMPT = (
 MODEL = "claude-sonnet-4-6"
 MAX_TOKENS = 300
 
+# The API key can come from two places (file wins, so a key entered in the web
+# UI always takes precedence over a stale env var). The file lives OUTSIDE the
+# package directory so it is never committed or packaged into the published
+# Hugging Face Space.
+API_KEY_FILE = Path.home() / ".config" / "talk" / "api_key"
+
+
+def get_api_key() -> Optional[str]:
+    """Return the Anthropic API key — web-UI file first, then env var."""
+    try:
+        if API_KEY_FILE.is_file():
+            key = API_KEY_FILE.read_text(encoding="utf-8").strip()
+            if key:
+                return key
+    except OSError as exc:
+        logger.warning("Could not read API key file %s: %s", API_KEY_FILE, exc)
+    return os.environ.get("ANTHROPIC_API_KEY")
+
+
+def has_api_key() -> bool:
+    """True if a key is configured (without reading the secret on every call)."""
+    try:
+        if API_KEY_FILE.is_file() and API_KEY_FILE.stat().st_size > 0:
+            return True
+    except OSError:
+        pass
+    return bool(os.environ.get("ANTHROPIC_API_KEY"))
+
+
+def save_api_key(key: str) -> None:
+    """Persist the API key to a user-local file (chmod 600), creating parents.
+
+    Raises ValueError if the key is empty. Stored outside the package dir so it
+    never ends up in git or the published Space.
+    """
+    key = key.strip()
+    if not key:
+        raise ValueError("API key must not be empty")
+    API_KEY_FILE.parent.mkdir(parents=True, exist_ok=True)
+    API_KEY_FILE.write_text(key, encoding="utf-8")
+    try:
+        API_KEY_FILE.chmod(0o600)
+    except OSError:
+        pass
+
 
 def get_response(messages: list) -> Optional[str]:
     """Send messages to Claude and return the assistant reply.
@@ -36,9 +82,9 @@ def get_response(messages: list) -> Optional[str]:
     try:
         import anthropic
 
-        api_key = os.environ.get("ANTHROPIC_API_KEY")
+        api_key = get_api_key()
         if not api_key:
-            logger.error("ANTHROPIC_API_KEY not set")
+            logger.error("No API key set (web UI or ANTHROPIC_API_KEY env)")
             return None
 
         client = anthropic.Anthropic(api_key=api_key)

talk/main.py

@@ -21,9 +21,11 @@ from zoneinfo import ZoneInfo
 _TZ = ZoneInfo("Europe/Berlin")
 
 import numpy as np
+from fastapi import HTTPException
+from pydantic import BaseModel
 from reachy_mini import ReachyMini, ReachyMiniApp
 
-from talk.llm import get_response
+from talk.llm import get_response, has_api_key, save_api_key
 from talk.stt import record_utterance, transcribe
 from talk.tts import speak
 
@@ -108,6 +110,10 @@ class State(Enum):
     CONVERSING = auto()
 
 
+class ApiKeyRequest(BaseModel):
+    api_key: str
+
+
 class Talk(ReachyMiniApp):
     custom_app_url: str | None = "http://0.0.0.0:8042"
     request_media_backend: str | None = None
@@ -119,7 +125,20 @@ class Talk(ReachyMiniApp):
         @self.settings_app.get("/status")
         def get_status():
             with _lock:
-                return dict(_shared)
+                data = dict(_shared)
+            data["api_key_set"] = has_api_key()
+            return data
+
+        @self.settings_app.post("/set_api_key")
+        def set_api_key(body: ApiKeyRequest):
+            try:
+                save_api_key(body.api_key)
+            except ValueError as exc:
+                raise HTTPException(status_code=400, detail=str(exc))
+            except OSError as exc:
+                raise HTTPException(status_code=500, detail=f"Could not save key: {exc}")
+            logger.info("API key updated via web UI")
+            return {"ok": True, "api_key_set": True}
 
         reachy_mini.goto_sleep()
         state = State.SLEEPING

talk/static/index.html

@@ -13,6 +13,18 @@
         <div id="bubble-user" class="bubble user" style="display:none"></div>
         <div id="bubble-assistant" class="bubble assistant" style="display:none"></div>
     </div>
+
+    <details id="settings">
+        <summary>Einstellungen</summary>
+        <label for="api-key">Anthropic API-Key</label>
+        <div class="key-row">
+            <input type="password" id="api-key" placeholder="sk-ant-…"
+                   autocomplete="off" spellcheck="false">
+            <button id="save-key" type="button">Speichern</button>
+        </div>
+        <p id="key-status" class="key-status"></p>
+    </details>
+
     <script src="/static/main.js"></script>
 </body>
 </html>

talk/static/main.js

@@ -8,6 +8,54 @@ const STATE_LABELS = {
 
 const CONVERSATION_STATES = new Set(["listening", "processing", "responding"]);
 
+// --- API key settings ---------------------------------------------------
+const keyInput = document.getElementById("api-key");
+const keyStatus = document.getElementById("key-status");
+const saveBtn = document.getElementById("save-key");
+
+function showKeyStatus(text, cls) {
+    keyStatus.textContent = text;
+    keyStatus.className = "key-status " + (cls || "");
+}
+
+function reflectKeySet(isSet) {
+    // Don't clobber feedback while the user is editing the field.
+    if (document.activeElement === keyInput) return;
+    if (isSet) {
+        showKeyStatus("✓ API-Key ist gesetzt", "ok");
+    } else {
+        showKeyStatus("⚠ Kein API-Key gesetzt", "warn");
+    }
+}
+
+saveBtn.addEventListener("click", async () => {
+    const key = keyInput.value.trim();
+    if (!key) {
+        showKeyStatus("Bitte einen Key eingeben.", "warn");
+        return;
+    }
+    saveBtn.disabled = true;
+    try {
+        const r = await fetch("/set_api_key", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ api_key: key }),
+        });
+        if (r.ok) {
+            keyInput.value = "";
+            showKeyStatus("✓ API-Key gespeichert", "ok");
+        } else {
+            const err = await r.json().catch(() => ({}));
+            showKeyStatus("Fehler: " + (err.detail || r.status), "warn");
+        }
+    } catch (_) {
+        showKeyStatus("Netzwerkfehler beim Speichern", "warn");
+    } finally {
+        saveBtn.disabled = false;
+    }
+});
+
+// --- Status polling -----------------------------------------------------
 async function poll() {
     try {
         const r = await fetch("/status");
@@ -40,6 +88,8 @@ async function poll() {
         } else {
             assistantEl.style.display = "none";
         }
+
+        reflectKeySet(data.api_key_set);
     } catch (_) {}
 }
 

talk/static/style.css

@@ -55,3 +55,60 @@ h1 { margin-bottom: 1rem; }
     color: #14532d;
     align-self: flex-start;
 }
+
+#settings {
+    margin-top: 2rem;
+    border-top: 1px solid #eee;
+    padding-top: 1rem;
+    font-size: 0.95rem;
+}
+
+#settings summary {
+    cursor: pointer;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+}
+
+#settings label {
+    display: block;
+    margin-bottom: 0.35rem;
+    color: #555;
+}
+
+.key-row {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.key-row input {
+    flex: 1;
+    padding: 0.5rem 0.6rem;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    font-size: 0.95rem;
+}
+
+.key-row button {
+    padding: 0.5rem 0.9rem;
+    border: none;
+    border-radius: 8px;
+    background: #4f46e5;
+    color: #fff;
+    font-size: 0.95rem;
+    cursor: pointer;
+}
+
+.key-row button:disabled {
+    opacity: 0.6;
+    cursor: default;
+}
+
+.key-status {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    font-size: 0.9rem;
+    min-height: 1.2em;
+}
+
+.key-status.ok { color: #065f46; }
+.key-status.warn { color: #92400e; }