Add option to set custom instructions

CHANGELOG.md

@@ -6,7 +6,8 @@ All notable changes to the "claude-dev" extension will be documented in this fil
 
 ## [1.1.1]
 
-- Added the ability to choose other Claude models (+ GPT-4o, DeepSeek, and Mistral if you use OpenRouter)
+- Adds option to choose other Claude models (+ GPT-4o, DeepSeek, and Mistral if you use OpenRouter)
+- Adds option to add custom instructions to the end of the system prompt
 
 ## [1.1.0]
 

src/ClaudeDev.ts

@@ -235,6 +235,7 @@ type ToolResponse = string | Array<Anthropic.TextBlockParam | Anthropic.ImageBlo
 export class ClaudeDev {
 	private api: ApiHandler
 	private maxRequestsPerTask: number
+	private customInstructions?: string
 	private requestCount = 0
 	apiConversationHistory: Anthropic.MessageParam[] = []
 	claudeMessages: ClaudeMessage[] = []
@@ -250,12 +251,14 @@ export class ClaudeDev {
 		provider: ClaudeDevProvider,
 		apiConfiguration: ApiConfiguration,
 		maxRequestsPerTask?: number,
+		customInstructions?: string,
 		task?: string,
 		images?: string[]
 	) {
 		this.providerRef = new WeakRef(provider)
 		this.api = buildApiHandler(apiConfiguration)
 		this.maxRequestsPerTask = maxRequestsPerTask ?? DEFAULT_MAX_REQUESTS_PER_TASK
+		this.customInstructions = customInstructions
 
 		this.startTask(task, images)
 	}
@@ -268,6 +271,10 @@ export class ClaudeDev {
 		this.maxRequestsPerTask = maxRequestsPerTask ?? DEFAULT_MAX_REQUESTS_PER_TASK
 	}
 
+	updateCustomInstructions(customInstructions: string | undefined) {
+		this.customInstructions = customInstructions
+	}
+
 	async handleWebviewAskResponse(askResponse: ClaudeAskResponse, text?: string, images?: string[]) {
 		this.askResponse = askResponse
 		this.askResponseText = text
@@ -923,7 +930,19 @@ export class ClaudeDev {
 
 	async attemptApiRequest(): Promise<Anthropic.Messages.Message> {
 		try {
-			return await this.api.createMessage(SYSTEM_PROMPT(), this.apiConversationHistory, tools)
+			let systemPrompt = SYSTEM_PROMPT()
+			if (this.customInstructions && this.customInstructions.trim()) {
+				systemPrompt += `
+====
+
+USER'S CUSTOM INSTRUCTIONS
+
+The following additional instructions are provided by the user. They should be followed and given precedence in case of conflicts with previous instructions.
+
+${this.customInstructions.trim()}
+`
+			}
+			return await this.api.createMessage(systemPrompt, this.apiConversationHistory, tools)
 		} catch (error) {
 			const { response } = await this.ask(
 				"api_req_failed",

src/providers/ClaudeDevProvider.ts

@@ -11,7 +11,13 @@ https://github.com/KumarVariable/vscode-extension-sidebar-html/blob/master/src/c
 */
 
 type SecretKey = "apiKey" | "openRouterApiKey" | "awsAccessKey" | "awsSecretKey"
-type GlobalStateKey = "apiProvider" | "apiModelId" | "awsRegion" | "maxRequestsPerTask" | "lastShownAnnouncementId"
+type GlobalStateKey =
+	| "apiProvider"
+	| "apiModelId"
+	| "awsRegion"
+	| "maxRequestsPerTask"
+	| "lastShownAnnouncementId"
+	| "customInstructions"
 
 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.
@@ -132,8 +138,8 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 
 	async initClaudeDevWithTask(task?: string, images?: string[]) {
 		await this.clearTask() // ensures that an exising task doesn't exist before starting a new one, although this shouldn't be possible since user must clear task before starting a new one
-		const { maxRequestsPerTask, apiConfiguration } = await this.getState()
+		const { maxRequestsPerTask, apiConfiguration, customInstructions } = await this.getState()
-		this.claudeDev = new ClaudeDev(this, apiConfiguration, maxRequestsPerTask, task, images)
+		this.claudeDev = new ClaudeDev(this, apiConfiguration, maxRequestsPerTask, customInstructions, task, images)
 	}
 
 	// Send any JSON serializable data to the react app
@@ -280,6 +286,12 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 						this.claudeDev?.updateMaxRequestsPerTask(result)
 						await this.postStateToWebview()
 						break
+					case "customInstructions":
+						// User may be clearing the field
+						await this.updateGlobalState("customInstructions", message.text || undefined)
+						this.claudeDev?.updateCustomInstructions(message.text || undefined)
+						await this.postStateToWebview()
+						break
 					case "askResponse":
 						this.claudeDev?.handleWebviewAskResponse(message.askResponse!, message.text, message.images)
 						break
@@ -309,13 +321,15 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 	}
 
 	async postStateToWebview() {
-		const { apiConfiguration, maxRequestsPerTask, lastShownAnnouncementId } = await this.getState()
+		const { apiConfiguration, maxRequestsPerTask, lastShownAnnouncementId, customInstructions } =
+			await this.getState()
 		this.postMessageToWebview({
 			type: "state",
 			state: {
 				version: this.context.extension?.packageJSON?.version ?? "",
 				apiConfiguration,
 				maxRequestsPerTask,
+				customInstructions,
 				themeName: vscode.workspace.getConfiguration("workbench").get<string>("colorTheme"),
 				claudeMessages: this.claudeDev?.claudeMessages || [],
 				shouldShowAnnouncement: lastShownAnnouncementId !== this.latestAnnouncementId,
@@ -420,6 +434,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			awsRegion,
 			maxRequestsPerTask,
 			lastShownAnnouncementId,
+			customInstructions,
 		] = await Promise.all([
 			this.getGlobalState("apiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("apiModelId") as Promise<ApiModelId | undefined>,
@@ -430,6 +445,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("awsRegion") as Promise<string | undefined>,
 			this.getGlobalState("maxRequestsPerTask") as Promise<number | undefined>,
 			this.getGlobalState("lastShownAnnouncementId") as Promise<string | undefined>,
+			this.getGlobalState("customInstructions") as Promise<string | undefined>,
 		])
 		return {
 			apiConfiguration: {
@@ -443,6 +459,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			},
 			maxRequestsPerTask,
 			lastShownAnnouncementId,
+			customInstructions,
 		}
 	}
 

src/shared/ExtensionMessage.ts

@@ -15,6 +15,7 @@ export interface ExtensionState {
 	version: string
 	apiConfiguration?: ApiConfiguration
 	maxRequestsPerTask?: number
+	customInstructions?: string
 	themeName?: string
 	claudeMessages: ClaudeMessage[]
 	shouldShowAnnouncement: boolean

src/shared/WebviewMessage.ts

@@ -4,6 +4,7 @@ export interface WebviewMessage {
 	type:
 		| "apiConfiguration"
 		| "maxRequestsPerTask"
+		| "customInstructions"
 		| "webviewDidLaunch"
 		| "newTask"
 		| "askResponse"

webview-ui/src/App.tsx

@@ -22,6 +22,7 @@ const App: React.FC = () => {
 	const [version, setVersion] = useState<string>("")
 	const [apiConfiguration, setApiConfiguration] = useState<ApiConfiguration | undefined>(undefined)
 	const [maxRequestsPerTask, setMaxRequestsPerTask] = useState<string>("")
+	const [customInstructions, setCustomInstructions] = useState<string>("")
 	const [vscodeThemeName, setVscodeThemeName] = useState<string | undefined>(undefined)
 	const [claudeMessages, setClaudeMessages] = useState<ClaudeMessage[]>([])
 	const [showAnnouncement, setShowAnnouncement] = useState(false)
@@ -44,6 +45,7 @@ const App: React.FC = () => {
 				setMaxRequestsPerTask(
 					message.state!.maxRequestsPerTask !== undefined ? message.state!.maxRequestsPerTask.toString() : ""
 				)
+				setCustomInstructions(message.state!.customInstructions || "")
 				setVscodeThemeName(message.state!.themeName)
 				setClaudeMessages(message.state!.claudeMessages)
 				// don't update showAnnouncement to false if shouldShowAnnouncement is false
@@ -90,6 +92,8 @@ const App: React.FC = () => {
 							setApiConfiguration={setApiConfiguration}
 							maxRequestsPerTask={maxRequestsPerTask}
 							setMaxRequestsPerTask={setMaxRequestsPerTask}
+							customInstructions={customInstructions}
+							setCustomInstructions={setCustomInstructions}
 							onDone={() => setShowSettings(false)}
 						/>
 					)}

webview-ui/src/components/Announcement.tsx

@@ -35,6 +35,10 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 					Added a settings option to choose other Claude models (+ GPT-4o, DeepSeek, and Mistral if you use
 					OpenRouter)
 				</li>
+				<li>
+					You can now add custom instructions to the end of the system prompt (e.g. "Always use Python",
+					"Speak in Spanish")
+				</li>
 				<li>
 					Improved support for running interactive terminal commands and long-running processes like servers
 				</li>

webview-ui/src/components/SettingsView.tsx

@@ -1,4 +1,4 @@
-import { VSCodeButton, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeLink, VSCodeTextArea, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import React, { useEffect, useState } from "react"
 import { ApiConfiguration } from "../../../src/shared/api"
 import { validateApiConfiguration, validateMaxRequestsPerTask } from "../utils/validate"
@@ -11,6 +11,8 @@ type SettingsViewProps = {
 	setApiConfiguration: React.Dispatch<React.SetStateAction<ApiConfiguration | undefined>>
 	maxRequestsPerTask: string
 	setMaxRequestsPerTask: React.Dispatch<React.SetStateAction<string>>
+	customInstructions: string
+	setCustomInstructions: React.Dispatch<React.SetStateAction<string>>
 	onDone: () => void
 }
 
@@ -20,6 +22,8 @@ const SettingsView = ({
 	setApiConfiguration,
 	maxRequestsPerTask,
 	setMaxRequestsPerTask,
+	customInstructions,
+	setCustomInstructions,
 	onDone,
 }: SettingsViewProps) => {
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
@@ -35,6 +39,7 @@ const SettingsView = ({
 		if (!apiValidationResult && !maxRequestsValidationResult) {
 			vscode.postMessage({ type: "apiConfiguration", apiConfiguration })
 			vscode.postMessage({ type: "maxRequestsPerTask", text: maxRequestsPerTask })
+			vscode.postMessage({ type: "customInstructions", text: customInstructions })
 			onDone()
 		}
 	}
@@ -102,7 +107,28 @@ const SettingsView = ({
 					)}
 				</div>
 
-				<div style={{ marginBottom: "20px" }}>
+				<div style={{ marginBottom: 15 }}>
+					<VSCodeTextArea
+						value={customInstructions}
+						style={{ width: "100%" }}
+						rows={4}
+						placeholder={
+							'e.g. "Run unit tests at the end", "Use TypeScript with async/await", "Speak in Spanish"'
+						}
+						onInput={(e: any) => setCustomInstructions(e.target?.value || "")}>
+						<span style={{ fontWeight: "500" }}>Custom Instructions</span>
+					</VSCodeTextArea>
+					<p
+						style={{
+							fontSize: "12px",
+							marginTop: "5px",
+							color: "var(--vscode-descriptionForeground)",
+						}}>
+						These instructions are added to the end of the system prompt sent with every request.
+					</p>
+				</div>
+
+				<div style={{ marginBottom: 20 }}>
 					<VSCodeTextField
 						value={maxRequestsPerTask}
 						style={{ width: "100%" }}