Commit d8b2d2d
Anthropic CUA Template update (Playwright -> Computer Controls) (#72)
## Anthropic Computer Use Template Overhaul
This PR overhauls both the TypeScript and Python Anthropic Computer Use
templates to use **Kernel's Computer Controls API** instead of
Playwright for all browser interactions.
### Why This Change
The previous implementation used Playwright directly, which required
maintaining browser connections and handling lower-level browser
automation. By migrating to Kernel's Computer Controls API, users get:
- **Native integration** with Kernel's browser infrastructure
- **Built-in replay recording** for debugging and auditing
- **Consistent API** across all Kernel computer use templates
- **Simplified session management** with automatic cleanup
### Architecture Overview
```
┌─────────────────────────────────────────────────────────────┐
│ Entry Point (index.ts / main.py) │
│ - Defines the Kernel app and action │
│ - Creates browser session with KernelBrowserSession │
│ - Invokes the sampling loop │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Session Manager (session.ts / .py) │
│ - Manages browser lifecycle (create/delete) │
│ - Handles replay recording (start/stop/poll for URL) │
│ - Configures viewport (1024x768 @ 60Hz) │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Sampling Loop (loop.ts / .py) │
│ - Implements the Anthropic prompt loop │
│ - Manages conversation history │
│ - Routes tool calls to ToolCollection │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Tool Collection (tools/) │
│ - ComputerTool: Mouse, keyboard, screenshots via Kernel │
│ - Maps Anthropic actions to Kernel Computer Controls API │
│ - Tracks last known mouse position for drag operations │
└─────────────────────────────────────────────────────────────┘
```
### File Structure (TypeScript)
```
anthropic-computer-use/
├── index.ts # Entry point - defines Kernel app and cua-task action
├── session.ts # KernelBrowserSession - manages browser lifecycle + replays
├── loop.ts # Anthropic sampling loop with tool routing
├── tools/
│ ├── collection.ts # ToolCollection - routes tool calls, manages versions
│ ├── computer.ts # ComputerTool - implements all mouse/keyboard actions
│ ├── types/
│ │ └── computer.ts # TypeScript types for actions and results
│ └── utils/
│ ├── keyboard.ts # Key mapping utilities
│ └── validator.ts # Coordinate validation
├── types/
│ └── beta.ts # Anthropic beta API types
├── utils/
│ ├── message-processing.ts # Prompt caching, image filtering
│ └── tool-results.ts # Format tool results for API
└── README.md
```
The Python template follows the same structure with equivalent modules.
### Key Components
#### 1. KernelBrowserSession (`session.ts` / `session.py`)
Manages the browser lifecycle as a context manager:
```typescript
const session = new KernelBrowserSession(kernel, {
stealth: true,
recordReplay: true, // Optional: capture video replay
});
await session.start();
// ... use session.sessionId for computer controls
const info = await session.stop();
// info.replayViewUrl contains the video URL if recording was enabled
```
Features:
- Automatic browser creation with configurable viewport (1024x768 @
60Hz)
- Optional replay recording with grace period before stopping
- Polls for replay URL after stopping
- Automatic cleanup on exit
#### 2. ComputerTool (`tools/computer.ts` / `tools/computer.py`)
Maps Anthropic's computer use actions to Kernel's Computer Controls API:
| Anthropic Action | Kernel API |
|-----------------|------------|
| `left_click`, `right_click`, `double_click` | `computer.clickMouse()`
|
| `mouse_move` | `computer.moveMouse()` |
| `left_click_drag` | `computer.dragMouse()` |
| `type` | `computer.typeText()` |
| `key` | `computer.pressKey()` |
| `scroll` | `computer.scroll()` |
| `screenshot` | `computer.captureScreenshot()` |
Key implementation details:
- Maintains `lastMousePosition` to support drag operations from current
position
- Maps Anthropic key names to Kernel/xdotool format
- Returns base64-encoded screenshots after each action
- Supports both `computer_use_20241022` and `computer_use_20250124` API
versions
#### 3. Sampling Loop (`loop.ts` / `loop.py`)
Implements the Anthropic computer use prompt loop:
- Sends messages to Claude with computer use tools
- Processes tool calls and executes them via ToolCollection
- Supports thinking mode with configurable budget
- Handles prompt caching for efficiency
### New Features
#### Replay Recording
Users can enable video replay recording by passing `record_replay: true`
in the payload:
```bash
kernel invoke ts-anthropic-cua cua-task --payload '{"query": "...", "record_replay": true}'
```
The response includes a `replay_url` field with a link to view the
recorded session.
### Known Limitations
**Cursor Position**: The `cursor_position` action is not supported with
Kernel's Computer Controls API. If the model attempts to use this
action, an error is returned. This is a known limitation that does not
significantly impact most workflows, as the model tracks cursor position
through screenshots.
### Testing
Both templates have been tested with the magnitasks.com Kanban board
task, which exercises:
- Navigation and clicking
- Drag-and-drop (`left_click_drag`)
- Multiple sequential actions
### Updated Documentation
- Template READMEs updated with setup, usage, replay recording, and
limitations
- QA command updated with new test task
- CLI post-install instructions updated with new example
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> Overhauls the Anthropic Computer Use templates to use Kernel’s
Computer Controls API instead of Playwright, with built-in browser
session management and optional replay recording.
>
> - Replace Playwright automation with Kernel controls in both TS
(`tools/computer.ts`, `loop.ts`, `session.ts`, `index.ts`) and Python
(`tools/computer.py`, `loop.py`, `session.py`, `main.py`) templates
> - Add `KernelBrowserSession` to manage browser lifecycle, live view,
and replays (configurable viewport `1024x768@60Hz`; stop/poll for
`replay_url`)
> - Update sampling loops to construct `ToolCollection` with Kernel
client and `sessionId`; handle thinking blocks and tool_use routing;
enable prompt caching
> - Implement comprehensive key/mouse/scroll mappings to Kernel APIs;
drop unsupported `cursor_position`; track last mouse position for drags;
standardize typing delay and screenshot flow
> - Bump SDKs (`@onkernel/sdk` / `kernel` to `0.24.0`); remove
Playwright deps and code paths
> - Refresh READMEs with setup/usage and replay instructions; adjust
QA/template invoke commands to magnitasks task and optional
`record_replay` flag
> - Update template defaults in `pkg/create/templates.go` to new invoke
payloads
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ac3baaa. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---------
Co-authored-by: Tanmay Sardesai <tanmay@onkernel.com>1 parent 60432fe commit d8b2d2d
File tree
15 files changed
+990
-325
lines changed- .cursor/commands
- pkg
- create
- templates
- python/anthropic-computer-use
- tools
- typescript/anthropic-computer-use
- tools
15 files changed
+990
-325
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
230 | 230 | | |
231 | 231 | | |
232 | 232 | | |
233 | | - | |
| 233 | + | |
234 | 234 | | |
235 | 235 | | |
236 | 236 | | |
| |||
240 | 240 | | |
241 | 241 | | |
242 | 242 | | |
243 | | - | |
| 243 | + | |
244 | 244 | | |
245 | 245 | | |
246 | 246 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
178 | 178 | | |
179 | 179 | | |
180 | 180 | | |
181 | | - | |
| 181 | + | |
182 | 182 | | |
183 | 183 | | |
184 | 184 | | |
| |||
220 | 220 | | |
221 | 221 | | |
222 | 222 | | |
223 | | - | |
| 223 | + | |
224 | 224 | | |
225 | 225 | | |
226 | 226 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | 1 | | |
2 | 2 | | |
3 | | - | |
| 3 | + | |
4 | 4 | | |
5 | | - | |
| 5 | + | |
6 | 6 | | |
7 | | - | |
| 7 | + | |
| 8 | + | |
| 9 | + | |
| 10 | + | |
| 11 | + | |
| 12 | + | |
| 13 | + | |
| 14 | + | |
| 15 | + | |
| 16 | + | |
| 17 | + | |
| 18 | + | |
| 19 | + | |
| 20 | + | |
| 21 | + | |
| 22 | + | |
| 23 | + | |
| 24 | + | |
| 25 | + | |
| 26 | + | |
| 27 | + | |
| 28 | + | |
| 29 | + | |
| 30 | + | |
| 31 | + | |
| 32 | + | |
| 33 | + | |
| 34 | + | |
| 35 | + | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
| 46 | + | |
| 47 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | 1 | | |
2 | 2 | | |
3 | 3 | | |
| 4 | + | |
4 | 5 | | |
5 | 6 | | |
6 | 7 | | |
7 | | - | |
8 | | - | |
9 | 8 | | |
10 | 9 | | |
11 | 10 | | |
12 | | - | |
13 | | - | |
14 | | - | |
15 | | - | |
16 | | - | |
17 | | - | |
18 | | - | |
19 | | - | |
20 | | - | |
21 | | - | |
22 | | - | |
| 11 | + | |
| 12 | + | |
| 13 | + | |
23 | 14 | | |
24 | 15 | | |
25 | 16 | | |
| |||
78 | 69 | | |
79 | 70 | | |
80 | 71 | | |
| 72 | + | |
| 73 | + | |
81 | 74 | | |
82 | 75 | | |
83 | 76 | | |
84 | 77 | | |
85 | 78 | | |
86 | 79 | | |
87 | 80 | | |
88 | | - | |
89 | 81 | | |
90 | 82 | | |
91 | 83 | | |
| |||
94 | 86 | | |
95 | 87 | | |
96 | 88 | | |
| 89 | + | |
| 90 | + | |
97 | 91 | | |
98 | 92 | | |
99 | 93 | | |
100 | 94 | | |
101 | 95 | | |
102 | 96 | | |
103 | 97 | | |
104 | | - | |
105 | 98 | | |
106 | 99 | | |
107 | 100 | | |
108 | 101 | | |
109 | | - | |
| 102 | + | |
110 | 103 | | |
111 | 104 | | |
112 | 105 | | |
| |||
252 | 245 | | |
253 | 246 | | |
254 | 247 | | |
255 | | - | |
256 | | - | |
| 248 | + | |
| 249 | + | |
| 250 | + | |
| 251 | + | |
| 252 | + | |
| 253 | + | |
| 254 | + | |
| 255 | + | |
| 256 | + | |
| 257 | + | |
| 258 | + | |
| 259 | + | |
257 | 260 | | |
258 | | - | |
259 | | - | |
260 | | - | |
261 | | - | |
262 | | - | |
263 | | - | |
264 | | - | |
265 | | - | |
266 | | - | |
| 261 | + | |
| 262 | + | |
| 263 | + | |
| 264 | + | |
| 265 | + | |
| 266 | + | |
| 267 | + | |
| 268 | + | |
267 | 269 | | |
268 | | - | |
269 | | - | |
| 270 | + | |
| 271 | + | |
| 272 | + | |
270 | 273 | | |
271 | 274 | | |
272 | 275 | | |
| |||
334 | 337 | | |
335 | 338 | | |
336 | 339 | | |
337 | | - | |
| 340 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | 1 | | |
2 | | - | |
| 2 | + | |
3 | 3 | | |
4 | 4 | | |
5 | | - | |
6 | 5 | | |
7 | | - | |
| 6 | + | |
8 | 7 | | |
9 | 8 | | |
10 | 9 | | |
11 | 10 | | |
| 11 | + | |
12 | 12 | | |
13 | 13 | | |
14 | 14 | | |
15 | 15 | | |
| 16 | + | |
16 | 17 | | |
17 | 18 | | |
18 | 19 | | |
19 | 20 | | |
20 | 21 | | |
21 | 22 | | |
22 | | - | |
23 | 23 | | |
24 | 24 | | |
| 25 | + | |
25 | 26 | | |
26 | 27 | | |
27 | 28 | | |
28 | 29 | | |
29 | 30 | | |
30 | | - | |
31 | | - | |
32 | | - | |
33 | | - | |
34 | | - | |
35 | | - | |
36 | | - | |
37 | | - | |
| 31 | + | |
| 32 | + | |
| 33 | + | |
| 34 | + | |
| 35 | + | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
38 | 45 | | |
39 | 46 | | |
40 | 47 | | |
41 | | - | |
42 | | - | |
43 | | - | |
44 | | - | |
45 | | - | |
46 | | - | |
47 | | - | |
48 | | - | |
49 | | - | |
50 | | - | |
51 | | - | |
52 | | - | |
| 48 | + | |
| 49 | + | |
| 50 | + | |
| 51 | + | |
| 52 | + | |
| 53 | + | |
| 54 | + | |
| 55 | + | |
| 56 | + | |
| 57 | + | |
| 58 | + | |
| 59 | + | |
| 60 | + | |
| 61 | + | |
| 62 | + | |
| 63 | + | |
| 64 | + | |
| 65 | + | |
| 66 | + | |
| 67 | + | |
| 68 | + | |
| 69 | + | |
| 70 | + | |
| 71 | + | |
| 72 | + | |
| 73 | + | |
| 74 | + | |
| 75 | + | |
| 76 | + | |
53 | 77 | | |
54 | | - | |
55 | | - | |
56 | | - | |
57 | | - | |
58 | | - | |
59 | | - | |
60 | | - | |
61 | | - | |
62 | | - | |
63 | | - | |
64 | | - | |
65 | | - | |
66 | | - | |
67 | | - | |
| 78 | + | |
| 79 | + | |
| 80 | + | |
| 81 | + | |
| 82 | + | |
| 83 | + | |
| 84 | + | |
| 85 | + | |
| 86 | + | |
68 | 87 | | |
69 | 88 | | |
70 | | - | |
71 | | - | |
72 | | - | |
73 | | - | |
74 | | - | |
75 | | - | |
76 | | - | |
77 | | - | |
78 | | - | |
79 | | - | |
80 | | - | |
81 | | - | |
82 | | - | |
83 | | - | |
84 | | - | |
85 | | - | |
86 | | - | |
87 | | - | |
88 | | - | |
89 | | - | |
90 | | - | |
91 | | - | |
92 | | - | |
93 | | - | |
94 | | - | |
95 | | - | |
96 | | - | |
97 | | - | |
| 89 | + | |
| 90 | + | |
| 91 | + | |
| 92 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
5 | 5 | | |
6 | 6 | | |
7 | 7 | | |
8 | | - | |
9 | 8 | | |
10 | 9 | | |
11 | 10 | | |
12 | | - | |
| 11 | + | |
13 | 12 | | |
14 | | - | |
15 | 13 | | |
0 commit comments