Move creator prompt to server (#38)

* Removed prompts

* Added creator prompt

* Creator Mode working

* Correct url

Author: nang-dev

src/api/providers/anthropic.ts

@@ -105,11 +105,31 @@ export class AnthropicHandler implements ApiHandler, SingleCompletionHandler {
 						// prompt caching: https://x.com/alexalbert__/status/1823751995901272068
 						// https://github.com/anthropics/anthropic-sdk-typescript?tab=readme-ov-file#default-headers
 						// https://github.com/anthropics/anthropic-sdk-typescript/commit/c920b77fc67bd839bfeb6716ceab9d7c9bbe7393
-						return {
-							headers: {
-								"anthropic-beta": "prompt-caching-2024-07-31",
-								authorization: `Bearer ${this.options.apiKey}`,
-							},
+
+						const betas = []
+
+						// Check for the thinking-128k variant first
+						// if (virtualId === "claude-3-7-sonnet-20250219:thinking") {
+						// 	betas.push("output-128k-2025-02-19")
+						// }
+
+						// Then check for models that support prompt caching
+						switch (modelId) {
+							case "claude-3-7-sonnet-20250219":
+							case "claude-3-5-sonnet-20241022":
+							case "claude-3-5-haiku-20241022":
+							case "claude-3-opus-20240229":
+							case "claude-3-haiku-20240307":
+								betas.push("prompt-caching-2024-07-31")
+								return {
+									headers: {
+										"anthropic-beta": betas.join(","),
+										authorization: `Bearer ${this.options.apiKey}`,
+										"creator-mode": String(this.options.creatorMode),
+									},
+								}
+							default:
+								return undefined
 						}
 					})(),
 				)

src/api/providers/deepseek.ts

