AI Button UX — Where to Put It, How to Label It, What to Show While Waiting

Source: Dev.to

The AI feature is only as good as the UI around it. A powerful diagnosis that’s hard to trigger, slow to show, or confusing to read doesn’t get used.

Here’s what I learned from iterating on HiyokoLogcat’s AI button.

Where to put the trigger

Inline with the content, not in a toolbar.

My first version had an “AI Diagnose” button in the top toolbar. Users had to spot the error, note the line number, click the toolbar button, and somehow tell it which line.

Fix: put a small icon directly on each error line. Click the icon → diagnose that line. Zero ambiguity.

{logLines.map((line, idx) => (
  
    {line.message}
    {line.level === 'E' && (
       handleDiagnose(idx)}
        title="AI診断"
      >
        🐥
      
    )}
  
))}

Show the button only on error lines. No button on debug/info lines — that would be noise.

How to label it

Don’t say “AI.” Users don’t care about the implementation.

One word. Action‑oriented. No tech jargon.

What to show while waiting

Three states, three UIs:

type DiagnosisState = 'idle' | 'loading' | 'done' | 'error';

function DiagnosisOverlay({ state, result }: Props) {
  if (state === 'idle') return null;

  return (
    
      {state === 'loading' && (
        <>
          🐥 診断中...
        
      )}
      {state === 'done' && (
        {result}
      )}
      {state === 'error' && (
        <>
          もう一度お試しください
          再試行
        
      )}
    
  );
}

• Loading: Show something immediately—a spinner or pulsing text. Three seconds of silence feels like a crash.
• Done: Show the result. No animation needed—the content itself is the payoff.
• Error: Short message + retry button. Never a raw error code.

Dismiss behavior

Three ways to close, all feel natural:

• Press Esc
• Click outside the overlay
• Click the X button

useEffect(() => {
  const onKey = (e: KeyboardEvent) => {
    if (e.key === 'Escape') onClose();
  };
  window.addEventListener('keydown', onKey);
  return () => window.removeEventListener('keydown', onKey);
}, []);

Don’t make users hunt for a close button. Esc is the universal “get out of this.”

The one thing that matters most

Speed of feedback. If clicking the button produces no visible response for even half a second, users will click it again or assume it didn’t work.

Show something within 100 ms of the click. The AI response can take 3 seconds; the UI response cannot.

const handleDiagnose = async (idx: number) => {
  setDiagnosisState('loading'); // ← immediate, < 1 ms
  const result = await invoke('diagnose', { idx }); // ← takes ~3 s
  setDiagnosisState('done');
  setResult(result);
};