diff --git a/src/shared/api.ts b/src/shared/api.ts
index ca12b7ad762..98d595cd036 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -70,7 +70,7 @@ export interface ApiHandlerOptions {
 	requestyApiKey?: string
 	requestyModelId?: string
 	requestyModelInfo?: ModelInfo
-	modelTemperature?: number
+	modelTemperature?: number | null
 	modelMaxTokens?: number
 	modelMaxThinkingTokens?: number
 }
diff --git a/webview-ui/src/components/settings/TemperatureControl.tsx b/webview-ui/src/components/settings/TemperatureControl.tsx
index 2f7dc29f641..7502c3d1f3e 100644
--- a/webview-ui/src/components/settings/TemperatureControl.tsx
+++ b/webview-ui/src/components/settings/TemperatureControl.tsx
@@ -3,8 +3,8 @@ import { useEffect, useState } from "react"
 import { useDebounce } from "react-use"
 
 interface TemperatureControlProps {
-	value: number | undefined
-	onChange: (value: number | undefined) => void
+	value: number | undefined | null
+	onChange: (value: number | undefined | null) => void
 	maxValue?: number // Some providers like OpenAI use 0-2 range
 }
 
@@ -14,7 +14,7 @@ export const TemperatureControl = ({ value, onChange, maxValue = 1 }: Temperatur
 	useDebounce(() => onChange(inputValue), 50, [onChange, inputValue])
 	// Sync internal state with prop changes when switching profiles
 	useEffect(() => {
-		const hasCustomTemperature = value !== undefined
+		const hasCustomTemperature = value !== undefined && value !== null
 		setIsCustomTemperature(hasCustomTemperature)
 		setInputValue(value)
 	}, [value])
@@ -28,7 +28,7 @@ export const TemperatureControl = ({ value, onChange, maxValue = 1 }: Temperatur
 						const isChecked = e.target.checked
 						setIsCustomTemperature(isChecked)
 						if (!isChecked) {
-							setInputValue(undefined) // Unset the temperature
+							setInputValue(null) // Unset the temperature, note that undefined is unserializable
 						} else {
 							setInputValue(value ?? 0) // Use the value from apiConfiguration, if set
 						}
@@ -53,7 +53,7 @@ export const TemperatureControl = ({ value, onChange, maxValue = 1 }: Temperatur
 							min="0"
 							max={maxValue}
 							step="0.01"
-							value={inputValue}
+							value={inputValue ?? 0}
 							className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
 							onChange={(e) => setInputValue(parseFloat(e.target.value))}
 						/>
diff --git a/webview-ui/src/components/settings/__tests__/TemperatureControl.test.tsx b/webview-ui/src/components/settings/__tests__/TemperatureControl.test.tsx
index 95d0babfdbf..d470c15fb89 100644
--- a/webview-ui/src/components/settings/__tests__/TemperatureControl.test.tsx
+++ b/webview-ui/src/components/settings/__tests__/TemperatureControl.test.tsx
@@ -33,7 +33,7 @@ describe("TemperatureControl", () => {
 		fireEvent.click(checkbox)
 		// Waiting for debounce
 		await new Promise((x) => setTimeout(x, 100))
-		expect(onChange).toHaveBeenCalledWith(undefined)
+		expect(onChange).toHaveBeenCalledWith(null)
 
 		// Check - should restore previous temperature
 		fireEvent.click(checkbox)