Add ollama models polling

package.json

@@ -2,7 +2,7 @@
   "name": "claude-dev",
   "displayName": "Claude Dev",
   "description": "Autonomous coding agent right in your IDE, capable of creating/editing files, executing commands, and more with your permission every step of the way.",
-  "version": "1.5.31",
+  "version": "1.5.32",
   "icon": "icon.png",
   "engines": {
     "vscode": "^1.84.0"

src/api/ollama.ts

@@ -11,7 +11,7 @@ export class OllamaHandler implements ApiHandler {
 	constructor(options: ApiHandlerOptions) {
 		this.options = options
 		this.client = new OpenAI({
-			baseURL: "http://localhost:11434/v1",
+			baseURL: (this.options.ollamaBaseUrl || "http://localhost:11434") + "/v1",
 			apiKey: "ollama",
 		})
 	}

src/providers/ClaudeDevProvider.ts

@@ -30,6 +30,7 @@ type GlobalStateKey =
 	| "openAiBaseUrl"
 	| "openAiModelId"
 	| "ollamaModelId"
+	| "ollamaBaseUrl"
 
 export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 	public static readonly sideBarId = "claude-dev.SidebarProvider" // used in package.json as the view's id. This value cannot be changed due to how vscode caches views based on their id, and updating the id would break existing instances of the extension.
@@ -321,6 +322,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 								openAiApiKey,
 								openAiModelId,
 								ollamaModelId,
+								ollamaBaseUrl,
 							} = message.apiConfiguration
 							await this.updateGlobalState("apiProvider", apiProvider)
 							await this.updateGlobalState("apiModelId", apiModelId)
@@ -336,6 +338,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 							await this.storeSecret("openAiApiKey", openAiApiKey)
 							await this.updateGlobalState("openAiModelId", openAiModelId)
 							await this.updateGlobalState("ollamaModelId", ollamaModelId)
+							await this.updateGlobalState("ollamaBaseUrl", ollamaBaseUrl)
 							this.claudeDev?.updateApi(message.apiConfiguration)
 						}
 						await this.postStateToWebview()
@@ -385,6 +388,10 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 					case "resetState":
 						await this.resetState()
 						break
+					case "requestOllamaModels":
+						const models = await this.getOllamaModels(message.text)
+						this.postMessageToWebview({ type: "ollamaModels", models })
+						break
 					// Add more switch case statements here as more webview message commands
 					// are created within the webview context (i.e. inside media/main.js)
 				}
@@ -394,6 +401,25 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 		)
 	}
 
+	// Ollama
+
+	async getOllamaModels(baseUrl?: string) {
+		try {
+			if (!baseUrl) {
+				baseUrl = "http://localhost:11434"
+			}
+			if (!URL.canParse(baseUrl)) {
+				return []
+			}
+			const response = await axios.get(`${baseUrl}/api/tags`)
+			const modelsArray = response.data?.models?.map((model: any) => model.name) || []
+			const models = [...new Set<string>(modelsArray)]
+			return models
+		} catch (error) {
+			return []
+		}
+	}
+
 	// OpenRouter
 
 	async handleOpenRouterCallback(code: string) {
@@ -627,6 +653,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			openAiApiKey,
 			openAiModelId,
 			ollamaModelId,
+			ollamaBaseUrl,
 			lastShownAnnouncementId,
 			customInstructions,
 			alwaysAllowReadOnly,
@@ -646,6 +673,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			this.getSecret("openAiApiKey") as Promise<string | undefined>,
 			this.getGlobalState("openAiModelId") as Promise<string | undefined>,
 			this.getGlobalState("ollamaModelId") as Promise<string | undefined>,
+			this.getGlobalState("ollamaBaseUrl") as Promise<string | undefined>,
 			this.getGlobalState("lastShownAnnouncementId") as Promise<string | undefined>,
 			this.getGlobalState("customInstructions") as Promise<string | undefined>,
 			this.getGlobalState("alwaysAllowReadOnly") as Promise<boolean | undefined>,
@@ -682,6 +710,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 				openAiApiKey,
 				openAiModelId,
 				ollamaModelId,
+				ollamaBaseUrl,
 			},
 			lastShownAnnouncementId,
 			customInstructions,

src/shared/ExtensionMessage.ts

