AGENTCAST: LIVE BROWSER SESSIONS FOR AI AGENTS

// Install the SDK
npm install agentcast

// or
bun add agentcast

// agent.ts
import { BrowserAgent, type BrowserAgentEnv } from "agentcast";

export class MyAgent extends BrowserAgent<BrowserAgentEnv> {
  
  async onTask(task: string) {
    // Navigate to a page
    await this.goto("https://example.com");
    
    // Natural language actions via Stagehand
    await this.act("click the login button");
    await this.act("fill in username with 'demo@example.com'");
    await this.act("fill in password with 'secret123'");
    await this.act("click submit");
    
    // Extract structured data with Zod
    const data = await this.extract({
      instruction: "Get the user profile info",
      schema: z.object({
        name: z.string(),
        email: z.string(),
        plan: z.enum(["free", "pro", "enterprise"])
      })
    });
    
    return data;
  }
}

// worker.ts
import { Hono } from "hono";
import { MyAgent } from "./agent";

const app = new Hono<{ Bindings: Env }>();

// Start a new browser session
app.post("/session", async (c) => {
  const { task } = await c.req.json();
  
  const id = c.env.AGENT.newUniqueId();
  const stub = c.env.AGENT.get(id);
  
  // Agent spins up container, starts browser, begins task
  const result = await stub.startTask(task);
  
  return c.json({ sessionId: id.toString(), result });
});

// Stream live video of agent actions
app.get("/session/:id/stream", async (c) => {
  const id = c.env.AGENT.idFromString(c.req.param("id"));
  const stub = c.env.AGENT.get(id);
  
  // Returns WebSocket upgrade for live screencast
  return stub.fetch(c.req.raw);
});

export default app;
export { MyAgent };

// Structured data extraction with Zod schemas
import { z } from "zod";

const productSchema = z.object({
  title: z.string(),
  price: z.number(),
  rating: z.number().optional(),
  inStock: z.boolean()
});

// Agent extracts typed data from any page
const product = await agent.extract({
  instruction: "Get the main product details",
  schema: productSchema
});

// TypeScript knows the shape
console.log(product.title);  // string
console.log(product.price);  // number
console.log(product.inStock); // boolean

// SvelteKit viewer component
<script lang="ts">
  let canvas: HTMLCanvasElement;
  let ws: WebSocket;
  
  function connect(sessionId: string) {
    ws = new WebSocket(`wss://your-worker.workers.dev/session/${sessionId}/stream`);
    
    ws.onmessage = (e) => {
      const frame = JSON.parse(e.data);
      
      if (frame.type === 'screencast') {
        // Render CDP screencast frame to canvas
        const img = new Image();
        img.onload = () => {
          canvas.getContext('2d')?.drawImage(img, 0, 0);
        };
        img.src = `data:image/jpeg;base64,${frame.data}`;
      }
    };
  }
  
  function sendClick(x: number, y: number) {
    // Bidirectional control - viewer can interact
    ws.send(JSON.stringify({ type: 'click', x, y }));
  }
  
  function sendInstruction(text: string) {
    // Natural language control
    ws.send(JSON.stringify({ type: 'act', instruction: text }));
  }
</script>

<canvas bind:this={canvas} on:click={(e) => sendClick(e.offsetX, e.offsetY)} />
<input type="text" on:keydown={(e) => e.key === 'Enter' && sendInstruction(e.target.value)} />

// wrangler.toml
name = "agentcast-demo"
main = "src/worker.ts"
compatibility_date = "2024-12-01"

[containers]
enabled = true

[[durable_objects.bindings]]
name = "AGENT"
class_name = "MyAgent"

[[migrations]]
tag = "v1"
new_classes = ["MyAgent"]

// Use cases

// 1. E-COMMERCE MONITORING
await agent.goto("https://competitor.com/products");
const prices = await agent.extract({
  instruction: "Get all product prices on this page",
  schema: z.array(z.object({ name: z.string(), price: z.number() }))
});

// 2. FORM AUTOMATION
await agent.act("fill in the contact form with our support email");
await agent.act("select 'Enterprise' from the plan dropdown");
await agent.act("click submit and wait for confirmation");

// 3. SCRAPING WITH INTERACTION
await agent.act("click 'Load More' until all results are visible");
const results = await agent.extract({
  instruction: "Extract all search results",
  schema: searchResultsSchema
});

// 4. TESTING & QA
await agent.goto("https://staging.myapp.com");
await agent.act("log in as test user");
await agent.act("navigate to settings");
const settings = await agent.extract({ instruction: "Get current settings", schema: settingsSchema });
expect(settings.notifications).toBe(true);