feat: create anthropic-cua sample

README.md

@@ -19,6 +19,10 @@ A CLI tool to create the scaffolding for a  new Kernel applications. This tool h
   - Sample App: A basic template that extracts page titles using Playwright
   - Browser Use: A template implementing the Browser Use SDK
   - Stagehand: A template implementing the Stagehand SDK
+  - Advanced Sample: Implements sample apps using advanced Kernel configs
+  - Computer Use: Implements a prompt loop using Anthropic Computer Use (Python only)
+  - Anthropic Computer Use: Implements a prompt loop using Anthropic Computer Use (Typescript only)
+  - CUA: Implements a Computer Use Agent (OpenAI CUA) sample
 - ⚡️ Automatic dependency setup
 - 🫶 Interactive CLI
 
@@ -46,7 +50,8 @@ create-kernel-app [app-name] [options]
   - `browser-use`: Template with Browser Use SDK (Python only)
   - `stagehand`: Template with Stagehand SDK (Typescript only)
   - `advanced-sample`: Implements sample apps using advanced Kernel configs
-  - `computer-use`: Implements a prompt loop using Anthropic Computer Use
+  - `computer-use`: Implements a prompt loop using Anthropic Computer Use (Python only)
+  - `anthropic-computer-use`: Implements a prompt loop using Anthropic Computer Use (Typescript only)
   - `cua`: Implements a Computer Use Agent (OpenAI CUA) sample
 
 ### Examples
@@ -61,9 +66,9 @@ Create a Typescript application with Stagehand template:
 npx @onkernel/create-kernel-app my-app --language typescript --template stagehand
 ```
 
-Create a Typescript application with Computer Use template:
+Create a Typescript application with Anthropic Computer Use template:
 ```bash
