main.ts

/**
 * 🤘 Welcome to Stagehand!
 *
 * This is a script to automate scheduling a meeting on Calendly.
 *
 * TO RUN THIS PROJECT:
 * ```
 * npm install
 * npm run start
 * ```
 *
 * To edit config, see `stagehand.config.ts`
 *
 */
import { Page, BrowserContext, Stagehand } from "@browserbasehq/stagehand";
import { z } from "zod";
import chalk from "chalk";
import dotenv from "dotenv";

dotenv.config();

interface CalendlyUser {
  name: string;
  email: string;
}

async function act(page: Page, instruction: string) {
  const candidates = await page.observe({
    instruction,
    onlyVisible: true,
    returnAction: true,
  });

  console.log(candidates);

  await page.act(candidates[0]);
}

export async function main({
  page,
  context,
  stagehand,
  calendlyUrl = "https://calendly.com/anirudh-browserbase/30min",
  user = {
    name: "Anirudh",
    email: "anirudh@browserbase.com",
  },
  eventName = "30min",
}: {
  page: Page; // Playwright Page with act, extract, and observe methods
  context: BrowserContext; // Playwright BrowserContext
  stagehand: Stagehand; // Stagehand instance
  calendlyUrl: string;
  user: CalendlyUser;
  eventName: string;
}) {
  await page.goto(calendlyUrl);

  await act(page, "click the first available date");
  await act(page, "click the first available time");
  const nextButton = await act(page, "click button that says next");

  await act(page, `fill ${user.name} in the name field`);
  await act(page, `fill ${user.email} in the email field`);
  await act(page, "click the button that says schedule event");

  console.log(nextButton);
}