feat: onborading flow, add support for Anthropic Models, update settings ui #6
Conversation
|
@AlenVelocity is attempting to deploy a commit to the Harsh's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughSupport for the Anthropic AI provider and its models has been added across the backend and frontend. New models are registered, the chat API can now route requests to Anthropic, and the onboarding and settings UI have been updated to allow users to add Anthropic API keys. The onboarding flow was refactored for improved user experience. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Onboarding
participant APIKeyForm
participant APIKeyStore
participant ChatAPI
participant AnthropicSDK
User->>Onboarding: Starts onboarding
Onboarding->>User: Shows welcome, provider selection
User->>Onboarding: Selects providers
Onboarding->>APIKeyForm: Shows key input for selected providers
User->>APIKeyForm: Enters API keys
APIKeyForm->>APIKeyStore: Stores API keys
Onboarding->>User: Shows completion step
User->>ChatAPI: Sends chat request (model: Claude 3.5/3.7)
ChatAPI->>AnthropicSDK: Forwards request with API key
AnthropicSDK-->>ChatAPI: Returns response
ChatAPI-->>User: Sends AI response
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
frontend/components/APIKeyForm.tsxOops! Something went wrong! :( ESLint: 9.28.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.28.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. frontend/components/Onboarding.tsxOops! Something went wrong! :( ESLint: 9.28.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.28.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. app/api/chat/route.tsOops! Something went wrong! :( ESLint: 9.28.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.28.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting.
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
lib/models.ts (1)
54-69: Check model ordering consistency.The models are added in a different order in the
MODEL_CONFIGSobject compared to theAI_MODELSarray. For maintainability, consider keeping the same order in both places.Apply this diff to maintain consistent ordering:
'Claude 3.5 Sonnet': { modelId: 'claude-3-5-sonnet-20241022', provider: 'anthropic', headerKey: 'X-Anthropic-API-Key', }, + 'Claude 3.5 Haiku': { + modelId: 'claude-3-5-haiku-20241022', + provider: 'anthropic', + headerKey: 'X-Anthropic-API-Key', + }, 'Claude 3.7 Sonnet': { modelId: 'claude-3-7-sonnet-20250219', provider: 'anthropic', headerKey: 'X-Anthropic-API-Key', }, - - 'Claude 3.5 Haiku': { - modelId: 'claude-3-5-haiku-20241022', - provider: 'anthropic', - headerKey: 'X-Anthropic-API-Key', - },frontend/components/Onboarding.tsx (1)
249-252: Use consistent routing pattern.The final step uses an anchor tag instead of the React Router
Linkcomponent, which is inconsistent with the rest of the application routing pattern.Apply this diff to use consistent routing:
- <Button asChild className="ml-auto"> - <a href="/chat">Start Chatting</a> - </Button> + <Button asChild className="ml-auto"> + <Link to="/chat">Start Chatting</Link> + </Button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
app/api/chat/route.ts(2 hunks)frontend/components/APIKeyForm.tsx(4 hunks)frontend/components/Onboarding.tsx(1 hunks)frontend/routes/Home.tsx(2 hunks)frontend/routes/Settings.tsx(1 hunks)frontend/stores/APIKeyStore.ts(2 hunks)lib/models.ts(2 hunks)package.json(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
frontend/routes/Home.tsx (1)
frontend/components/Onboarding.tsx (1)
Onboarding(67-258)
frontend/routes/Settings.tsx (4)
frontend/components/ui/button.tsx (2)
buttonVariants(59-59)Button(59-59)frontend/components/ui/ThemeToggler.tsx (1)
ThemeToggler(9-24)frontend/components/ui/card.tsx (4)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardContent(91-91)frontend/components/APIKeyForm.tsx (1)
APIKeyForm(28-60)
frontend/components/APIKeyForm.tsx (2)
frontend/components/ui/badge.tsx (1)
Badge(46-46)frontend/components/ui/input.tsx (1)
Input(21-21)
🪛 Biome (1.9.4)
app/api/chat/route.ts
[error] 39-39: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
🔇 Additional comments (13)
package.json (1)
12-12: LGTM! Necessary dependency for Anthropic integration.The addition of the
@ai-sdk/anthropicpackage is required for the new Anthropic model support and follows the same versioning pattern as other AI SDK dependencies.frontend/stores/APIKeyStore.ts (2)
4-4: LGTM! Properly extends provider support.The addition of 'anthropic' to the PROVIDERS array correctly maintains the const assertion and type safety.
42-42: LGTM! Consistent with existing key initialization pattern.The anthropic key initialization follows the same pattern as other providers in the store.
app/api/chat/route.ts (1)
4-4: LGTM! Necessary import for Anthropic integration.The import of
createAnthropicis required for the new provider support.frontend/routes/Home.tsx (2)
1-1: LGTM! Updated to use improved onboarding component.The import change correctly references the new Onboarding component that provides a better user experience with multi-step guidance.
15-17: LGTM! Simplified rendering with improved UX.The replacement of APIKeyManager with the Onboarding component provides a cleaner implementation while offering users a guided multi-step onboarding experience.
frontend/routes/Settings.tsx (2)
1-15: LGTM! Well-structured imports and type definitions.The imports are well-organized and the
SettingsTabtype provides good type safety for the tab system.
34-58: Excellent sticky header implementation.The header design with navigation, title, description, and theme toggler provides great user experience with the sticky positioning and backdrop blur effects.
frontend/components/Onboarding.tsx (2)
67-99: Excellent onboarding flow logic!The component provides great UX with:
- Clear state management for steps and providers
- Auto-advancement when API keys are detected
- Required provider enforcement for Google
- Intuitive navigation controls
52-57:Details
❌ Incorrect review comment
Verify model consistency with lib/models.ts.
The Anthropic models listed here should match exactly with those defined in
lib/models.ts. Currently missing "Claude 3.7 Sonnet" from the models array.
🏁 Script executed:
#!/bin/bash # Description: Compare model lists between Onboarding and models.ts files echo "Models in Onboarding.tsx:" rg -A 1 "models.*Claude" frontend/components/Onboarding.tsx echo -e "\nModels in lib/models.ts:" rg "Claude.*Sonnet|Claude.*Haiku" lib/models.tsLength of output: 476
No action required: Anthropic model lists are consistent
The
modelsarray infrontend/components/Onboarding.tsx(['Claude 3.5 Sonnet', 'Claude 3.5 Haiku', 'Claude 3.7 Sonnet']) matches exactly with the entries inlib/models.ts. No discrepancies found.Likely an incorrect or invalid review comment.
frontend/components/APIKeyForm.tsx (3)
28-60: Excellent UI improvements and privacy messaging!The refactored layout with clear privacy messaging, centered design, and visual hierarchy significantly improves the user experience. The privacy-first messaging builds trust with users.
200-206: Good security improvement with password input type.Changing the input type to "password" prevents API keys from being visible in plain text, which is a good security practice.
122-125: Well-implemented dynamic provider filtering.The conditional rendering based on
selectedProvidersallows for flexible usage in both onboarding and settings contexts while maintaining clean code organization.
| case 'anthropic': | ||
| const anthropic = createAnthropic({ apiKey }); | ||
| aiModel = anthropic(modelConfig.modelId); | ||
| break; |
There was a problem hiding this comment.
Fix variable scoping issue in switch case.
The variable declaration should be wrapped in a block to prevent potential access from other switch cases.
Apply this diff to fix the scoping issue:
- case 'anthropic':
- const anthropic = createAnthropic({ apiKey });
- aiModel = anthropic(modelConfig.modelId);
- break;
+ case 'anthropic': {
+ const anthropic = createAnthropic({ apiKey });
+ aiModel = anthropic(modelConfig.modelId);
+ break;
+ }Consider applying the same pattern to other cases for consistency:
- case 'google':
- const google = createGoogleGenerativeAI({ apiKey });
- aiModel = google(modelConfig.modelId);
- break;
+ case 'google': {
+ const google = createGoogleGenerativeAI({ apiKey });
+ aiModel = google(modelConfig.modelId);
+ break;
+ }
- case 'openai':
- const openai = createOpenAI({ apiKey });
- aiModel = openai(modelConfig.modelId);
- break;
+ case 'openai': {
+ const openai = createOpenAI({ apiKey });
+ aiModel = openai(modelConfig.modelId);
+ break;
+ }
- case 'openrouter':
- const openrouter = createOpenRouter({ apiKey });
- aiModel = openrouter(modelConfig.modelId);
- break;
+ case 'openrouter': {
+ const openrouter = createOpenRouter({ apiKey });
+ aiModel = openrouter(modelConfig.modelId);
+ break;
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| case 'anthropic': | |
| const anthropic = createAnthropic({ apiKey }); | |
| aiModel = anthropic(modelConfig.modelId); | |
| break; | |
| case 'anthropic': { | |
| const anthropic = createAnthropic({ apiKey }); | |
| aiModel = anthropic(modelConfig.modelId); | |
| break; | |
| } | |
| case 'google': { | |
| const google = createGoogleGenerativeAI({ apiKey }); | |
| aiModel = google(modelConfig.modelId); | |
| break; | |
| } | |
| case 'openai': { | |
| const openai = createOpenAI({ apiKey }); | |
| aiModel = openai(modelConfig.modelId); | |
| break; | |
| } | |
| case 'openrouter': { | |
| const openrouter = createOpenRouter({ apiKey }); | |
| aiModel = openrouter(modelConfig.modelId); | |
| break; | |
| } |
🧰 Tools
🪛 Biome (1.9.4)
[error] 39-39: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
🤖 Prompt for AI Agents
In app/api/chat/route.ts around lines 38 to 41, the variable 'anthropic' is
declared directly inside the switch case without a block, which can cause
scoping issues. To fix this, wrap the case body in curly braces to create a
block scope around the 'anthropic' declaration. Also, review other switch cases
and apply the same block scoping pattern for consistency and to avoid similar
issues.
| 'Claude 3.5 Sonnet', | ||
| 'Claude 3.5 Haiku', | ||
| 'Claude 3.7 Sonnet', |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify Anthropic model IDs and availability.
The new Anthropic models have been added consistently with the existing pattern. However, please verify that the model IDs match Anthropic's official API documentation, especially for "Claude 3.7 Sonnet" which appears to be a newer model.
🌐 Web query:
What are the current available Anthropic Claude model IDs and their official names as of 2025?
💡 Result:
As of June 2025, Anthropic has several Claude models available, with the most recent additions being the Claude 4 family released in May 2025. Here's a comprehensive list of the current available Claude models and their corresponding model IDs:
Claude 4 Family
Claude Opus 4
- Model ID:
claude-opus-4-20250514 - Released: May 22, 2025[9]
Claude Sonnet 4
- Model ID:
claude-sonnet-4-20250514 - Released: May 22, 2025[9]
Claude 3.7 Family
Claude Sonnet 3.7
- Model ID:
claude-3-7-sonnet-20250219 - Latest alias:
claude-3-7-sonnet-latest - Released: February 2025[3]
Claude 3.5 Family
Claude Sonnet 3.5
- Model ID:
claude-3-5-sonnet-20240620 - Released: June 2024[1]
Claude Haiku 3.5
- Model ID:
claude-3-5-haiku-20241022 - Latest alias:
claude-3-5-haiku-latest - Released: October 2024
Claude 3 Family
Claude 3 Opus
- Model ID:
claude-3-opus-20240229 - Latest alias:
claude-3-opus-latest - Released: March 2024[1]
Claude 3 Sonnet
- Model ID:
claude-3-sonnet-20240229 - Released: March 2024[1]
Claude 3 Haiku
- Model ID:
claude-3-haiku-20240307 - Released: March 2024[1]
It's worth noting that Anthropic has deprecated several older models, including Claude 2, Claude 2.1, and Claude Sonnet 3, as announced on January 21, 2025[7]. For production applications, Anthropic recommends using specific model versions (like claude-3-7-sonnet-20250219) rather than the -latest aliases to ensure consistent behavior[1].
Citations:
- 1: https://docs.anthropic.com/en/docs/about-claude/models
- 2: https://www.anthropic.com/claude
- 3: https://justainews.com/blog/anthropic-claude-models-explained/
- 4: https://en.wikipedia.org/wiki/Claude_(language_model)
- 5: https://cloud.google.com/vertex-ai/generative-ai/docs/partner-models/claude
- 6: https://www.metaculus.com/c/kiko/35271/new-anthropic-model-in-2025/
- 7: https://docs.anthropic.com/en/release-notes/api
- 8: https://docs.aws.amazon.com/bedrock/latest/userguide/model-parameters-claude.html
- 9: https://www.anthropic.com/news/claude-4
- 10: https://docs.litellm.ai/docs/providers/anthropic
Specify explicit Anthropic model IDs in lib/models.ts
To ensure stability and match Anthropic’s official API, update the modelId values rather than relying on display names or -latest aliases:
• lib/models.ts (around lines 10–12):
– “Claude 3.5 Sonnet” → modelId: claude-3-5-sonnet-20240620
– “Claude 3.5 Haiku” → modelId: claude-3-5-haiku-20241022
– “Claude 3.7 Sonnet” → modelId: claude-3-7-sonnet-20250219
Using these full version identifiers prevents unexpected behavior when aliases are updated.
🤖 Prompt for AI Agents
In lib/models.ts around lines 10 to 12, the Anthropic model IDs are currently
specified by display names like "Claude 3.5 Sonnet" and "Claude 3.7 Sonnet"
instead of their explicit versioned model IDs. To fix this, replace these
display names with the exact modelId strings from Anthropic's official API: use
"claude-3-5-sonnet-20240620" for Claude 3.5 Sonnet, "claude-3-5-haiku-20241022"
for Claude 3.5 Haiku, and "claude-3-7-sonnet-20250219" for Claude 3.7 Sonnet.
This ensures stable and consistent model usage without relying on aliases.
| const handleClearAllData = () => { | ||
| if (confirm('Are you sure you want to clear all data? This will remove all API keys and chat history.')) { | ||
| localStorage.clear(); | ||
| window.location.href = '/'; | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve data clearing specificity and user experience.
The current implementation has several issues:
localStorage.clear()removes ALL localStorage data, potentially affecting other applications- Native
confirm()dialog is inconsistent with the modern UI design - No error handling if clearing fails
Apply this diff to use a more specific and user-friendly approach:
const handleClearAllData = () => {
- if (confirm('Are you sure you want to clear all data? This will remove all API keys and chat history.')) {
- localStorage.clear();
- window.location.href = '/';
- }
+ // Use a proper modal/dialog component instead of native confirm
+ // Clear only app-specific data instead of everything
+ try {
+ const keysToRemove = Object.keys(localStorage).filter(key =>
+ key.startsWith('chat-app-') || key.includes('api-key') || key.includes('chat-history')
+ );
+ keysToRemove.forEach(key => localStorage.removeItem(key));
+ window.location.href = '/';
+ } catch (error) {
+ console.error('Failed to clear data:', error);
+ // Show error toast
+ }
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleClearAllData = () => { | |
| if (confirm('Are you sure you want to clear all data? This will remove all API keys and chat history.')) { | |
| localStorage.clear(); | |
| window.location.href = '/'; | |
| } | |
| }; | |
| const handleClearAllData = () => { | |
| // Use a proper modal/dialog component instead of native confirm | |
| // Clear only app-specific data instead of everything | |
| try { | |
| const keysToRemove = Object.keys(localStorage).filter(key => | |
| key.startsWith('chat-app-') || key.includes('api-key') || key.includes('chat-history') | |
| ); | |
| keysToRemove.forEach(key => localStorage.removeItem(key)); | |
| window.location.href = '/'; | |
| } catch (error) { | |
| console.error('Failed to clear data:', error); | |
| // Show error toast | |
| } | |
| }; |
🤖 Prompt for AI Agents
In frontend/routes/Settings.tsx around lines 26 to 31, replace the use of
localStorage.clear() with targeted removal of only the keys related to your
app's API keys and chat history to avoid affecting other data. Replace the
native confirm() dialog with a custom modal or UI component consistent with your
app's design for better user experience. Add error handling around the data
removal process to catch and handle any failures gracefully, possibly showing an
error message to the user.
| id: 'anthropic', | ||
| label: 'Anthropic API Key', | ||
| models: ['Claude 3.5 Sonnet', 'Claude 3.5 Haiku'], | ||
| linkUrl: 'https://console.anthropic.com/settings/keys', | ||
| placeholder: 'sk-ant-...', | ||
| required: false, | ||
| }, |
There was a problem hiding this comment.
Update Anthropic models to match lib/models.ts.
The Anthropic models list is incomplete - missing "Claude 3.7 Sonnet" which is defined in lib/models.ts.
Apply this diff to include all Anthropic models:
{
id: 'anthropic',
label: 'Anthropic API Key',
- models: ['Claude 3.5 Sonnet', 'Claude 3.5 Haiku'],
+ models: ['Claude 3.5 Sonnet', 'Claude 3.5 Haiku', 'Claude 3.7 Sonnet'],
linkUrl: 'https://console.anthropic.com/settings/keys',
placeholder: 'sk-ant-...',
required: false,
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| id: 'anthropic', | |
| label: 'Anthropic API Key', | |
| models: ['Claude 3.5 Sonnet', 'Claude 3.5 Haiku'], | |
| linkUrl: 'https://console.anthropic.com/settings/keys', | |
| placeholder: 'sk-ant-...', | |
| required: false, | |
| }, | |
| { | |
| id: 'anthropic', | |
| label: 'Anthropic API Key', | |
| models: ['Claude 3.5 Sonnet', 'Claude 3.5 Haiku', 'Claude 3.7 Sonnet'], | |
| linkUrl: 'https://console.anthropic.com/settings/keys', | |
| placeholder: 'sk-ant-...', | |
| required: false, | |
| }, |
🤖 Prompt for AI Agents
In frontend/components/APIKeyForm.tsx around lines 105 to 111, the list of
Anthropic models is missing "Claude 3.7 Sonnet" as defined in lib/models.ts.
Update the models array for Anthropic to include "Claude 3.7 Sonnet" along with
the existing models to ensure consistency with lib/models.ts.
|
should we replace claude 3.5 3.7 models with 4s ? |
2 participants
Demo Video: https://www.loom.com/share/ca8bc05237ac4ad7851a87e26f0fecfd?sid=12fb659a-39f9-48a3-b763-d0161c788158
Summary by CodeRabbit
New Features
Improvements
Chores