@@ -5,11 +5,12 @@ import { HistoryItem } from "./HistoryItem"
 
 // webview will hold state
 export interface ExtensionMessage {
-	type: "action" | "state" | "selectedImages"
+	type: "action" | "state" | "selectedImages" | "ollamaModels"
 	text?: string
 	action?: "chatButtonTapped" | "settingsButtonTapped" | "historyButtonTapped" | "didBecomeVisible"
 	state?: ExtensionState
 	images?: string[]
+	models?: string[]
 }
 
 export interface ExtensionState {

src/shared/WebviewMessage.ts

@@ -16,6 +16,7 @@ export interface WebviewMessage {
 		| "deleteTaskWithId"
 		| "exportTaskWithId"
 		| "resetState"
+		| "requestOllamaModels"
 	text?: string
 	askResponse?: ClaudeAskResponse
 	apiConfiguration?: ApiConfiguration

src/shared/api.ts

@@ -14,6 +14,7 @@ export interface ApiHandlerOptions {
 	openAiApiKey?: string
 	openAiModelId?: string
 	ollamaModelId?: string
+	ollamaBaseUrl?: string
 }
 
 export type ApiConfiguration = ApiHandlerOptions & {

webview-ui/src/components/ApiOptions.tsx

@@ -1,5 +1,12 @@
-import { VSCodeDropdown, VSCodeLink, VSCodeOption, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
-import React, { useMemo } from "react"
+import {
+	VSCodeDropdown,
+	VSCodeLink,
+	VSCodeOption,
+	VSCodeRadio,
+	VSCodeRadioGroup,
+	VSCodeTextField,
+} from "@vscode/webview-ui-toolkit/react"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
 import {
 	ApiConfiguration,
 	ModelInfo,
@@ -15,6 +22,9 @@ import {
 } from "../../../src/shared/api"
 import { useExtensionState } from "../context/ExtensionStateContext"
 import VSCodeButtonLink from "./VSCodeButtonLink"
+import { ExtensionMessage } from "../../../src/shared/ExtensionMessage"
+import { useEvent, useInterval } from "react-use"
+import { vscode } from "../utils/vscode"
 
 interface ApiOptionsProps {
 	showModelOptions: boolean
@@ -23,6 +33,8 @@ interface ApiOptionsProps {
 
 const ApiOptions: React.FC<ApiOptionsProps> = ({ showModelOptions, apiErrorMessage }) => {
 	const { apiConfiguration, setApiConfiguration, uriScheme } = useExtensionState()
+	const [ollamaModels, setOllamaModels] = useState<string[]>([])
+
 	const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => {
 		setApiConfiguration({ ...apiConfiguration, [field]: event.target.value })
 	}
@@ -31,6 +43,27 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({ showModelOptions, apiErrorMessa
 		return normalizeApiConfiguration(apiConfiguration)
 	}, [apiConfiguration])
 
+	// Poll ollama models
+	const requestOllamaModels = useCallback(() => {
+		if (selectedProvider === "ollama") {
+			vscode.postMessage({ type: "requestOllamaModels", text: apiConfiguration?.ollamaBaseUrl })
+		}
+	}, [selectedProvider, apiConfiguration?.ollamaBaseUrl])
+	useEffect(() => {
+		if (selectedProvider === "ollama") {
+			requestOllamaModels()
+		}
+	}, [selectedProvider, requestOllamaModels])
+	useInterval(requestOllamaModels, selectedProvider === "ollama" ? 2000 : null)
+
+	const handleMessage = useCallback((event: MessageEvent) => {
+		const message: ExtensionMessage = event.data
+		if (message.type === "ollamaModels" && message.models) {
+			setOllamaModels(message.models)
+		}
+	}, [])
+	useEvent("message", handleMessage)
+
 	/*
 	VSCodeDropdown has an open bug where dynamically rendered options don't auto select the provided value prop. You can see this for yourself by comparing  it with normal select/option elements, which work as expected.
 	https://github.com/microsoft/vscode-webview-ui-toolkit/issues/433
@@ -295,8 +328,8 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({ showModelOptions, apiErrorMessa
 						}}>
 						You can use any OpenAI compatible API with models that support tool use.{" "}
 						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Claude Dev uses complex prompts, so less
-							capable models may not work as expected.)
+							(<span style={{ fontWeight: 500 }}>Note:</span> Claude Dev uses complex prompts and works
+							best with Claude models. Less capable models may not work as expected.)
 						</span>
 					</p>
 				</div>
@@ -304,6 +337,14 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({ showModelOptions, apiErrorMessa
 
 			{selectedProvider === "ollama" && (
 				<div>
+					<VSCodeTextField
+						value={apiConfiguration?.ollamaBaseUrl || ""}
+						style={{ width: "100%" }}
+						type="url"
+						onInput={handleInputChange("ollamaBaseUrl")}
+						placeholder={"Default: http://localhost:11434"}>
+						<span style={{ fontWeight: 500 }}>Base URL (optional)</span>
+					</VSCodeTextField>
 					<VSCodeTextField
 						value={apiConfiguration?.ollamaModelId || ""}
 						style={{ width: "100%" }}
@@ -311,26 +352,52 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({ showModelOptions, apiErrorMessa
 						placeholder={"e.g. llama3.1"}>
 						<span style={{ fontWeight: 500 }}>Model ID</span>
 					</VSCodeTextField>
+					{ollamaModels.length > 0 && (
+						<VSCodeRadioGroup
+							value={
+								ollamaModels.includes(apiConfiguration?.ollamaModelId || "")
+									? apiConfiguration?.ollamaModelId
+									: ""
+							}
+							onChange={(e) => {
+								const value = (e.target as HTMLInputElement)?.value
+								// need to check value first since radio group returns empty string sometimes
+								if (value) {
+									handleInputChange("ollamaModelId")({
+										target: { value },
+									})
+								}
+							}}>
+							{ollamaModels.map((model) => (
+								<VSCodeRadio
+									key={model}
+									value={model}
+									checked={apiConfiguration?.ollamaModelId === model}>
+									{model}
+								</VSCodeRadio>
+							))}
+						</VSCodeRadioGroup>
+					)}
 					<p
 						style={{
 							fontSize: "12px",
 							marginTop: "5px",
 							color: "var(--vscode-descriptionForeground)",
 						}}>
-						Ollama allows you to run models locally on your computer. For instructions on how to get started
-						with Ollama, see their
+						Ollama allows you to run models locally on your computer. For instructions on how to get
+						started, see their
 						<VSCodeLink
 							href="https://github.com/ollama/ollama/blob/main/README.md"
 							style={{ display: "inline" }}>
 							quickstart guide.
 						</VSCodeLink>{" "}
-						You can use any models that support{" "}
+						You can use any model that supports{" "}
 						<VSCodeLink href="https://ollama.com/search?c=tools" style={{ display: "inline" }}>
 							tool use.
 						</VSCodeLink>
 						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Claude Dev uses complex prompts, so less
-							capable models may not work as expected.)
+							(<span style={{ fontWeight: 500 }}>Note:</span> Claude Dev uses complex prompts and works
+							best with Claude models. Less capable models may not work as expected.)
 						</span>
 					</p>
 				</div>