-npx @onkernel/create-kernel-app my-app --language typescript --template computer-use
+npx @onkernel/create-kernel-app my-app --language typescript --template anthropic-computer-use
 ```
 
 Create a Python application with a sample app:
@@ -75,6 +80,10 @@ Create a Python application with Browser Use template:
 ```bash
 npx @onkernel/create-kernel-app my-app --language python --template browser-use
 ```
+
+Create a Python application with Computer Use template:
+```bash
+npx @onkernel/create-kernel-app my-app --language python --template computer-use
 ```
 
 ## Next Steps
@@ -101,7 +110,7 @@ export KERNEL_API_KEY=<YOUR_API_KEY>
 kernel deploy index.ts  # --env OPENAI_API_KEY=XXX if Stagehand; --env ANTHROPIC_API_KEY=XXX if Computer Use
 
 # Python
-kernel deploy main.py   # --env OPENAI_API_KEY=XXX if Browser Use
+kernel deploy main.py   # --env OPENAI_API_KEY=XXX if Browser Use or CUA; --env ANTHROPIC_API_KEY=XXX if Computer Use
 ```
 
 If deploying an app that requires environment variables, make sure to [set them](https://docs.onkernel.com/launch/deploy#environment-variables) when you `deploy`.
@@ -114,8 +123,8 @@ kernel invoke ts-basic get-page-title --payload '{"url": "https://www.google.com
 # Typescript + Stagehand
 kernel invoke ts-stagehand stagehand-task --payload '{"query": "Best wired earbuds"}'
 
-# Typescript + Computer Use
-kernel invoke ts-cu cu-task --payload '{"query": "Search for the top 3 restaurants in NYC according to Pete Wells"}'
+# Typescript + Anthropic Computer Use
+kernel invoke ts-anthropic-cu computer-use-task --payload '{"query": "Search for the top 3 restaurants in NYC according to Pete Wells"}'
 
 # Python + Sample App
 kernel invoke python-basic get-page-title --payload '{"url": "https://www.google.com"}'
@@ -140,7 +149,8 @@ These are the sample apps currently available when you run `npx @onkernel/create
 | **browser-use** | Completes a specified task | Browser Use | `{ task }` |
 | **stagehand** | Returns the first result of a specified Google search | Stagehand | `{ query }` |
 | **advanced-sample** | Implements sample apps using advanced Kernel configs | n/a |
-| **computer-use** | Implements a prompt loop | Anthropic Computer Use API | `{ query }` |
+| **computer-use** | Implements a prompt loop | Anthropic Computer Use API (Python only) | `{ query }` |
+| **anthropic-computer-use** | Implements a prompt loop | Anthropic Computer Use API (Typescript only) | `{ query }` |
 | **cua** | Implements the OpenAI Computer Using Agent (CUA) | OpenAI CUA | `{ task }` |
 
 ## Documentation

index.ts

@@ -19,6 +19,7 @@ type TemplateKey =
   | "stagehand"
   | "advanced-sample"
   | "computer-use"
+  | "anthropic-computer-use"
   | "cua";
 type LanguageInfo = { name: string; shorthand: string };
 type TemplateInfo = {
@@ -35,6 +36,7 @@ const TEMPLATE_BROWSER_USE = "browser-use";
 const TEMPLATE_STAGEHAND = "stagehand";
 const TEMPLATE_ADVANCED_SAMPLE = "advanced-sample";
 const TEMPLATE_COMPUTER_USE = "computer-use";
+const TEMPLATE_ANTHROPIC_COMPUTER_USE = "anthropic-computer-use";
 const TEMPLATE_CUA = "cua";
 const LANGUAGE_SHORTHAND_TS = "ts";
 const LANGUAGE_SHORTHAND_PY = "py";
@@ -73,7 +75,12 @@ const TEMPLATES: Record<TemplateKey, TemplateInfo> = {
   [TEMPLATE_COMPUTER_USE]: {
     name: "Computer Use",
     description: "Implements the Anthropic Computer Use SDK",
-    languages: [LANGUAGE_TYPESCRIPT, LANGUAGE_PYTHON],
+    languages: [LANGUAGE_PYTHON],
+  },
+  [TEMPLATE_ANTHROPIC_COMPUTER_USE]: {
+    name: "Anthropic Computer Use",
+    description: "Implements the Anthropic Computer Use SDK with @onkernel/cu-playwright",
+    languages: [LANGUAGE_TYPESCRIPT],
   },
   [TEMPLATE_CUA]: {
     name: "CUA Sample",
@@ -93,8 +100,8 @@ const INVOKE_SAMPLES: Record<
       'kernel invoke ts-stagehand stagehand-task --payload \'{"query": "Best wired earbuds"}\'',
     [TEMPLATE_ADVANCED_SAMPLE]:
       'kernel invoke ts-advanced test-captcha-solver',
-    [TEMPLATE_COMPUTER_USE]:
-      'kernel invoke ts-cu cu-task --payload \'{"query": "Return the first url of a search result for NYC restaurant reviews Pete Wells"}\'',
+    [TEMPLATE_ANTHROPIC_COMPUTER_USE]:
+      'kernel invoke ts-anthropic-cu computer-use-task --payload \'{"query": "Search for the top 3 restaurants in NYC according to Pete Wells"}\'',
     [TEMPLATE_CUA]:
       'kernel invoke ts-cua cua-task --payload \'{"query": "Go to https://news.ycombinator.com and get the top 5 articles"}\'',
   },
@@ -123,8 +130,8 @@ const REGISTERED_APP_NAMES: Record<
       'ts-stagehand',
     [TEMPLATE_ADVANCED_SAMPLE]:
       'ts-advanced',
-    [TEMPLATE_COMPUTER_USE]:
-      'ts-cu',
+    [TEMPLATE_ANTHROPIC_COMPUTER_USE]:
+      'ts-anthropic-cu',
     [TEMPLATE_CUA]:
       'ts-cua',
   },

templates/typescript/anthropic-computer-use/README.md

@@ -0,0 +1,3 @@
+# Anthropic Computer Use Sample
+
+This sample app demonstrates how to use the `@onkernel/cu-playwright` package to perform a simple search query. 

templates/typescript/anthropic-computer-use/_gitignore

@@ -0,0 +1,17 @@
+# Node
+node_modules
+dist
+.DS_Store
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor
+.vscode
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw? 

templates/typescript/anthropic-computer-use/bun.lock

@@ -0,0 +1,38 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "ts-anthropic-cu",
+      "dependencies": {
+        "@onkernel/cu-playwright": "^0.1.0",
+        "@onkernel/sdk": "^0.6.0",
+        "playwright": "^1.52.0",
+        "zod": "^3.25.0",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+  },
+  "packages": {
+    "@anthropic-ai/sdk": ["@anthropic-ai/sdk@0.52.0", "", { "bin": { "anthropic-ai-sdk": "bin/cli" } }, "sha512-d4c+fg+xy9e46c8+YnrrgIQR45CZlAi7PwdzIfDXDM6ACxEZli1/fxhURsq30ZpMZy6LvSkr41jGq5aF5TD7rQ=="],
+
+    "@onkernel/cu-playwright": ["@onkernel/cu-playwright@0.1.1", "", { "dependencies": { "@anthropic-ai/sdk": "0.52.0", "luxon": "3.6.0", "zod": "^3.25.0", "zod-to-json-schema": "^3.23.1" }, "peerDependencies": { "playwright": "^1.52.0", "typescript": "^5" } }, "sha512-BSjeU49FW0gDl7NbV/OtwzN8fFwUGAEr3nMKoRy5k875fZnx/CNlqkmB+meFs7JmT87EcVhfd419zjr3Qk+YAQ=="],
+
+    "@onkernel/sdk": ["@onkernel/sdk@0.6.1", "", {}, "sha512-ygk39kbtahhzS4nHEMGCRKu0lfaWM2tExex7GDta6JCIqiFTLQtiDd9xDGd/uX1FyhUnOqkyYaiy6XxDreX9MQ=="],
+
+    "fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
+
+    "luxon": ["luxon@3.6.0", "", {}, "sha512-WE7p0p7W1xji9qxkLYsvcIxZyfP48GuFrWIBQZIsbjCyf65dG1rv4n83HcOyEyhvzxJCrUoObCRNFgRNIQ5KNA=="],
+
+    "playwright": ["playwright@1.53.1", "", { "dependencies": { "playwright-core": "1.53.1" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-LJ13YLr/ocweuwxyGf1XNFWIU4M2zUSo149Qbp+A4cpwDjsxRPj7k6H25LBrEHiEwxvRbD8HdwvQmRMSvquhYw=="],
+
+    "playwright-core": ["playwright-core@1.53.1", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-Z46Oq7tLAyT0lGoFx4DOuB1IA9D1TPj0QkYxpPVUnGDqHHvDpCftu1J2hM2PiWsNMoZh8+LQaarAWcDfPBc6zg=="],
+
+    "typescript": ["typescript@5.8.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ=="],
+
+    "zod": ["zod@3.25.67", "", {}, "sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw=="],
+
+    "zod-to-json-schema": ["zod-to-json-schema@3.24.5", "", { "peerDependencies": { "zod": "^3.24.1" } }, "sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g=="],
+  }
+}

templates/typescript/anthropic-computer-use/index.ts

@@ -0,0 +1,73 @@
+import { Kernel, type KernelContext } from '@onkernel/sdk';
+import { chromium } from 'playwright';
+import { z } from 'zod';
+import { ComputerUseAgent } from '@onkernel/cu-playwright';
+
+const kernel = new Kernel();
+
+const app = kernel.app('ts-anthropic-cu');
+
+const HackerNewsStorySchema = z.object({
+  title: z.string(),
+  points: z.number(),
+  author: z.string(),
+  comments: z.number(),
+  url: z.string().optional(),
+});
+
+type HackerNewsStory = z.infer<typeof HackerNewsStorySchema>;
+
+interface GetStoriesInput {
+  count?: number;
+}
+
+interface GetStoriesOutput {
+  stories: HackerNewsStory[];
+}
+
+const ANTHROPIC_API_KEY = process.env.ANTHROPIC_API_KEY;
+
+if (!ANTHROPIC_API_KEY) {
+  throw new Error('ANTHROPIC_API_KEY is not set');
+}
+
+app.action<GetStoriesInput, GetStoriesOutput>(
+  'anthropic-computer-use-task',
+  async (ctx: KernelContext, payload?: GetStoriesInput): Promise<GetStoriesOutput> => {
+    const count = payload?.count || 5;
+
+    const kernelBrowser = await kernel.browsers.create({
+      invocation_id: ctx.invocation_id,
+      stealth: true,
+    });
+
+    console.log("Kernel browser live view url: ", kernelBrowser.browser_live_view_url);
+
+    const browser = await chromium.connectOverCDP(kernelBrowser.cdp_ws_url);
+
+    try {
+      const context = browser.contexts()[0];
+      if (!context) {
+        throw new Error("No browser context found.");
+      }
+      const page = context.pages()[0];
+      if (!page) {
+        throw new Error("No page found in browser context.");
+      }
+
+      const agent = new ComputerUseAgent({
+          apiKey: ANTHROPIC_API_KEY,
+          page,
+      });
+
+      const stories = await agent.execute(
+          `Get the top ${count} Hacker News stories with their details`,
+          z.array(HackerNewsStorySchema).max(count)
+      );
+
+      return { stories };
+    } finally {
+        await browser.close();
+    }
+  },
+); 

templates/typescript/computer-use/package.json → templates/typescript/anthropic-computer-use/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ts-cu",
+  "name": "ts-anthropic-cu",
   "module": "index.ts",
   "type": "module",
   "private": true,
@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "@onkernel/sdk": "^0.6.0",
+    "@onkernel/cu-playwright": "^0.1.0",
     "playwright": "^1.52.0",
-    "@anthropic-ai/sdk": "0.52.0",
-    "luxon": "3.6.0"
+    "zod": "^3.25.0"
   }
-}
+} 

templates/typescript/computer-use/tsconfig.json → templates/typescript/anthropic-computer-use/tsconfig.json

@@ -27,5 +27,4 @@
   },
   "include": ["./**/*.ts", "./**/*.tsx"],
   "exclude": ["node_modules", "dist"]
-}
-
+}