Skip to content

feat: AI: Ask for API key inline in chat input - #357

Merged
ilyabo merged 5 commits into
mainfrom
feat--Ask-for-API-key-inline-in-chat-input
Feb 11, 2026
Merged

ilyabo merged 5 commits into
mainfrom
feat--Ask-for-API-key-inline-in-chat-input

Conversation

@ilyabo

@ilyabo ilyabo commented Feb 11, 2026 •

Copy link
Copy Markdown
Collaborator
Kapture.2026-02-11.at.14.33.08.mp4

Summary by CodeRabbit

  • New Features
    • Inline API key input in the chat composer to enter and save provider API keys at runtime.
    • Per-provider API key error detection and tracking to surface authentication problems.
    • Dynamic retrieval of API keys and base URLs from settings so changes apply without reload.

@coderabbitai

coderabbitai Bot commented Feb 11, 2026 •

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

Adds an inline API-key input component to Chat.Composer, wires it to update provider settings, and introduces per-provider API key error tracking with runtime authentication-error detection in the chat transport.

Changes

Cohort / File(s) Summary
New Component
packages/ai-core/src/components/InlineApiKeyInput.tsx
Adds InlineApiKeyInput and InlineApiKeyInputButton—a password input + save action that calls an onSaveApiKey(provider, apiKey) callback.
Chat Component Surface
packages/ai-core/src/components/Chat.tsx
Exports InlineApiKeyInput on the Chat public surface; removes a duplicate ModelSelector import.
Query Controls
packages/ai-core/src/components/QueryControls.tsx
Detects and extracts InlineApiKeyInput from children, conditionally renders it when API key input is required or errored, and adapts focus/keyboard handling accordingly.
AI State / Slice
packages/ai-core/src/AiSlice.ts
Adds apiKeyErrors: Record<string, boolean> to state and public methods setApiKeyError(provider, hasError) and hasApiKeyError() to set/query provider-level API key errors; removed passing static apiKey/baseUrl into transport factory.
Types
packages/ai-core/src/types.ts
Adds setApiKeyError(provider: string, hasError: boolean) to AiStateForTransport interface.
Chat Transport
packages/ai-core/src/chatTransport.ts
Stops using static apiKey/baseUrl in config; fetches apiKey/baseUrl dynamically via state.ai.getApiKeyFromSettings()/getBaseUrlFromSettings(), adds isAuthenticationError detection (401/403 + common messages), and sets provider-level apiKey error via setApiKeyError on auth failure.
Example Integrations
examples/*/src/components/MainView.tsx
examples/ai-agent/src/..., examples/ai-core/src/..., examples/ai-rag/src/..., examples/ai/src/...
Imports useStoreWithAiSettings and wires an InlineApiKeyInput in Chat.Composer to call updateProvider(provider, { apiKey }) on save, enabling runtime per-provider API key updates.

Sequence Diagram

sequenceDiagram
    participant User
    participant InlineApiKeyInput
    participant MainView
    participant AiSlice
    participant ChatTransport

    User->>InlineApiKeyInput: Type API key and Save
    InlineApiKeyInput->>MainView: onSaveApiKey(provider, apiKey)
    MainView->>AiSlice: updateProvider(provider, { apiKey })
    AiSlice->>AiSlice: persist provider apiKey in settings

    User->>ChatTransport: Send chat request
    ChatTransport->>AiSlice: getApiKeyFromSettings()
    AiSlice-->>ChatTransport: return apiKey
    ChatTransport->>ChatTransport: perform API request

    alt Authentication error detected
        ChatTransport->>ChatTransport: isAuthenticationError() => true
        ChatTransport->>AiSlice: setApiKeyError(provider, true)
        AiSlice->>AiSlice: mark provider apiKey error
        ChatTransport-->>User: surface auth error
    end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Poem

🐰 I hopped inside the chat today, a tiny key in paw,
I tucked it in the composer where the user saw,
Providers learn their secrets, errors flagged with care,
Now keys can change at runtime — sniff! — a fresh spring air. 🔑

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 42.86% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main feature: adding inline API key input in the chat interface for requesting user API keys during chat interactions.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat--Ask-for-API-key-inline-in-chat-input

No actionable comments were generated in the recent review. 🎉


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

Comment @coderabbitai help to get the list of available commands and usage tips.

…r-API-key-inline-in-chat-input

Signed-off-by: Ilya Boyandin <[email protected]>
@ilyabo
ilyabo merged commit f256021 into main Feb 11, 2026
4 checks passed
@ilyabo
ilyabo deleted the feat--Ask-for-API-key-inline-in-chat-input branch February 11, 2026 14:04
@coderabbitai coderabbitai Bot mentioned this pull request Jun 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant