browser-use-sdk 1.1.3 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.2.0 (2025-08-22)
+
+Full Changelog: [v1.1.3...v1.2.0](https://github.com/browser-use/browser-use-node/compare/v1.1.3...v1.2.0)
+
+### Features
+
+* NextJS Utils ([b5e1006](https://github.com/browser-use/browser-use-node/commit/b5e10060a064de9a9454fa90e461f09154094742))
+
 ## 1.1.3 (2025-08-22)
 
 Full Changelog: [v1.1.2...v1.1.3](https://github.com/browser-use/browser-use-node/compare/v1.1.2...v1.1.3)

package/README.md

@@ -121,6 +121,8 @@ export async function POST(req: Request) {
 }
 ```
 
+## Advanced Usage
+
 ## Handling errors
 
 When the library is unable to connect to the API,
@@ -197,8 +199,6 @@ On timeout, an `APIConnectionTimeoutError` is thrown.
 
 Note that requests which time out will be [retried twice by default](#retries).
 
-## Advanced Usage
-
 ### Accessing raw Response data (e.g., headers)
 
 The "raw" `Response` returned by `fetch()` can be accessed through the `.asResponse()` method on the `APIPromise` type that all methods return.
@@ -277,49 +277,6 @@ const client = new BrowserUse({
 });
 ```
 
-### Making custom/undocumented requests
-
-This library is typed for convenient access to the documented API. If you need to access undocumented
-endpoints, params, or response properties, the library can still be used.
-
-#### Undocumented endpoints
-
-To make requests to undocumented endpoints, you can use `client.get`, `client.post`, and other HTTP verbs.
-Options on the client, such as retries, will be respected when making these requests.
-
-```ts
-await client.post('/some/path', {
-  body: { some_prop: 'foo' },
-  query: { some_query_arg: 'bar' },
-});
-```
-
-#### Undocumented request params
-
-To make requests using undocumented parameters, you may use `// @ts-expect-error` on the undocumented
-parameter. This library doesn't validate at runtime that the request matches the type, so any extra values you
-send will be sent as-is.
-
-```ts
-client.tasks.create({
-  // ...
-  // @ts-expect-error baz is not yet public
-  baz: 'undocumented option',
-});
-```
-
-For requests with the `GET` verb, any extra params will be in the query, all other requests will send the
-extra param in the body.
-
-If you want to explicitly send an extra argument, you can do so with the `query`, `body`, and `headers` request
-options.
-
-#### Undocumented response properties
-
-To access undocumented response properties, you may access the response object with `// @ts-expect-error` on
-the response object, or cast the response object to the requisite type. Like the request params, we do not
-validate or strip extra properties from the response from the API.
-
 ### Customizing the fetch client
 
 By default, this library expects a global `fetch` function is defined.
@@ -401,18 +358,6 @@ const client = new BrowserUse({
 
 ## Frequently Asked Questions
 
-## Semantic versioning
-
-This package generally follows [SemVer](https://semver.org/spec/v2.0.0.html) conventions, though certain backwards-incompatible changes may be released as minor versions:
-
-1. Changes that only affect static types, without breaking runtime behavior.
-2. Changes to library internals which are technically public but not intended or documented for external use. _(Please open a GitHub issue to let us know if you are relying on such internals.)_
-3. Changes that we do not expect to impact the vast majority of users in practice.
-
-We take backwards-compatibility seriously and work hard to ensure you can rely on a smooth upgrade experience.
-
-We are keen for your feedback; please open an [issue](https://www.github.com/browser-use/browser-use-node/issues) with questions, bugs, or suggestions.
-
 ## Requirements
 
 TypeScript >= 4.9 is supported.

package/lib/nextjs/hooks/useBrowserUse.d.mts

@@ -0,0 +1,7 @@
+import type { ZodType } from 'zod';
+import { TaskViewWithSchema } from "../../parse.mjs";
+/**
+ * A hook to stream Browser Use updates to the client.
+ */
+export declare function useBrowserUse<T extends ZodType = ZodType>(route: string): TaskViewWithSchema<T> | null;
+//# sourceMappingURL=useBrowserUse.d.mts.map

package/lib/nextjs/hooks/useBrowserUse.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBrowserUse.d.mts","sourceRoot":"","sources":["../../../src/lib/nextjs/hooks/useBrowserUse.ts"],"names":[],"mappings":"OACO,KAAK,EAAE,OAAO,EAAE,MAAM,KAAK;OAG3B,EAAE,kBAAkB,EAAE;AAE7B;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC,GAAG,IAAI,CA2BtG"}

package/lib/nextjs/hooks/useBrowserUse.d.ts

@@ -0,0 +1,7 @@
+import type { ZodType } from 'zod';
+import { TaskViewWithSchema } from "../../parse.js";
+/**
+ * A hook to stream Browser Use updates to the client.
+ */
+export declare function useBrowserUse<T extends ZodType = ZodType>(route: string): TaskViewWithSchema<T> | null;
+//# sourceMappingURL=useBrowserUse.d.ts.map

package/lib/nextjs/hooks/useBrowserUse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBrowserUse.d.ts","sourceRoot":"","sources":["../../../src/lib/nextjs/hooks/useBrowserUse.ts"],"names":[],"mappings":"OACO,KAAK,EAAE,OAAO,EAAE,MAAM,KAAK;OAG3B,EAAE,kBAAkB,EAAE;AAE7B;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC,GAAG,IAAI,CA2BtG"}

package/lib/nextjs/hooks/useBrowserUse.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBrowserUse = useBrowserUse;
+const react_1 = require("react");
+/**
+ * A hook to stream Browser Use updates to the client.
+ */
+function useBrowserUse(route) {
+    const [status, setStatus] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const es = new EventSource(route);
+        es.addEventListener('status', (e) => {
+            if (e instanceof MessageEvent) {
+                const msg = JSON.parse(e.data);
+                setStatus(msg.data);
+                if (msg.data.status === 'finished') {
+                    es.close();
+                }
+            }
+            else {
+                console.error('Event is not a MessageEvent', e);
+            }
+        });
+        es.addEventListener('end', () => es.close());
+        es.addEventListener('error', () => es.close());
+        return () => es.close();
+    }, [route]);
+    return status;
+}
+//# sourceMappingURL=useBrowserUse.js.map

package/lib/nextjs/hooks/useBrowserUse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBrowserUse.js","sourceRoot":"","sources":["../../../src/lib/nextjs/hooks/useBrowserUse.ts"],"names":[],"mappings":";;AASA,sCA2BC;AApCD,iCAA4C;AAM5C;;GAEG;AACH,SAAgB,aAAa,CAA8B,KAAa;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAA+B,IAAI,CAAC,CAAC;IAEzE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;QAElC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YAClC,IAAI,CAAC,YAAY,YAAY,EAAE,CAAC;gBAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAuB,CAAC;gBAErD,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAEpB,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;oBACnC,EAAE,CAAC,KAAK,EAAE,CAAC;gBACb,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,CAAC,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;QAC7C,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;QAE/C,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/lib/nextjs/hooks/useBrowserUse.mjs

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+/**
+ * A hook to stream Browser Use updates to the client.
+ */
+export function useBrowserUse(route) {
+    const [status, setStatus] = useState(null);
+    useEffect(() => {
+        const es = new EventSource(route);
+        es.addEventListener('status', (e) => {
+            if (e instanceof MessageEvent) {
+                const msg = JSON.parse(e.data);
+                setStatus(msg.data);
+                if (msg.data.status === 'finished') {
+                    es.close();
+                }
+            }
+            else {
+                console.error('Event is not a MessageEvent', e);
+            }
+        });
+        es.addEventListener('end', () => es.close());
+        es.addEventListener('error', () => es.close());
+        return () => es.close();
+    }, [route]);
+    return status;
+}
+//# sourceMappingURL=useBrowserUse.mjs.map

package/lib/nextjs/hooks/useBrowserUse.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBrowserUse.mjs","sourceRoot":"","sources":["../../../src/lib/nextjs/hooks/useBrowserUse.ts"],"names":[],"mappings":"OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO;AAM3C;;GAEG;AACH,MAAM,UAAU,aAAa,CAA8B,KAAa;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA+B,IAAI,CAAC,CAAC;IAEzE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;QAElC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YAClC,IAAI,CAAC,YAAY,YAAY,EAAE,CAAC;gBAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAuB,CAAC;gBAErD,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAEpB,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;oBACnC,EAAE,CAAC,KAAK,EAAE,CAAC;gBACb,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,CAAC,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;QAC7C,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;QAE/C,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/lib/nextjs/server/utils.d.mts

@@ -0,0 +1,26 @@
+import { TaskViewWithSchema } from "../../parse.mjs";
+import { ZodType } from 'zod';
+export type BrowserUseEvent<T extends ZodType = ZodType> = {
+    event: 'status';
+    data: TaskViewWithSchema<T>;
+};
+/**
+ * Convert an async generator to a stream.
+ *
+ * @param gen - The async generator to convert to a stream.
+ * @returns A stream of the async generator.
+ */
+export declare function gtos(gen: AsyncGenerator<{
+    event: 'status';
+    data: TaskViewWithSchema<ZodType>;
+}>, opts?: {
+    /**
+     * Called when an event is emitted.
+     */
+    onEvent?: (event: TaskViewWithSchema<ZodType>) => void;
+    /**
+     * Called when the task is finished.
+     */
+    onFinished?: (event: TaskViewWithSchema<ZodType>) => void;
+}): ReadableStream<Uint8Array<ArrayBufferLike>>;
+//# sourceMappingURL=utils.d.mts.map

package/lib/nextjs/server/utils.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.mts","sourceRoot":"","sources":["../../../src/lib/nextjs/server/utils.ts"],"names":[],"mappings":"OAAO,EAAE,kBAAkB,EAAE;OACtB,EAAE,OAAO,EAAE,MAAM,KAAK;AAE7B,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI;IACzD,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;CAC7B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,IAAI,CAClB,GAAG,EAAE,cAAc,CAAC;IAClB,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC,EACF,IAAI,CAAC,EAAE;IACL;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAEvD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CAC3D,GACA,cAAc,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAsC7C"}

package/lib/nextjs/server/utils.d.ts

@@ -0,0 +1,26 @@
+import { TaskViewWithSchema } from "../../parse.js";
+import { ZodType } from 'zod';
+export type BrowserUseEvent<T extends ZodType = ZodType> = {
+    event: 'status';
+    data: TaskViewWithSchema<T>;
+};
+/**
+ * Convert an async generator to a stream.
+ *
+ * @param gen - The async generator to convert to a stream.
+ * @returns A stream of the async generator.
+ */
+export declare function gtos(gen: AsyncGenerator<{
+    event: 'status';
+    data: TaskViewWithSchema<ZodType>;
+}>, opts?: {
+    /**
+     * Called when an event is emitted.
+     */
+    onEvent?: (event: TaskViewWithSchema<ZodType>) => void;
+    /**
+     * Called when the task is finished.
+     */
+    onFinished?: (event: TaskViewWithSchema<ZodType>) => void;
+}): ReadableStream<Uint8Array<ArrayBufferLike>>;
+//# sourceMappingURL=utils.d.ts.map

package/lib/nextjs/server/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/nextjs/server/utils.ts"],"names":[],"mappings":"OAAO,EAAE,kBAAkB,EAAE;OACtB,EAAE,OAAO,EAAE,MAAM,KAAK;AAE7B,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI;IACzD,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;CAC7B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,IAAI,CAClB,GAAG,EAAE,cAAc,CAAC;IAClB,KAAK,EAAE,QAAQ,CAAC;IAChB,IAAI,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC,EACF,IAAI,CAAC,EAAE;IACL;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAEvD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CAC3D,GACA,cAAc,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAsC7C"}

package/lib/nextjs/server/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gtos = gtos;
+/**
+ * Convert an async generator to a stream.
+ *
+ * @param gen - The async generator to convert to a stream.
+ * @returns A stream of the async generator.
+ */
+function gtos(gen, opts) {
+    const enc = new TextEncoder();
+    const stream = new ReadableStream({
+        async start(controller) {
+            // open the SSE stream quickly
+            controller.enqueue(enc.encode(': connected\n\n'));
+            try {
+                for await (const msg of gen) {
+                    opts?.onEvent?.(msg.data);
+                    const data = {
+                        event: msg.event,
+                        data: msg.data,
+                    };
+                    const encoded = JSON.stringify(data);
+                    const payload = `event: ${msg.event}\ndata: ${encoded}\n\n`;
+                    controller.enqueue(enc.encode(payload));
+                    if (msg.data.status === 'finished') {
+                        opts?.onFinished?.(msg.data);
+                    }
+                }
+                controller.enqueue(enc.encode('event: end\ndata: {}\n\n'));
+            }
+            catch (e) {
+                controller.enqueue(enc.encode(`event: error\ndata: ${JSON.stringify({ message: String(e) })}\n\n`));
+            }
+            finally {
+                controller.close();
+            }
+        },
+    });
+    return stream;
+}
+//# sourceMappingURL=utils.js.map

package/lib/nextjs/server/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/lib/nextjs/server/utils.ts"],"names":[],"mappings":";;AAcA,oBAsDC;AA5DD;;;;;GAKG;AACH,SAAgB,IAAI,CAClB,GAGE,EACF,IAUC;IAED,MAAM,GAAG,GAAG,IAAI,WAAW,EAAE,CAAC;IAE9B,MAAM,MAAM,GAAG,IAAI,cAAc,CAAa;QAC5C,KAAK,CAAC,KAAK,CAAC,UAAU;YACpB,8BAA8B;YAC9B,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC;YAElD,IAAI,CAAC;gBACH,IAAI,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;oBAC5B,IAAI,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAE1B,MAAM,IAAI,GAAoB;wBAC5B,KAAK,EAAE,GAAG,CAAC,KAAK;wBAChB,IAAI,EAAE,GAAG,CAAC,IAAI;qBACf,CAAC;oBAEF,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;oBAErC,MAAM,OAAO,GAAG,UAAU,GAAG,CAAC,KAAK,WAAW,OAAO,MAAM,CAAC;oBAE5D,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;oBAExC,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;wBACnC,IAAI,EAAE,UAAU,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAC/B,CAAC;gBACH,CAAC;gBAED,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC;YAC7D,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,uBAAuB,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;YACtG,CAAC;oBAAS,CAAC;gBACT,UAAU,CAAC,KAAK,EAAE,CAAC;YACrB,CAAC;QACH,CAAC;KACF,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/lib/nextjs/server/utils.mjs

@@ -0,0 +1,39 @@
+/**
+ * Convert an async generator to a stream.
+ *
+ * @param gen - The async generator to convert to a stream.
+ * @returns A stream of the async generator.
+ */
+export function gtos(gen, opts) {
+    const enc = new TextEncoder();
+    const stream = new ReadableStream({
+        async start(controller) {
+            // open the SSE stream quickly
+            controller.enqueue(enc.encode(': connected\n\n'));
+            try {
+                for await (const msg of gen) {
+                    opts?.onEvent?.(msg.data);
+                    const data = {
+                        event: msg.event,
+                        data: msg.data,
+                    };
+                    const encoded = JSON.stringify(data);
+                    const payload = `event: ${msg.event}\ndata: ${encoded}\n\n`;
+                    controller.enqueue(enc.encode(payload));
+                    if (msg.data.status === 'finished') {
+                        opts?.onFinished?.(msg.data);
+                    }
+                }
+                controller.enqueue(enc.encode('event: end\ndata: {}\n\n'));
+            }
+            catch (e) {
+                controller.enqueue(enc.encode(`event: error\ndata: ${JSON.stringify({ message: String(e) })}\n\n`));
+            }
+            finally {
+                controller.close();
+            }
+        },
+    });
+    return stream;
+}
+//# sourceMappingURL=utils.mjs.map

package/lib/nextjs/server/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","sourceRoot":"","sources":["../../../src/lib/nextjs/server/utils.ts"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,MAAM,UAAU,IAAI,CAClB,GAGE,EACF,IAUC;IAED,MAAM,GAAG,GAAG,IAAI,WAAW,EAAE,CAAC;IAE9B,MAAM,MAAM,GAAG,IAAI,cAAc,CAAa;QAC5C,KAAK,CAAC,KAAK,CAAC,UAAU;YACpB,8BAA8B;YAC9B,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC;YAElD,IAAI,CAAC;gBACH,IAAI,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;oBAC5B,IAAI,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAE1B,MAAM,IAAI,GAAoB;wBAC5B,KAAK,EAAE,GAAG,CAAC,KAAK;wBAChB,IAAI,EAAE,GAAG,CAAC,IAAI;qBACf,CAAC;oBAEF,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;oBAErC,MAAM,OAAO,GAAG,UAAU,GAAG,CAAC,KAAK,WAAW,OAAO,MAAM,CAAC;oBAE5D,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;oBAExC,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;wBACnC,IAAI,EAAE,UAAU,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAC/B,CAAC;gBACH,CAAC;gBAED,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC;YAC7D,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,uBAAuB,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;YACtG,CAAC;oBAAS,CAAC;gBACT,UAAU,CAAC,KAAK,EAAE,CAAC;YACrB,CAAC;QACH,CAAC;KACF,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-use-sdk",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "The official TypeScript library for the Browser Use API",
   "author": "Browser Use <support@browser-use.com>",
   "types": "./index.d.ts",
@@ -34,7 +34,8 @@
     "fast-json-stable-stringify": "^2.1.0"
   },
   "peerDependencies": {
-    "zod": "^4.0.17"
+    "react": "^18 || ^19",
+    "zod": "^4"
   },
   "exports": {
     ".": {

package/src/lib/nextjs/hooks/useBrowserUse.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import type { ZodType } from 'zod';
+
+import type { BrowserUseEvent } from '../server/utils';
+import { TaskViewWithSchema } from '../../parse';
+
+/**
+ * A hook to stream Browser Use updates to the client.
+ */
+export function useBrowserUse<T extends ZodType = ZodType>(route: string): TaskViewWithSchema<T> | null {
+  const [status, setStatus] = useState<TaskViewWithSchema<T> | null>(null);
+
+  useEffect(() => {
+    const es = new EventSource(route);
+
+    es.addEventListener('status', (e) => {
+      if (e instanceof MessageEvent) {
+        const msg = JSON.parse(e.data) as BrowserUseEvent<T>;
+
+        setStatus(msg.data);
+
+        if (msg.data.status === 'finished') {
+          es.close();
+        }
+      } else {
+        console.error('Event is not a MessageEvent', e);
+      }
+    });
+
+    es.addEventListener('end', () => es.close());
+    es.addEventListener('error', () => es.close());
+
+    return () => es.close();
+  }, [route]);
+
+  return status;
+}

package/src/lib/nextjs/server/utils.ts

@@ -0,0 +1,69 @@
+import { TaskViewWithSchema } from '../../parse';
+import { ZodType } from 'zod';
+
+export type BrowserUseEvent<T extends ZodType = ZodType> = {
+  event: 'status';
+  data: TaskViewWithSchema<T>;
+};
+
+/**
+ * Convert an async generator to a stream.
+ *
+ * @param gen - The async generator to convert to a stream.
+ * @returns A stream of the async generator.
+ */
+export function gtos(
+  gen: AsyncGenerator<{
+    event: 'status';
+    data: TaskViewWithSchema<ZodType>;
+  }>,
+  opts?: {
+    /**
+     * Called when an event is emitted.
+     */
+    onEvent?: (event: TaskViewWithSchema<ZodType>) => void;
+
+    /**
+     * Called when the task is finished.
+     */
+    onFinished?: (event: TaskViewWithSchema<ZodType>) => void;
+  },
+): ReadableStream<Uint8Array<ArrayBufferLike>> {
+  const enc = new TextEncoder();
+
+  const stream = new ReadableStream<Uint8Array>({
+    async start(controller) {
+      // open the SSE stream quickly
+      controller.enqueue(enc.encode(': connected\n\n'));
+
+      try {
+        for await (const msg of gen) {
+          opts?.onEvent?.(msg.data);
+
+          const data: BrowserUseEvent = {
+            event: msg.event,
+            data: msg.data,
+          };
+
+          const encoded = JSON.stringify(data);
+
+          const payload = `event: ${msg.event}\ndata: ${encoded}\n\n`;
+
+          controller.enqueue(enc.encode(payload));
+
+          if (msg.data.status === 'finished') {
+            opts?.onFinished?.(msg.data);
+          }
+        }
+
+        controller.enqueue(enc.encode('event: end\ndata: {}\n\n'));
+      } catch (e) {
+        controller.enqueue(enc.encode(`event: error\ndata: ${JSON.stringify({ message: String(e) })}\n\n`));
+      } finally {
+        controller.close();
+      }
+    },
+  });
+
+  return stream;
+}

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '1.1.3'; // x-release-please-version
+export const VERSION = '1.2.0'; // x-release-please-version

package/version.d.mts

@@ -1,2 +1,2 @@
-export declare const VERSION = "1.1.3";
+export declare const VERSION = "1.2.0";
 //# sourceMappingURL=version.d.mts.map

package/version.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "1.1.3";
+export declare const VERSION = "1.2.0";
 //# sourceMappingURL=version.d.ts.map

package/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '1.1.3'; // x-release-please-version
+exports.VERSION = '1.2.0'; // x-release-please-version
 //# sourceMappingURL=version.js.map

package/version.mjs

@@ -1,2 +1,2 @@
-export const VERSION = '1.1.3'; // x-release-please-version
+export const VERSION = '1.2.0'; // x-release-please-version
 //# sourceMappingURL=version.mjs.map