diff --git a/.gitignore b/.gitignore index 08dbd2b..2f8093b 100644 --- a/.gitignore +++ b/.gitignore @@ -81,4 +81,6 @@ target/ .env.local # pnpm -pnpm-lock.yaml \ No newline at end of file +pnpm-lock.yaml + +test/ diff --git a/app/api/cua/agent/browserbase.ts b/app/api/cua/agent/browserbase.ts index 7f64a4a..ae15842 100644 --- a/app/api/cua/agent/browserbase.ts +++ b/app/api/cua/agent/browserbase.ts @@ -38,14 +38,14 @@ export class BrowserbaseBrowser extends BasePlaywrightComputer { private projectId: string; private session: BrowserbaseSession | null = null; private region: string; - private proxy: boolean; + private proxies: boolean; private sessionId: string | null; constructor( width: number = 1024, height: number = 768, - region: string = "us-west-2", - proxy: boolean = false, + region: string = "us-east-1", + proxies: boolean = true, sessionId: string | null = null ) { /** @@ -54,18 +54,18 @@ export class BrowserbaseBrowser extends BasePlaywrightComputer { * @param width - The width of the browser viewport. Default is 1024. * @param height - The height of the browser viewport. Default is 768. * @param region - The region for the Browserbase session. Default is "us-west-2". Pick a region close to you for better performance. https://docs.browserbase.com/guides/multi-region - * @param proxy - Whether to use a proxy for the session. Default is False. Turn on proxies if you're browsing is frequently interrupted. https://docs.browserbase.com/features/proxies + * @param proxies - Whether to use a proxy for the session. Default is False. Turn on proxies if you're browsing is frequently interrupted. https://docs.browserbase.com/features/proxies * @param sessionId - Optional. If provided, use an existing session instead of creating a new one. */ super(); // We're using a dynamic import here as a workaround since we don't have the actual types // In a real project, you would install the proper types and import correctly - this.bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY }); + this.bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY}); this.projectId = process.env.BROWSERBASE_PROJECT_ID!; this.session = null; this.dimensions = [width, height]; this.region = region; - this.proxy = proxy; + this.proxies = proxies; this.sessionId = sessionId; } @@ -105,7 +105,7 @@ export class BrowserbaseBrowser extends BasePlaywrightComputer { | "us-east-1" | "eu-central-1" | "ap-southeast-1", - proxies: this.proxy, + proxies: true, keepAlive: true, }; @@ -126,40 +126,43 @@ export class BrowserbaseBrowser extends BasePlaywrightComputer { // Inject inline cursor-rendering script globally for every page const pages = context.pages(); const page = pages[pages.length - 1]; - page.evaluate(() => { - const CURSOR_ID = '__cursor__'; + page + .evaluate(() => { + const CURSOR_ID = "__cursor__"; - // Check if cursor element already exists - if (document.getElementById(CURSOR_ID)) return; + // Check if cursor element already exists + if (document.getElementById(CURSOR_ID)) return; - const cursor = document.createElement('div'); - cursor.id = CURSOR_ID; - Object.assign(cursor.style, { - position: 'fixed', - top: '0px', - left: '0px', - width: '20px', - height: '20px', - backgroundImage: 'url("data:image/svg+xml;utf8,")', - backgroundSize: 'cover', - pointerEvents: 'none', - zIndex: '99999', - transform: 'translate(-2px, -2px)', - }); - - document.body.appendChild(cursor); + const cursor = document.createElement("div"); + cursor.id = CURSOR_ID; + Object.assign(cursor.style, { + position: "fixed", + top: "0px", + left: "0px", + width: "20px", + height: "20px", + backgroundImage: + "url(\"data:image/svg+xml;utf8,\")", + backgroundSize: "cover", + pointerEvents: "none", + zIndex: "99999", + transform: "translate(-2px, -2px)", + }); - document.addEventListener("mousemove", (e) => { - cursor.style.top = `${e.clientY}px`; - cursor.style.left = `${e.clientX}px`; - }); - document.addEventListener("mousedown", (e) => { - cursor.style.top = `${e.clientY}px`; - cursor.style.left = `${e.clientX}px`; + document.body.appendChild(cursor); + + document.addEventListener("mousemove", (e) => { + cursor.style.top = `${e.clientY}px`; + cursor.style.left = `${e.clientX}px`; + }); + document.addEventListener("mousedown", (e) => { + cursor.style.top = `${e.clientY}px`; + cursor.style.left = `${e.clientX}px`; + }); + }) + .catch((error) => { + console.error("Error injecting cursor-rendering script:", error); }); - }).catch((error) => { - console.error("Error injecting cursor-rendering script:", error); - }); // Only navigate to Google if it's a new session if (!this.sessionId) { diff --git a/app/api/session/route.ts b/app/api/session/route.ts index 57d3eeb..1639078 100644 --- a/app/api/session/route.ts +++ b/app/api/session/route.ts @@ -97,10 +97,11 @@ async function createSession(timezone?: string) { browserSettings, keepAlive: true, region: getClosestRegion(timezone), + proxies: true, timeout: 600, }); return { - session + session, }; } @@ -126,19 +127,19 @@ export async function POST(request: Request) { try { const body = await request.json(); const timezone = body.timezone as string; - const { session } = await createSession( - timezone - ); + const { session } = await createSession(timezone); const browser = await chromium.connectOverCDP(session.connectUrl); const defaultContext = browser.contexts()[0]; const page = defaultContext.pages()[0]; - await page.goto("https://www.google.com", { waitUntil: "domcontentloaded" }); + await page.goto("https://www.google.com", { + waitUntil: "domcontentloaded", + }); const liveUrl = await getDebugUrl(session.id); return NextResponse.json({ success: true, sessionId: session.id, sessionUrl: liveUrl, - connectUrl: session.connectUrl + connectUrl: session.connectUrl, }); } catch (error) { console.error("Error creating session:", error);