This is a real life example of tweaking UI in Edna, my note taking application with super powers.

Ask AI is a simple AI chat: you write a question, send it to LLM model and get a response.

Here’s my first version of the UI:

What is good and bad about this version?

Good: there’s a learn more link. This is not an obvious feature because you need to pick a model and provide an API key. An easy access to an explanation is good.

Bad: It’s not clear enough that you need to provide an API key. To make things even more confusing, for models from OpenAI or xAI you can use either OpenAI/xAI key or OpenRouter key. Hence the Use OpenRouter checkbox. I decided to make things more explicit:

I think it’s clearer.

Checkbox is gone. Now I just ask for one or the other and will use whichever is given.

A learn more links to section of the docs explaining how to get API key and answering basic questions about API keys. In fact, there are duplicate links to make sure the user doesn’t miss them.

Added an error message if no API key is yet provided.

Added explicit placeholder Enter OpenAI API key text in input field.

All to make sure that if someone doesn’t know about API keys, the information is easy to reach.