feat: add Extended Thinking support for Anthropic Claude + Google Gemini

- Add getThinkingProviderOptions() helper in constants.ts for
  Anthropic extended thinking and Google thinkingConfig
- Expand isReasoningModel() to detect DeepSeek R1, QWQ, Kimi
- Add enableThinkingStore atom + useSettings hook integration
- Wire enableThinking through Chat.client  api.chat  stream-text
- Inject providerOptions into streamText and generateText calls
- Add ThinkingBlock component in AssistantMessage.tsx with
  collapsible reasoning display (brain icon, caret toggle)
- Add 'Extended Thinking' toggle in FeaturesTab (Core Features)
- All 452 tests passing

Author: zebbern

README.md

@@ -14,13 +14,11 @@
 
 <div align="center">
 
-[Features](#features) - [Installation](#installation) - [Configuration](#configuration)
+[Features](#features) ━━ [Installation](#installation) ━━ [Configuration](#configuration)
 
-[Docker](#docker) - [Scripts](#scripts) - [Keeping Up to Date](#keeping-up-to-date)
+[Docker](#docker) ━━ [Scripts](#scripts) ━━ [Keeping Up to Date](#keeping-up-to-date) 
 
-[Project Structure](#project-structure)
-
-[Contributing](#contributing) - [Acknowledgments](#acknowledgments)
+[Project Structure](#project-structure) ━━ [Contributing](#contributing) ━━ [Acknowledgments](#acknowledgments)
 
 </div>
 

app/components/@settings/tabs/features/FeaturesTab.tsx

@@ -127,11 +127,13 @@ export default function FeaturesTab() {
     contextOptimizationEnabled,
     eventLogs,
     autoSwitchToFile,
+    enableThinking,
     setAutoSelectTemplate,
     enableLatestBranch,
     enableContextOptimization,
     setEventLogs,
     setAutoSwitchToFile,
+    setEnableThinking,
     setPromptId,
     promptId,
   } = useSettings();
@@ -259,11 +261,24 @@ export default function FeaturesTab() {
           break;
         }
 
+        case 'enableThinkingToggle': {
+          setEnableThinking(enabled);
+          toast.success(`Extended Thinking ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        }
+
         default:
           break;
       }
     },
-    [enableLatestBranch, setAutoSelectTemplate, enableContextOptimization, setEventLogs, setAutoSwitchToFile],
+    [
+      enableLatestBranch,
+      setAutoSelectTemplate,
+      enableContextOptimization,
+      setEventLogs,
+      setAutoSwitchToFile,
+      setEnableThinking,
+    ],
   );
 
   const features = {
@@ -309,6 +324,15 @@ export default function FeaturesTab() {
         tooltip:
           'When enabled, the editor will automatically switch to show each file as the AI edits it. When disabled, you can stay in preview mode while the AI works.',
       },
+      {
+        id: 'enableThinkingToggle',
+        title: 'Extended Thinking',
+        description: 'Enable extended thinking for Anthropic Claude and Google Gemini models',
+        icon: 'i-ph:brain',
+        enabled: enableThinking,
+        tooltip:
+          'When enabled, supported models will use extended thinking/reasoning for deeper analysis. Uses ~25% of output token budget for thinking.',
+      },
     ],
     beta: [
       {

app/components/chat/AssistantMessage.tsx

@@ -1,4 +1,4 @@
-import { memo, Fragment } from 'react';
+import { memo, Fragment, useState } from 'react';
 import { Markdown } from './Markdown';
 import type { JSONValue } from 'ai';
 import Popover from '~/components/ui/Popover';
@@ -18,6 +18,39 @@ import type {
 import { ToolInvocations } from './ToolInvocations';
 import type { ToolCallAnnotation } from '~/types/context';
 
+/**
+ * Collapsible block that displays AI reasoning / thinking content.
+ * Renders as a styled <details> element with a brain icon header.
+ */
+const ThinkingBlock = memo(({ reasoningParts }: { reasoningParts: ReasoningUIPart[] }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const combinedText = reasoningParts.map((p) => p.reasoning).join('\n');
+
+  if (!combinedText.trim()) {
+    return null;
+  }
+
+  return (
+    <div className="mb-3 rounded-lg border border-bolt-elements-borderColor overflow-hidden">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center gap-2 px-3 py-2 text-xs font-medium text-bolt-elements-textSecondary bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 transition-colors"
+      >
+        <div className="i-ph:brain w-4 h-4 text-purple-400" />
+        <span>Thinking</span>
+        <div
+          className={`i-ph:caret-right w-3 h-3 ml-auto transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`}
+        />
+      </button>
+      {isOpen && (
+        <div className="px-3 py-2 text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 border-t border-bolt-elements-borderColor max-h-64 overflow-y-auto whitespace-pre-wrap leading-relaxed">
+          {combinedText}
+        </div>
+      )}
+    </div>
+  );
+});
+
 interface AssistantMessageProps {
   content: string;
   annotations?: JSONValue[];
@@ -96,6 +129,7 @@ export const AssistantMessage = memo(
       | undefined;
 
     const toolInvocations = parts?.filter((part) => part.type === 'tool-invocation');
+    const reasoningParts = parts?.filter((part) => part.type === 'reasoning') as ReasoningUIPart[] | undefined;
     const toolCallAnnotations = filteredAnnotations.filter(
       (annotation) => annotation.type === 'toolCall',
     ) as ToolCallAnnotation[];
@@ -181,6 +215,9 @@ export const AssistantMessage = memo(
           )}
         </div>
 
+        {/* Reasoning / Thinking Display */}
+        {reasoningParts && reasoningParts.length > 0 && <ThinkingBlock reasoningParts={reasoningParts} />}
+
         {/* Message Content */}
         <div className="text-bolt-elements-textPrimary text-sm leading-relaxed">
           <Markdown

app/components/chat/Chat.client.tsx

@@ -112,7 +112,7 @@ export const ChatImpl = memo(
       (project) => project.id === supabaseConn.selectedProjectId,
     );
     const supabaseAlert = useStore(workbenchStore.supabaseAlert);
-    const { activeProviders, promptId, autoSelectTemplate, contextOptimizationEnabled } = useSettings();
+    const { activeProviders, promptId, autoSelectTemplate, contextOptimizationEnabled, enableThinking } = useSettings();
     const [llmErrorAlert, setLlmErrorAlert] = useState<LlmErrorAlertType | undefined>(undefined);
     const [model, setModel] = useState(() => {
       const savedModel = Cookies.get('selectedModel');
@@ -150,6 +150,7 @@ export const ChatImpl = memo(
         files,
         promptId,
         contextOptimization: contextOptimizationEnabled,
+        enableThinking,
         chatMode,
         designScheme,
         supabase: {

app/lib/.server/llm/constants.ts

@@ -1,3 +1,4 @@
+import type { JSONValue } from 'ai';
 import { createScopedLogger } from '~/utils/logger';
 
 const logger = createScopedLogger('LLMConstants');
@@ -39,13 +40,59 @@ export const PROVIDER_COMPLETION_LIMITS: Record<string, number> = {
  * These models use internal reasoning tokens and have different API parameter requirements
  */
 export function isReasoningModel(modelName: string): boolean {
-  const result = /^(o1|o3|gpt-5)/i.test(modelName);
+  const result =
+    /^(o1|o3|gpt-5)/i.test(modelName) ||
+    /deepseek[-_]?r1/i.test(modelName) ||
+    /qwq/i.test(modelName) ||
+    /kimi[-_]?thinking/i.test(modelName);
 
   logger.debug(`REGEX TEST: "${modelName}" matches reasoning pattern: ${result}`);
 
   return result;
 }
 
+/**
+ * Determines if a model supports extended thinking via providerOptions.
+ * Returns the appropriate providerOptions object for the given provider/model,
+ * or undefined if the model/provider doesn't support extended thinking.
+ */
+export function getThinkingProviderOptions(
+  providerName: string,
+  modelName: string,
+  maxOutputTokens: number,
+): Record<string, Record<string, JSONValue>> | undefined {
+  const budgetTokens = Math.max(1024, Math.min(Math.floor(maxOutputTokens * 0.25), 32000));
+
+  if (providerName === 'Anthropic') {
+    // Claude 3.5 Sonnet, Claude 4 Opus, Claude 4 Sonnet support extended thinking
+    if (/claude/i.test(modelName)) {
+      logger.info(`Enabling Anthropic extended thinking for ${modelName} (budget: ${budgetTokens} tokens)`);
+
+      return {
+        anthropic: {
+          thinking: { type: 'enabled', budgetTokens },
+        },
+      };
+    }
+  }
+
+  if (providerName === 'Google') {
+    // Gemini 2.5 Pro/Flash and thinking models support thinkingConfig
+    if (/gemini-2\.5|gemini-2\.0-flash-thinking/i.test(modelName)) {
+      logger.info(`Enabling Google thinking for ${modelName} (budget: ${budgetTokens} tokens)`);
+
+      return {
+        google: {
+          thinkingConfig: { thinkingBudget: budgetTokens },
+        },
+      };
+    }
+  }
+
+  // DeepSeek R1, QWQ, Kimi thinking — thinking is built into the model, no providerOptions needed
+  return undefined;
+}
+
 // limits the number of model responses that can be returned in a single request
 export const MAX_RESPONSE_SEGMENTS = 2;
 

app/lib/.server/llm/stream-text.ts

@@ -1,5 +1,11 @@
 import { convertToCoreMessages, streamText as _streamText, type Message } from 'ai';
-import { MAX_TOKENS, PROVIDER_COMPLETION_LIMITS, isReasoningModel, type FileMap } from './constants';
+import {
+  MAX_TOKENS,
+  PROVIDER_COMPLETION_LIMITS,
+  isReasoningModel,
+  getThinkingProviderOptions,
+  type FileMap,
+} from './constants';
 import { getFineTunedPrompt } from '~/lib/common/prompts/new-prompt';
 import { AGENT_MODE_FULL_SYSTEM_PROMPT } from '~/lib/agent/prompts';
 import { DEFAULT_MODEL, DEFAULT_PROVIDER, MODIFICATIONS_TAG_NAME, PROVIDER_LIST, WORK_DIR } from '~/utils/constants';
@@ -64,6 +70,7 @@ export async function streamText(props: {
   providerSettings?: Record<string, IProviderSetting>;
   promptId?: string;
   contextOptimization?: boolean;
+  enableThinking?: boolean;
   contextFiles?: FileMap;
   summary?: string;
   messageSliceId?: number;
@@ -84,6 +91,7 @@ export async function streamText(props: {
     chatMode,
     designScheme,
   } = props;
+  const enableThinking = props.enableThinking ?? false;
   let currentModel = DEFAULT_MODEL;
   let currentProvider = DEFAULT_PROVIDER.name;
   let processedMessages = messages.map((message) => {
@@ -240,6 +248,22 @@ ${projectMemoryContent}
   // Use maxCompletionTokens for reasoning models (o1, GPT-5), maxTokens for traditional models
   const tokenParams = isReasoning ? { maxCompletionTokens: safeMaxTokens } : { maxTokens: safeMaxTokens };
 
+  // Build providerOptions for extended thinking (Anthropic / Google)
+  let thinkingProviderOptions: ReturnType<typeof getThinkingProviderOptions> | undefined;
+
+  if (enableThinking) {
+    thinkingProviderOptions = getThinkingProviderOptions(provider.name, modelDetails.name, safeMaxTokens);
+
+    if (thinkingProviderOptions) {
+      logger.info(
+        `Extended thinking enabled for ${provider.name}/${modelDetails.name}:`,
+        JSON.stringify(thinkingProviderOptions),
+      );
+    } else {
+      logger.info(`Extended thinking requested but not supported for ${provider.name}/${modelDetails.name}`);
+    }
+  }
+
   // Filter out unsupported parameters for reasoning models
   const filteredOptions =
     isReasoning && options
@@ -318,6 +342,9 @@ ${codeContext}
 
     // Set temperature to 1 for reasoning models (required by OpenAI API)
     ...(isReasoning ? { temperature: 1 } : {}),
+
+    // Inject provider-specific thinking options (Anthropic thinking / Google thinkingConfig)
+    ...(thinkingProviderOptions ? { providerOptions: thinkingProviderOptions } : {}),
   };
 
   // DEBUG: Log final streaming parameters

app/lib/hooks/useSettings.ts

@@ -9,6 +9,7 @@ import {
   enableContextOptimizationStore,
   tabConfigurationStore,
   autoSwitchToFileStore,
+  enableThinkingStore,
   resetTabConfiguration as resetTabConfig,
   updateProviderSettings as updateProviderSettingsStore,
   updateLatestBranch,
@@ -17,6 +18,7 @@ import {
   updateEventLogs,
   updatePromptId,
   updateAutoSwitchToFile,
+  updateEnableThinking,
 } from '~/lib/stores/settings';
 import { useCallback, useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
@@ -62,6 +64,8 @@ export interface UseSettingsReturn {
   enableContextOptimization: (enabled: boolean) => void;
   autoSwitchToFile: boolean;
   setAutoSwitchToFile: (enabled: boolean) => void;
+  enableThinking: boolean;
+  setEnableThinking: (enabled: boolean) => void;
 
   // Tab configuration
   tabConfiguration: TabWindowConfig;
@@ -78,6 +82,7 @@ export function useSettings(): UseSettingsReturn {
   const isLatestBranch = useStore(latestBranchStore);
   const autoSelectTemplate = useStore(autoSelectStarterTemplate);
   const autoSwitchToFile = useStore(autoSwitchToFileStore);
+  const enableThinking = useStore(enableThinkingStore);
   const [activeProviders, setActiveProviders] = useState<ProviderInfo[]>([]);
   const contextOptimizationEnabled = useStore(enableContextOptimizationStore);
   const tabConfiguration = useStore(tabConfigurationStore);
@@ -150,6 +155,11 @@ export function useSettings(): UseSettingsReturn {
     logStore.logSystem(`Auto-switch to file during AI edits ${enabled ? 'enabled' : 'disabled'}`);
   }, []);
 
+  const setEnableThinking = useCallback((enabled: boolean) => {
+    updateEnableThinking(enabled);
+    logStore.logSystem(`Extended thinking ${enabled ? 'enabled' : 'disabled'}`);
+  }, []);
+
   const setTheme = useCallback(
     (theme: Settings['theme']) => {
       saveSettings({ theme });
@@ -206,6 +216,8 @@ export function useSettings(): UseSettingsReturn {
     enableContextOptimization,
     autoSwitchToFile,
     setAutoSwitchToFile,
+    enableThinking,
+    setEnableThinking,
     setTheme,
     setLanguage,
     setNotifications,

app/lib/stores/settings.ts

@@ -331,6 +331,7 @@ const SETTINGS_KEYS = {
   PROMPT_ID: 'promptId',
   DEVELOPER_MODE: 'isDeveloperMode',
   AUTO_SWITCH_TO_FILE: 'autoSwitchToFile',
+  ENABLE_THINKING: 'enableThinking',
 } as const;
 
 // Initialize settings from localStorage or defaults
@@ -361,6 +362,7 @@ const getInitialSettings = () => {
     promptId: isBrowser ? localStorage.getItem(SETTINGS_KEYS.PROMPT_ID) || 'default' : 'default',
     developerMode: getStoredBoolean(SETTINGS_KEYS.DEVELOPER_MODE, false),
     autoSwitchToFile: getStoredBoolean(SETTINGS_KEYS.AUTO_SWITCH_TO_FILE, false),
+    enableThinking: getStoredBoolean(SETTINGS_KEYS.ENABLE_THINKING, false),
   };
 };
 
@@ -373,6 +375,7 @@ export const enableContextOptimizationStore = atom<boolean>(initialSettings.cont
 export const isEventLogsEnabled = atom<boolean>(initialSettings.eventLogs);
 export const promptStore = atom<string>(initialSettings.promptId);
 export const autoSwitchToFileStore = atom<boolean>(initialSettings.autoSwitchToFile);
+export const enableThinkingStore = atom<boolean>(initialSettings.enableThinking);
 
 // Helper functions to update settings with persistence
 export const updateLatestBranch = (enabled: boolean) => {
@@ -385,6 +388,11 @@ export const updateAutoSwitchToFile = (enabled: boolean) => {
   localStorage.setItem(SETTINGS_KEYS.AUTO_SWITCH_TO_FILE, JSON.stringify(enabled));
 };
 
+export const updateEnableThinking = (enabled: boolean) => {
+  enableThinkingStore.set(enabled);
+  localStorage.setItem(SETTINGS_KEYS.ENABLE_THINKING, JSON.stringify(enabled));
+};
+
 export const updateAutoSelectTemplate = (enabled: boolean) => {
   autoSelectStarterTemplate.set(enabled);
   localStorage.setItem(SETTINGS_KEYS.AUTO_SELECT_TEMPLATE, JSON.stringify(enabled));