[DASH-1732] [templates] add build step to create javascript templates by syd-shields · Pull Request #75 · browserbase/templates

syd-shields · 2026-03-30T15:38:55Z

This PR adds a playground-production CI workflow that builds Typescript templates into playground compatible templates as deemed by the website-api templates API.

In order to marke this Linear issue as done:

merge sydshields/dash-1732-turn-existing-templates-in-js-files into dev
create a new production branch, enable branch protection
merge dev into production

Added a JS build script

Added a build script in package.json build:javascript. This command runs build TS files into JS ones in CI
Added scripts/build-javascript.mjs which builds the JS files to /javascript

Added a production branch for dashboard use

Added GitHub Actions workflow at .github/workflows/playground-productiont.yml. This only runs on the production branch
Added scripts/playground-ci.mjs which is ran in the playground-production workflow. It calls fetchPlaygroundTypescriptDirNames and runs scripts/build-javascript.mjs

Ensure playground compatibility by delegating templates API as source of truth

Added a function fetchPlaygroundTypescriptDirNames which uses the wesbite-api templates API to grab playground compatible templates from the source of truth
Add hasStagehandUsage to ensure Stagehand is being used correctly

What's not included:

Parsing templates so they can actually run in the playground (removing unused vars, BB/Stagehand configs, this will be handled dash side, since it has more to do with the environment the code will run on (sandbox IDE).

Note

Medium Risk
Adds new GitHub Actions workflows that generate and push commits to production/test-production based on a remote templates API, which could impact release branches if the build/validation logic or API response is wrong.

Overview
Adds playground-focused CI that, on production and test-production, fetches the list of playground-runnable templates from the public templates API, transpiles only those typescript/ templates into javascript/, validates their sources, and (on pushes) auto-commits the regenerated javascript/ tree.

Introduces a local build:javascript transpiler (scripts/build-javascript.mjs) with filtering and package.json rewriting, plus new validation checks (parse diagnostics, Stagehand constructor requirement, and disallowing window.playwright.chromium.connectOverCDP). Updates README.md, adds TypeScript as a dev dependency, and adds CODEOWNERS coverage for the new workflows/scripts and generated output.

^{Reviewed by Cursor Bugbot for commit 2a862c0. Bugbot is set up for automated code reviews on this repo. Configure here.}

syd-shields · 2026-03-30T15:38:56Z

This change is part of the following stack:

[DASH-1732] [templates] add build step to create javascript templates #75 ◀

_{Change managed by git-spice.}

jay-sahnan · 2026-04-02T19:14:34Z

In the templates repo, all scripts should be runnable out of the box.

Some templates have package.json files that need to be copied over to the JavaScript versions. However, we can't just copy them as-is — they still reference TypeScript. For example, they contain "start": "tsx index.ts" and TypeScript devDependencies. These need to be rewritten for JS (e.g., "start": "node index.js", remove tsx, typescript, @types/*).

We should also copy over the READMEs if possible.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Build script copies READMEs without transforming TypeScript references
- The build script now rewrites README content when copying so TypeScript paths/extensions are converted to JavaScript equivalents and regenerated JavaScript READMEs contain correct javascript/ and .js references.

Or push these changes by commenting:

@cursor push 94170f2cf4

Preview (94170f2cf4)

diff --git a/javascript/amazon-product-scraping/README.md b/javascript/amazon-product-scraping/README.md
--- a/javascript/amazon-product-scraping/README.md
+++ b/javascript/amazon-product-scraping/README.md
@@ -17,11 +17,11 @@
 
 ## QUICKSTART
 
-1. cd typescript/amazon-product-scraping
+1. cd javascript/amazon-product-scraping
 2. npm install
 3. cp .env.example .env (or create .env with required keys)
 4. Add BROWSERBASE_PROJECT_ID, BROWSERBASE_API_KEY, and GOOGLE_API_KEY to .env
-5. Optionally edit SEARCH_QUERY in index.ts
+5. Optionally edit SEARCH_QUERY in index.js
 6. npm start
 
 ## EXPECTED OUTPUT
@@ -49,7 +49,7 @@
 
 ## NEXT STEPS
 
-• Switch to direct URL: Uncomment the URL-based search block in index.ts for faster runs without LLM search actions.
+• Switch to direct URL: Uncomment the URL-based search block in index.js for faster runs without LLM search actions.
 • Parameterize query: Accept SEARCH_QUERY from CLI or env for different products without editing code.
 • Paginate: Extend extraction to multiple pages or increase the number of products per run.
 

diff --git a/javascript/company-address-finder/README.md b/javascript/company-address-finder/README.md
--- a/javascript/company-address-finder/README.md
+++ b/javascript/company-address-finder/README.md
@@ -27,7 +27,7 @@
 2. npm install
 3. cp .env.example .env
 4. Add your Browserbase API key, Project ID, and Google Generative AI API key to .env
-5. Edit COMPANY_NAMES array in index.ts to specify which companies to process
+5. Edit COMPANY_NAMES array in index.js to specify which companies to process
 6. npm start
 
 ## EXPECTED OUTPUT

diff --git a/javascript/company-value-prop-generator/README.md b/javascript/company-value-prop-generator/README.md
--- a/javascript/company-value-prop-generator/README.md
+++ b/javascript/company-value-prop-generator/README.md
@@ -16,7 +16,7 @@
 
 ## QUICKSTART
 
-1. cd typescript/company-value-prop-generator
+1. cd javascript/company-value-prop-generator
 2. npm install
 3. cp .env.example .env
 4. Add required API keys/IDs to .env

diff --git a/javascript/dynamic-form-filling/README.md b/javascript/dynamic-form-filling/README.md
--- a/javascript/dynamic-form-filling/README.md
+++ b/javascript/dynamic-form-filling/README.md
@@ -21,7 +21,7 @@
 1. pnpm install
 2. cp .env.example .env
 3. Add required API keys/IDs to .env (BROWSERBASE_PROJECT_ID, BROWSERBASE_API_KEY, GOOGLE_GENERATIVE_AI_API_KEY)
-4. Customize the `tripDetails` variable in index.ts with your own form data
+4. Customize the `tripDetails` variable in index.js with your own form data
 5. Update the form URL if using a different form
 6. pnpm start
 

diff --git a/javascript/extend-browserbase/README.md b/javascript/extend-browserbase/README.md
--- a/javascript/extend-browserbase/README.md
+++ b/javascript/extend-browserbase/README.md
@@ -23,7 +23,7 @@
 
 ## QUICKSTART
 
-1. cd typescript/extend-browserbase
+1. cd javascript/extend-browserbase
 2. pnpm install
 3. cp .env.example .env
 4. Add required API keys to .env:

diff --git a/javascript/getting-started-with-browserbase/README.md b/javascript/getting-started-with-browserbase/README.md
--- a/javascript/getting-started-with-browserbase/README.md
+++ b/javascript/getting-started-with-browserbase/README.md
@@ -31,7 +31,7 @@
 
 ### TypeScript
 
-1. cd typescript/getting-started-with-browserbase
+1. cd javascript/getting-started-with-browserbase
 2. npm install
 3. cp .env.example .env
 4. Add BROWSERBASE_API_KEY to .env (get it from https://browserbase.com/settings)

diff --git a/javascript/image-url-download/README.md b/javascript/image-url-download/README.md
--- a/javascript/image-url-download/README.md
+++ b/javascript/image-url-download/README.md
@@ -15,7 +15,7 @@
   Docs → https://docs.stagehand.dev/basics/extract
 - page.evaluate: run a JavaScript function directly inside the browser context — inherits proxy, cookies, and headers.
   Docs → https://playwright.dev/docs/evaluating
-- MAX_IMAGES: configurable cap (default: 10) on how many images to download per run. Set via the `MAX_IMAGES` env var or the constant at the top of `index.ts`.
+- MAX_IMAGES: configurable cap (default: 10) on how many images to download per run. Set via the `MAX_IMAGES` env var or the constant at the top of `index.js`.
 
 ## QUICKSTART
 
@@ -43,7 +43,7 @@
 - Empty images folder: some pages load images lazily — try scrolling the page before extraction, or increase the page load wait
 - Zero images found: the page may use CSS background images not captured by `<img>` tags — adjust the extract instruction to target specific selectors
 - CORS / auth-gated images: images behind login walls or strict CORS policies may fail in `page.evaluate()` — ensure you are authenticated before running the script
-- MAX_IMAGES cap: if you need more than 10 images, set `MAX_IMAGES=50` in your .env or edit the constant at the top of `index.ts`
+- MAX_IMAGES cap: if you need more than 10 images, set `MAX_IMAGES=50` in your .env or edit the constant at the top of `index.js`
 - Large pages: pages with hundreds of images may slow down `extract()` — use MAX_IMAGES to limit the download set
 
 ## USE CASES
@@ -58,7 +58,7 @@
 • Scroll before extracting: call `page.evaluate(() => window.scrollTo(0, document.body.scrollHeight))` before `extract()` to trigger lazy-loaded images.
 • Concurrent downloads: fan out the `page.evaluate` fetch calls with `Promise.allSettled` for faster bulk downloads.
 • Metadata CSV: write a `manifest.csv` alongside the images recording original URL, filename, MIME type, byte size, and download timestamp.
-• Extend MIME support: add entries to the `MIME_TO_EXT` map at the top of `index.ts` for any formats not already covered.
+• Extend MIME support: add entries to the `MIME_TO_EXT` map at the top of `index.js` for any formats not already covered.
 
 ## HELPFUL RESOURCES
 

diff --git a/javascript/playwright/basic-recaptcha/README.md b/javascript/playwright/basic-recaptcha/README.md
--- a/javascript/playwright/basic-recaptcha/README.md
+++ b/javascript/playwright/basic-recaptcha/README.md
@@ -67,7 +67,7 @@
 
 ## QUICKSTART
 
-1. cd typescript/playwright/basic-recaptcha
+1. cd javascript/playwright/basic-recaptcha
 2. pnpm install
 3. cp .env.example .env
 4. Add your Browserbase API key to .env

diff --git a/javascript/sec-filing-research/README.md b/javascript/sec-filing-research/README.md
--- a/javascript/sec-filing-research/README.md
+++ b/javascript/sec-filing-research/README.md
@@ -25,7 +25,7 @@
 2. npm install
 3. cp .env.example .env
 4. Add BROWSERBASE_PROJECT_ID, BROWSERBASE_API_KEY, and GOOGLE_API_KEY to .env
-5. (Optional) Edit SEARCH_QUERY and NUM_FILINGS in index.ts
+5. (Optional) Edit SEARCH_QUERY and NUM_FILINGS in index.js
 6. npm start
 
 ## EXPECTED OUTPUT

diff --git a/javascript/website-link-tester/README.md b/javascript/website-link-tester/README.md
--- a/javascript/website-link-tester/README.md
+++ b/javascript/website-link-tester/README.md
@@ -18,7 +18,7 @@
 ### QUICKSTART
 
 1. **cd into the template**
-   - `cd typescript/website-link-tester`
+   - `cd javascript/website-link-tester`
 2. **Install dependencies**
    - `npm install`
 3. **Configure environment**
@@ -76,7 +76,7 @@
 
 ### TUNING BATCH SIZE & CONCURRENCY
 
-- **`MAX_CONCURRENT_LINKS` in `index.ts`**
+- **`MAX_CONCURRENT_LINKS` in `index.js`**
   - Default: `1` → sequential link verification (works on all plans)
   - Set to `> 1` → more concurrent link verifications per batch (requires higher Browserbase concurrency limits)
 - **Using Semaphores for advanced control**

diff --git a/scripts/build-javascript.mjs b/scripts/build-javascript.mjs
--- a/scripts/build-javascript.mjs
+++ b/scripts/build-javascript.mjs
@@ -76,6 +76,15 @@
   return pkg;
 }
 
+function adaptReadmeForJavaScript(content) {
+  return content
+    .replaceAll("typescript/", "javascript/")
+    .replaceAll(/\.d\.ts\b/g, "__PRESERVE_D_TS__")
+    .replaceAll(/\.tsx\b/g, ".jsx")
+    .replaceAll(/\.ts\b/g, ".js")
+    .replaceAll(/__PRESERVE_D_TS__/g, ".d.ts");
+}
+
 function normalizeRelativePath(filePath) {
   return filePath.split(path.sep).join("/");
 }
@@ -187,6 +196,15 @@
   await writeFile(outputPath, `${JSON.stringify(adapted, null, 2)}\n`, "utf8");
 }
 