@@ -41,6 +41,7 @@ export class DeepSeekHandler implements ApiHandler, SingleCompletionHandler {
 			headers: {
 				"Content-Type": "application/json",
 				Authorization: `Bearer ${this.options.deepSeekApiKey}`,
+				"creator-mode": String(this.options.creatorMode),
 			},
 			body: JSON.stringify({
 				model: modelId,
@@ -139,6 +140,7 @@ export class DeepSeekHandler implements ApiHandler, SingleCompletionHandler {
 				headers: {
 					"Content-Type": "application/json",
 					Authorization: `Bearer ${this.options.deepSeekApiKey}`,
+					"creator-mode": String(this.options.creatorMode),
 				},
 				body: JSON.stringify({
 					model: this.getModel().id,

src/api/providers/pearai.ts

@@ -38,6 +38,7 @@ export class PearAiHandler {
 			apiKey: options.pearaiApiKey,
 			anthropicBaseUrl: PEARAI_URL,
 			apiModelId: "claude-3-5-sonnet-20241022",
+			creatorMode: options.creatorMode,
 		})
 
 		// Then try to initialize the correct handler asynchronously
@@ -64,6 +65,7 @@ export class PearAiHandler {
 						deepSeekApiKey: options.pearaiApiKey,
 						deepSeekBaseUrl: PEARAI_URL,
 						apiModelId: underlyingModel,
+						creatorMode: options.creatorMode,
 					})
 				} else {
 					// Default to Claude
@@ -72,6 +74,7 @@ export class PearAiHandler {
 						apiKey: options.pearaiApiKey,
 						anthropicBaseUrl: PEARAI_URL,
 						apiModelId: underlyingModel,
+						creatorMode: options.creatorMode,
 					})
 				}
 			} catch (error) {
@@ -82,6 +85,7 @@ export class PearAiHandler {
 					apiKey: options.pearaiApiKey,
 					anthropicBaseUrl: PEARAI_URL,
 					apiModelId: "claude-3-5-sonnet-20241022",
+					creatorMode: options.creatorMode,
 				})
 			}
 		} else if (modelId.startsWith("claude")) {

src/core/webview/ClineProvider.ts

@@ -349,10 +349,12 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 
 		const modePrompt = customModePrompts?.[mode] as PromptComponent
 		const effectiveInstructions = [globalInstructions, modePrompt?.customInstructions].filter(Boolean).join("\n\n")
-
 		this.cline = new Cline({
 			provider: this,
-			apiConfiguration,
+			apiConfiguration: {
+				...apiConfiguration,
+				creatorMode: mode === "creator",
+			},
 			customInstructions: effectiveInstructions,
 			enableDiff: diffEnabled,
 			enableCheckpoints: checkpointsEnabled,
@@ -382,7 +384,10 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 
 		this.cline = new Cline({
 			provider: this,
-			apiConfiguration,
+			apiConfiguration: {
+				...apiConfiguration,
+				creatorMode: mode === "creator",
+			},
 			customInstructions: effectiveInstructions,
 			enableDiff: diffEnabled,
 			enableCheckpoints: checkpointsEnabled,
@@ -1809,7 +1814,10 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			await this.updateGlobalState("pearaiModelInfo", pearaiModelInfo),
 		])
 		if (this.cline) {
-			this.cline.api = buildApiHandler(apiConfiguration)
+			this.cline.api = buildApiHandler({
+				...apiConfiguration,
+				creatorMode: mode === "creator",
+			})
 		}
 	}
 

src/shared/api.ts

@@ -20,6 +20,7 @@ export type ApiProvider =
 
 export interface ApiHandlerOptions {
 	apiModelId?: string
+	creatorMode?: boolean
 	apiKey?: string // anthropic
 	anthropicBaseUrl?: string
 	anthropicThinking?: number

src/shared/modes.ts

@@ -72,57 +72,6 @@ export function getToolsForMode(groups: readonly GroupEntry[]): string[] {
 	return Array.from(tools)
 }
 
-
-const CreatorModePrompt = `
-Depending on the user's request, you may need to do some information gathering (for example using read_file or search_files) to get more context about the task. You may also ask the user clarifying questions to get a better understanding of the task. Once you've gained more context about the user's request, you should create a detailed plan for how to accomplish the task. Focus on breaking down complex tasks into manageable steps, considering technical requirements, potential challenges, and best practices. The plan should be clear enough that it can be directly implemented by switching to Code mode afterward. (Directly write the plan to a markdown file instead of showing it as normal response.)\n\nOnce you create and write the plan, you mark the task as completed. You only make plans and you should not ask or switch to any other mode.
-
-Best practices:
-For any webapp project, ALWAYS adhere to these rules, unless otherwise specified:
-
-React with TypeScript for the frontend
-Tailwind CSS for styling
-Shadcn/UI components (via Radix UI)
-Supabase for backend/database
-React Query for data management
-React Router for navigation
-Recharts for data visualization
-React Hook Form for form handling
-
-For any other projects always use modern best practices, frameworks, and technologies for the project.
-
-Always use supabase for database or authentication management, unless otherwise specified.
-
-TOOL USE RULES:
-
-Templating:
-Whenever the user requests a new project, follow these steps:
-1. Call the 'list_templates' tool to see available templates.
-2. Match the user request to the closest template.
-3. If a relevant template is found, use the 'create_new_project' tool to create the new project locally
-4. Navigate into the new project directory.
-5. Make all necessary changes to the project files. In this stage, do not implement any database or API integrations, and just focus on the UI. Let the user know about this, and that they can ask to implement these later.
-6. If it is a webapp, use the 'deploy_webapp_from_path' tool to deploy the webapp to the server.
-7. Ask the user to visit the webapp and ask for any feedback.
-8. Confirm success, do not use any computer or browser features to confirm success.
-If no template is relevant, try to fetch a generic template based on the use case. If there are no templates available, do not fetch a template.
-9. Tell the user this is just the first iteration, and they can use PearAI to add any functionality or features to it.
-`
-
-const PearAICodeModePrompt = `
-Deployment:
-If the user is making a webapp and the webapp is completed for review, use the 'deploy_webapp_from_path' tool to deploy the webapp to the server. You will need to upload a zip of the distribution folder, so create one. W
-
-Whenever the user requests a tool, follow these steps:
-1. Call the 'list_tools' tool to see available tools.
-2. Match the user request to the closest tool.
-3. If a relevant tool is found, use the tool to perform the task.
-4. Confirm success.
-
-If no tool is relevant or the user wants a custom approach, do not fetch a tool.
-
-Only proceed if you are over 90 percent confident that you understand what the user wants. If not, ask for clarification.
-`
-
 // Main modes configuration as an ordered array
 export const modes: readonly ModeConfig[] = [
 	{
@@ -131,13 +80,12 @@ export const modes: readonly ModeConfig[] = [
 		roleDefinition:
 			"You are PearAI Agent (Powered by Roo Code / Cline), a creative and systematic software architect focused on turning high-level ideas into actionable plans. Your primary goal is to help users transform their ideas into structured action plans.",
 		groups: ["read", ["edit", { fileRegex: "\\.md$", description: "Markdown files only" }], "browser", "mcp"],
-		customInstructions: CreatorModePrompt
 	},
 	{
 		slug: "code",
 		name: "Code",
 		roleDefinition:
-			"You are PearAI Agent (Powered by Roo Code / Cline), a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices." + PearAICodeModePrompt,
+			"You are PearAI Agent (Powered by Roo Code / Cline), a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices.",
 		groups: ["read", "edit", "browser", "command", "mcp"],
 	},
 	{