Skip to content

fix: /model command now switches active model #635

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CoderLuii wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: /model command now switches active model #635

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions server/routes/commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,7 @@ Custom commands can be created in:
model: currentModel
},
available: availableModels,
newModel: args.length > 0 ? args[0] : null,
message: args.length > 0
? `Switching to model: ${args[0]}`
: `Current model: ${currentModel}`
Expand Down
8 changes: 7 additions & 1 deletion src/components/chat/hooks/useChatComposerState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ interface UseChatComposerStateArgs {
cyclePermissionMode: () => void;
cursorModel: string;
claudeModel: string;
setClaudeModel: (model: string) => void;
codexModel: string;
geminiModel: string;
isLoading: boolean;
Expand Down Expand Up @@ -110,6 +111,7 @@ export function useChatComposerState({
cyclePermissionMode,
cursorModel,
claudeModel,
setClaudeModel,
codexModel,
geminiModel,
isLoading,
Expand Down Expand Up @@ -169,6 +171,10 @@ export function useChatComposerState({
break;

case 'model':
if (data.newModel) {
setClaudeModel(data.newModel);
safeLocalStorage.setItem('claude-model', data.newModel);
}
Comment on lines +174 to +177
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify how /model is handled and whether provider-specific setters are wired.
rg -n -C3 "case 'model'|newModel|setClaudeModel|setCursorModel|setCodexModel|setGeminiModel|claude-model|cursor-model|codex-model|gemini-model" \
  server/routes/commands.js \
  src/components/chat/hooks/useChatComposerState.ts \
  src/components/chat/view/ChatInterface.tsx

Repository: siteboon/claudecodeui

Length of output: 5536

🏁 Script executed:

#!/bin/bash
# Check if provider state is accessible and how other models are initialized/stored
rg -n "handleBuiltInCommand|setProvider|setCodexModel|setCursorModel|setGeminiModel" \
  src/components/chat/hooks/useChatComposerState.ts -A 5 -B 2 | head -100

Repository: siteboon/claudecodeui

Length of output: 886

🏁 Script executed:

#!/bin/bash
# Search for localStorage patterns to see if other providers use different keys
rg -n "localStorage|setItem|getItem" src/components/chat/hooks/useChatComposerState.ts

Repository: siteboon/claudecodeui

Length of output: 763

🏁 Script executed:

#!/bin/bash
# Check how the command gets dispatched and what context it has
rg -n "case 'model':" -A 10 -B 5 server/routes/commands.js

Repository: siteboon/claudecodeui

Length of output: 47

🏁 Script executed:

#!/bin/bash
# Find model command handling with broader search
rg -n "model" server/routes/commands.js | grep -E "(case|'model'|\bmodel\b)" | head -20

Repository: siteboon/claudecodeui

Length of output: 545

🏁 Script executed:

#!/bin/bash
# Look for how other models are initialized from storage
rg -n "cursorModel|codexModel|geminiModel" src/components/chat/hooks/useChatComposerState.ts -B 3 -A 3 | head -80

Repository: siteboon/claudecodeui

Length of output: 2421

🏁 Script executed:

#!/bin/bash
# Search for provider state handling in chat interface
rg -n "provider.*setClaudeModel|provider.*setCursorModel|if.*provider.*model" src/components/chat/

Repository: siteboon/claudecodeui

Length of output: 47

🏁 Script executed:

#!/bin/bash
# Find where models are initialized from localStorage
rg -n "useState.*Model|getItem.*model|CLAUDE_MODELS|CURSOR_MODELS|CODEX_MODELS|GEMINI_MODELS" \
  src/components/chat/hooks/useChatComposerState.ts -B 2 -A 2 | head -100

Repository: siteboon/claudecodeui

Length of output: 47

🏁 Script executed:

#!/bin/bash
# Check parent component to see how model state is created
rg -n "useChatComposerState|claudeModel|cursorModel" src/components/chat/view/ChatInterface.tsx \
  | grep -E "(useState|const.*Model|useChatComposerState)" | head -20

Repository: siteboon/claudecodeui

Length of output: 170

🏁 Script executed:

#!/bin/bash
# Read the hook file to find where models are initialized
head -150 src/components/chat/hooks/useChatComposerState.ts | tail -100

Repository: siteboon/claudecodeui

Length of output: 3234

🏁 Script executed:

#!/bin/bash
# Look for useState calls and model initialization
rg -n "useState|setClaudeModel|setCursorModel|setCodexModel|setGeminiModel" \
  src/components/chat/hooks/useChatComposerState.ts | head -30

Repository: siteboon/claudecodeui

Length of output: 851

🏁 Script executed:

#!/bin/bash
# Check ChatInterface.tsx to see where all model state is defined
rg -n "claudeModel|cursorModel|codexModel|geminiModel|useState" \
  src/components/chat/view/ChatInterface.tsx | head -40

Repository: siteboon/claudecodeui

Length of output: 384

🏁 Script executed:

#!/bin/bash
# Look for setCursor, setCodex, setGemini setters in ChatInterface
rg -n "setCursor|setCodex|setGemini|setClaudeModel" \
  src/components/chat/view/ChatInterface.tsx

Repository: siteboon/claudecodeui

Length of output: 361

🏁 Script executed:

#!/bin/bash
# Check what ChatComposer component does with the other model setters
rg -n "setCursorModel|setCodexModel|setGeminiModel" \
  src/components/chat/ -A 3 -B 3 | grep -E "\.tsx:|\.ts:" | head -40

Repository: siteboon/claudecodeui

Length of output: 3001

🏁 Script executed:

#!/bin/bash
# Check if there's documentation or comments about /model being Claude-only
rg -n "model.*command|/model|claude.*only" \
  server/routes/commands.js docs/ README.md 2>/dev/null | head -20

Repository: siteboon/claudecodeui

Length of output: 719

/model command handler should support all providers, not just Claude.

The handler at lines 174-177 always calls setClaudeModel() and updates claude-model storage, regardless of the active provider. When a non-Claude provider (cursor, codex, or gemini) is active, running /model fails to update that provider's active model.

To fix: Pass setCursorModel, setCodexModel, and setGeminiModel into useChatComposerState and route the update based on the current provider state:

case 'model':
  if (data.newModel) {
    if (provider === 'cursor') {
      setCursorModel(data.newModel);
      safeLocalStorage.setItem('cursor-model', data.newModel);
    } else if (provider === 'codex') {
      setCodexModel(data.newModel);
      safeLocalStorage.setItem('codex-model', data.newModel);
    } else if (provider === 'gemini') {
      setGeminiModel(data.newModel);
      safeLocalStorage.setItem('gemini-model', data.newModel);
    } else {
      setClaudeModel(data.newModel);
      safeLocalStorage.setItem('claude-model', data.newModel);
    }
  }

The README documents support for "Claude, GPT, and Gemini model families," confirming /model should work across all providers.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/chat/hooks/useChatComposerState.ts` around lines 174 - 177,
The /model command handler in useChatComposerState always calls setClaudeModel
and writes 'claude-model' to storage even when the active provider is
cursor/codex/gemini; update useChatComposerState to accept setCursorModel,
setCodexModel, and setGeminiModel (in addition to setClaudeModel), read the
current provider value, and route updates: call the corresponding setter
(setCursorModel/setCodexModel/setGeminiModel/setClaudeModel) and write the
matching key ('cursor-model'/'codex-model'/'gemini-model'/'claude-model') to
safeLocalStorage when data.newModel is present so the /model command updates the
correct provider's active model.

addMessage({
type: 'assistant',
content: `**Current Model**: ${data.current.model}\n\n**Available Models**:\n\nClaude: ${data.available.claude.join(', ')}\n\nCursor: ${data.available.cursor.join(', ')}`,
Expand Down Expand Up @@ -232,7 +238,7 @@ export function useChatComposerState({
console.warn('Unknown built-in command action:', action);
}
},
[onFileOpen, onShowSettings, addMessage, clearMessages, rewindMessages],
[onFileOpen, onShowSettings, addMessage, clearMessages, rewindMessages, setClaudeModel],
);

const handleCustomCommand = useCallback(async (result: CommandExecutionResult) => {
Expand Down
1 change: 1 addition & 0 deletions src/components/chat/view/ChatInterface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,7 @@ function ChatInterface({
cyclePermissionMode,
cursorModel,
claudeModel,
setClaudeModel,
codexModel,
geminiModel,
isLoading,
Expand Down
5 changes: 4 additions & 1 deletion src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,9 @@ export default function ProviderSelectionEmptyState({
codexModel,
geminiModel,
);
const modelOptions = modelConfig.OPTIONS.some(({ value }) => value === currentModel)
? modelConfig.OPTIONS
: [...modelConfig.OPTIONS, { value: currentModel, label: currentModel }];

/* ── New session — provider picker ── */
if (!selectedSession && !currentSessionId) {
Expand Down Expand Up @@ -224,7 +227,7 @@ export default function ProviderSelectionEmptyState({
tabIndex={-1}
className="cursor-pointer appearance-none rounded-lg border border-border/60 bg-muted/50 py-1.5 pl-3 pr-7 text-sm font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary/20"
>
{modelConfig.OPTIONS.map(
{modelOptions.map(
({ value, label }: { value: string; label: string }) => (
<option key={value + label} value={value}>
{label}
Expand Down