If no API key configured, let users provide one

[simonw]

A pattern I like for this is storing the user's API key in localstorage in their browser and sending it each time it's needed - but avoiding storing it on the server or in any log files anywhere, so I don't need to worry that a breach of my application could leak other people's API keys.

I built a simple tool that does that here: https://tools.simonwillison.net/haiku - code here: https://github.com/simonw/tools/blob/baebe5777294e4ecb5a482aca4919be214132024/haiku.html#L139

function getApiKey() {
  let apiKey = localStorage.getItem("ANTHROPIC_API_KEY");
  if (!apiKey) {
    apiKey = prompt("Please enter your Anthropic API key:");
    if (apiKey) {
      localStorage.setItem("ANTHROPIC_API_KEY", apiKey);
    }
  }
  return apiKey;
}

[simonw]

Using localstorage could be a simple way to support persisting user's previous image uploads and form generations as well - then there's no need to store anything server-side.

[timpaul]

Lovely idea - thanks @simonw :-)