Add configurable viewport sizes + new defaults for Anthropic Templates

Introduces viewportWidth and viewportHeight parameters to both Python and TypeScript anthropic templates, allowing the viewport size to be set when initializing sessions and tools. Updates default values to 1280x800 and ensures these values are used throughout session creation and tool instantiation.

Author: dprevoznik

pkg/templates/python/anthropic-computer-use/loop.py

@@ -78,6 +78,8 @@ async def sampling_loop(
     tool_version: ToolVersion = "computer_use_20250124",
     thinking_budget: int | None = None,
     token_efficient_tools_beta: bool = False,
+    viewport_width: int = 1280,
+    viewport_height: int = 800,
 ):
     """
     Agentic sampling loop for the assistant/tool interaction of computer use.
@@ -99,7 +101,7 @@ async def sampling_loop(
     tool_group = TOOL_GROUPS_BY_VERSION[tool_version]
     tool_collection = ToolCollection(
         *(
-            ToolCls(kernel=kernel, session_id=session_id) if ToolCls.__name__.startswith("ComputerTool") else ToolCls()
+            ToolCls(kernel=kernel, session_id=session_id, width=viewport_width, height=viewport_height) if ToolCls.__name__.startswith("ComputerTool") else ToolCls()
             for ToolCls in tool_group.tools
         )
     )

pkg/templates/python/anthropic-computer-use/session.py

@@ -32,6 +32,9 @@ class KernelBrowserSession:
     stealth: bool = True
     timeout_seconds: int = 300
 
+    viewport_width: int = 1280
+    viewport_height: int = 800
+
     # Replay recording options
     record_replay: bool = False
     replay_grace_period: float = 5.0  # Seconds to wait before stopping replay
@@ -52,8 +55,8 @@ async def __aenter__(self) -> "KernelBrowserSession":
             stealth=self.stealth,
             timeout_seconds=self.timeout_seconds,
             viewport={
-                "width": 1024,
-                "height": 768,
+                "width": self.viewport_width,
+                "height": self.viewport_height,
             },
         )
 

pkg/templates/python/anthropic-computer-use/tools/computer.py

@@ -107,8 +107,6 @@ class BaseComputerTool:
     """
 
     name: Literal["computer"] = "computer"
-    width: int = 1024
-    height: int = 768
     display_num: int | None = None
 
     # Kernel client and session
@@ -127,10 +125,12 @@ def options(self) -> ComputerToolOptions:
             "display_number": self.display_num,
         }
 
-    def __init__(self, kernel: Kernel | None = None, session_id: str | None = None):
+    def __init__(self, kernel: Kernel | None = None, session_id: str | None = None, width: int = 1280, height: int = 800):
         super().__init__()
         self.kernel = kernel
         self.session_id = session_id
+        self.width = width
+        self.height = height
 
     def validate_coordinates(self, coordinate: tuple[int, int] | list[int] | None = None) -> tuple[int, int] | None:
         """Validate that coordinates are non-negative integers and convert lists to tuples if needed."""

pkg/templates/typescript/anthropic-computer-use/loop.ts

