MOSIP-45483(nexus-ui): add step-by-step API key generation guide to Settings page

[mohanachandran-s]

Problem

The Settings page's API key field only had a bare link ("Get a free key at
console.groq.com") with no indication of what to actually do once there —
first-time users had to figure out the whole signup/key-creation flow on
their own, per provider.

Fix

Add a collapsible "How do I get a {Provider} API key?" walkthrough right
above the key input, using the same <details>/<summary> pattern
already used for the MCP setup guide further down the same page.

PROVIDER_META gains:

• keySteps: string[] — numbered instructions (sign in → find API keys →
  create → copy → paste), tailored per provider's actual console UI
• keyNote?: string — a one-line caveat where relevant (e.g. Anthropic/
  OpenAI require billing set up; Groq has a free tier)

Covers all four supported providers: Groq, Anthropic, OpenAI, xAI. The
guide swaps automatically when switching provider chips, since it reads
off the same PROVIDER_META[llmProvider] already driving the existing
key hint/link.

Testing

• npx tsc -p tsconfig.app.json --noEmit — passes

🤖 Generated with Claude Code

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: b13dddf8-bcc7-4022-9c24-02f0f409db46

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}