+async function writeAdaptedReadme(sourcePath) {
+  const relativePath = path.relative(TYPESCRIPT_DIR, sourcePath);
+  const outputPath = path.join(JAVASCRIPT_DIR, relativePath);
+  const source = await readFile(sourcePath, "utf8");
+  const adapted = adaptReadmeForJavaScript(source);
+  await mkdir(path.dirname(outputPath), { recursive: true });
+  await writeFile(outputPath, adapted, "utf8");
+}
+
 async function transpileFile(sourcePath) {
   const relativePath = path.relative(TYPESCRIPT_DIR, sourcePath);
   const outputPath = path
@@ -260,6 +278,8 @@
     assetFiles.map(async (filePath) => {
       if (path.basename(filePath) === "package.json") {
         await writeAdaptedPackageJson(filePath);
+      } else if (path.basename(filePath) === "README.md") {
+        await writeAdaptedReadme(filePath);
       } else {
         await copyAssetFile(filePath);
       }

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

…ed and rewritten with new build

…DED_DIRS

cursor · 2026-05-04T16:01:37Z

+  const argv = ["scripts/build-javascript.mjs"];
+  for (const name of dirs) {
+    argv.push("--include-template", name);
+  }


Empty API response causes CI to build all templates

Medium Severity

When fetchPlaygroundTypescriptDirNames returns an empty array (e.g., the templates API returns zero playground-runnable templates), the for loop adds no --include-template flags to argv. The build script then receives no filter arguments, causing includeTemplates.size to be 0 and falling through to the else branch that wipes javascript/ and rebuilds every template instead of none. The CI workflow would then commit all templates to the production branch, which is the opposite of the intended behavior.

Additional Locations (1)

scripts/build-javascript.mjs#L33-L54

^{Reviewed by Cursor Bugbot for commit b17759b. Configure here.}

cursor · 2026-05-04T16:01:47Z

+  const argv = ["scripts/build-javascript.mjs"];
+  for (const name of dirs) {
+    argv.push("--include-template", name);
+  }


Empty API response causes CI to build all templates

Medium Severity

When fetchPlaygroundTypescriptDirNames returns an empty array (e.g., the templates API returns zero playground-runnable templates), the for loop adds no --include-template flags to argv. The build script then receives no filter arguments, causing includeTemplates.size to be 0 and falling through to the else branch that wipes javascript/ and rebuilds every template instead of none. The CI workflow would then commit all templates to the production branch, which is the opposite of the intended behavior.

Additional Locations (1)

scripts/build-javascript.mjs#L33-L54

^{Reviewed by Cursor Bugbot for commit b17759b. Configure here.}

…javascript.mjs

…itionally set for all generated JS templates

…ke updates to it twice

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 5 total unresolved issues (including 4 from previous reviews).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit a143d03. Configure here.}

jay-sahnan

Syd, this looks great! Thank you!

Tiny NITS:

We should add javascript/ to .gitignore
How do we test/validate that the conversion to JS? Is this a CI job on future PRs to the dev branch?

…t alongside tsc

…le places to prevent drift

syd-shields changed the title ~~add build step to create javascript templates~~ [DASH-1732] [templates] add build step to create javascript templates Mar 30, 2026

syd-shields requested a review from jay-sahnan April 1, 2026 14:38

jay-sahnan reviewed Apr 2, 2026

View reviewed changes

Comment thread scripts/build-javascript.mjs

cursor Bot reviewed Apr 8, 2026

View reviewed changes

Comment thread scripts/build-javascript.mjs

cursor Bot reviewed Apr 8, 2026

View reviewed changes

Comment thread scripts/build-javascript.mjs Outdated

cursor Bot reviewed Apr 14, 2026

View reviewed changes

Comment thread scripts/build-javascript.mjs

syd-shields added 12 commits May 4, 2026 11:25

init

3cdb1e7

add a build step that turns new ts templates into js in CI

2985f0f

add file filter to build script

2942385

add built js templates

6cc2dd6

add exclude flag

969f904

add comments to explain build filters

f3f7984

add build step to run on dev branch in CI

ae17bb9

regen templats on each pr merge

48fc473

include all readme, package json and env examples in build

8ea723d

get paths to build js files first so that the entire repo isn't delet…

c7dbcce

…ed and rewritten with new build

remove built js files

fc8fd04

only build js files to production branch

3173ce4

syd-shields force-pushed the sydshields/dash-1732-turn-existing-templates-in-js-files branch from 8d8479e to 3173ce4 Compare May 4, 2026 15:26

cursor Bot reviewed May 4, 2026

View reviewed changes

Comment thread scripts/build-javascript.mjs

Comment thread scripts/build-javascript.mjs

syd-shields added 3 commits May 4, 2026 11:46

remove build javascript workflow

ac53074

before recursing, skip directories whose basename is in DEFAULT_EXCLU…

541e995

…DED_DIRS

before recursing, skip directories whose basename is in DEFAULT_EXCLU…

b17759b

…DED_DIRS

cursor Bot reviewed May 4, 2026

View reviewed changes

if there are zero playground compatible templates, do not call build-…

ed33a0c

…javascript.mjs

cursor Bot reviewed May 4, 2026

View reviewed changes

Comment thread scripts/build-javascript.mjs Outdated

Comment thread scripts/build-javascript.mjs

add test-production branch support

5b91a7e

build js templates

5d56277

cursor Bot reviewed May 4, 2026

View reviewed changes

Comment thread javascript/google-trends/package.json Outdated

Comment thread .github/workflows/playground-test-production.yml Outdated

syd-shields added 4 commits May 11, 2026 09:49

remove built js files

0070df7

add pkg.type = module to adaptPackageJsonForJavaScript so it's uncond…

009a835

…itionally set for all generated JS templates

consolidate workflows to one plauground.yml file to remove need to ma…

a240b02

…ke updates to it twice

write contents to test-production and production branches

a143d03

cursor Bot reviewed May 11, 2026

View reviewed changes

Comment thread .github/workflows/playground.yml Outdated

syd-shields added 2 commits May 11, 2026 10:08

use hardcoded branch names instead of unused var

1ba6a37

add --no-verify flag to build

3e85383

jay-sahnan approved these changes May 11, 2026

View reviewed changes

syd-shields added 2 commits May 13, 2026 10:57

add stripLeadingTscBuildCommand to handle when multiple commands exis…

912d149

…t alongside tsc

add parseBuildOptions to parse CLI flags at once instead of in multip…

2a862c0

…le places to prevent drift

syd-shields merged commit 200cc27 into dev May 13, 2026
3 checks passed

Conversation

syd-shields commented Mar 30, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

syd-shields commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jay-sahnan commented Apr 2, 2026

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot May 4, 2026

Choose a reason for hiding this comment

Empty API response causes CI to build all templates

Uh oh!

cursor Bot May 4, 2026

Choose a reason for hiding this comment

Empty API response causes CI to build all templates

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jay-sahnan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

syd-shields commented Mar 30, 2026 •

edited by cursor Bot

Loading

syd-shields commented Mar 30, 2026 •

edited

Loading

cursor Bot left a comment •

edited

Loading