@@ -57,6 +57,8 @@ export async function samplingLoop({
   tokenEfficientToolsBeta = false,
   kernel,
   sessionId,
+  viewportWidth = 1280,
+  viewportHeight = 800,
 }: {
   model: string;
   systemPromptSuffix?: string;
@@ -69,10 +71,12 @@ export async function samplingLoop({
   tokenEfficientToolsBeta?: boolean;
   kernel: Kernel;
   sessionId: string;
+  viewportWidth?: number;
+  viewportHeight?: number;
 }): Promise<BetaMessageParam[]> {
   const selectedVersion = toolVersion || DEFAULT_TOOL_VERSION;
   const toolGroup = TOOL_GROUPS_BY_VERSION[selectedVersion];
-  const toolCollection = new ToolCollection(...toolGroup.tools.map((Tool: typeof ComputerTool20241022 | typeof ComputerTool20250124) => new Tool(kernel, sessionId)));
+  const toolCollection = new ToolCollection(...toolGroup.tools.map((Tool: typeof ComputerTool20241022 | typeof ComputerTool20250124) => new Tool(kernel, sessionId, viewportWidth, viewportHeight)));
 
   const system: BetaTextBlock = {
     type: 'text',

pkg/templates/typescript/anthropic-computer-use/session.ts

@@ -16,20 +16,28 @@ export interface SessionOptions {
   recordReplay?: boolean;
   /** Grace period in seconds before stopping replay */
   replayGracePeriod?: number;
+  /** Viewport width */
+  viewportWidth?: number;
+  /** Viewport height */
+  viewportHeight?: number;
 }
 
 export interface SessionInfo {
   sessionId: string;
   liveViewUrl: string;
   replayId?: string;
   replayViewUrl?: string;
+  viewportWidth: number;
+  viewportHeight: number;
 }
 
 const DEFAULT_OPTIONS: Required<SessionOptions> = {
   stealth: true,
   timeoutSeconds: 300,
   recordReplay: false,
   replayGracePeriod: 5.0,
+  viewportWidth: 1280,
+  viewportHeight: 800,
 };
 
 /**
@@ -76,12 +84,22 @@ export class KernelBrowserSession {
     return this._replayViewUrl;
   }
 
+  get viewportWidth(): number {
+    return this.options.viewportWidth;
+  }
+
+  get viewportHeight(): number {
+    return this.options.viewportHeight;
+  }
+
   get info(): SessionInfo {
     return {
       sessionId: this.sessionId,
       liveViewUrl: this._liveViewUrl || '',
       replayId: this._replayId || undefined,
       replayViewUrl: this._replayViewUrl || undefined,
+      viewportWidth: this.options.viewportWidth,
+      viewportHeight: this.options.viewportHeight,
     };
   }
 
@@ -94,8 +112,8 @@ export class KernelBrowserSession {
       stealth: this.options.stealth,
       timeout_seconds: this.options.timeoutSeconds,
       viewport: {
-        width: 1024,
-        height: 768,
+        width: this.options.viewportWidth,
+        height: this.options.viewportHeight,
       },
     });
 

pkg/templates/typescript/anthropic-computer-use/tools/computer.ts

@@ -12,6 +12,8 @@ export class ComputerTool implements BaseAnthropicTool {
   protected sessionId: string;
   protected _screenshotDelay = 2.0;
   protected version: '20241022' | '20250124';
+  protected width: number;
+  protected height: number;
 
   private lastMousePosition: [number, number] = [0, 0];
 
@@ -39,10 +41,12 @@ export class ComputerTool implements BaseAnthropicTool {
     Action.WAIT,
   ]);
 
-  constructor(kernel: Kernel, sessionId: string, version: '20241022' | '20250124' = '20250124') {
+  constructor(kernel: Kernel, sessionId: string, version: '20241022' | '20250124' = '20250124', width = 1280, height = 800) {
     this.kernel = kernel;
     this.sessionId = sessionId;
     this.version = version;
+    this.width = width;
+    this.height = height;
   }
 
   get apiType(): 'computer_20241022' | 'computer_20250124' {
@@ -53,8 +57,8 @@ export class ComputerTool implements BaseAnthropicTool {
     const params = {
       name: this.name,
       type: this.apiType,
-      display_width_px: 1024,
-      display_height_px: 768,
+      display_width_px: this.width,
+      display_height_px: this.height,
       display_number: null,
     };
     return params;
@@ -380,13 +384,13 @@ export class ComputerTool implements BaseAnthropicTool {
 
 // For backward compatibility
 export class ComputerTool20241022 extends ComputerTool {
-  constructor(kernel: Kernel, sessionId: string) {
-    super(kernel, sessionId, '20241022');
+  constructor(kernel: Kernel, sessionId: string, width = 1280, height = 800) {
+    super(kernel, sessionId, '20241022', width, height);
   }
 }
 
 export class ComputerTool20250124 extends ComputerTool {
-  constructor(kernel: Kernel, sessionId: string) {
-    super(kernel, sessionId, '20250124');
+  constructor(kernel: Kernel, sessionId: string, width = 1280, height = 800) {
+    super(kernel, sessionId, '20250124', width, height);
   }
 }