Use both TS and JS for snippets (cloudflare#23248)

Author: vicb

src/content/docs/agents/api-reference/agents-api.mdx

@@ -16,7 +16,7 @@ The Agents SDK exposes two main APIs:
 
 :::note
 
-Agents require [Cloudflare Durable Objects](/durable-objects/), see [Configuration](/agents/getting-started/testing-your-agent/#add-the-agent-configuration) to learn how to add the required bindings to your project. 
+Agents require [Cloudflare Durable Objects](/durable-objects/), see [Configuration](/agents/getting-started/testing-your-agent/#add-the-agent-configuration) to learn how to add the required bindings to your project.
 
 :::
 
@@ -51,6 +51,8 @@ You can also define your own methods on an Agent: it's technically valid to publ
 
 Your own methods can access the Agent's environment variables and bindings on `this.env`, state on `this.setState`, and call other methods on the Agent via `this.yourMethodName`.
 
+<TypeScriptExample>
+
 ```ts
 import { Agent } from "agents";
 
@@ -124,6 +126,8 @@ class MyAgent extends Agent<Env, State> {
 }
 ```
 
+</TypeScriptExample>
+
 <TypeScriptExample>
 
 ```ts

src/content/docs/ai-gateway/providers/workersai.mdx

@@ -5,7 +5,7 @@ sidebar:
   order: 2
 ---
 
-import { Render } from "~/components";
+import { Render, TypeScriptExample } from "~/components";
 
 Use AI Gateway for analytics, caching, and security on requests to [Workers AI](/workers-ai/). Workers AI integrates seamlessly with AI Gateway, allowing you to execute AI inference via API requests or through an environment binding for Workers scripts. The binding simplifies the process by routing requests through your AI Gateway with minimal setup.
 
@@ -82,6 +82,8 @@ curl https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/workers-ai/v
 
 You can integrate Workers AI with AI Gateway using an environment binding. To include an AI Gateway within your Worker, add the gateway as an object in your Workers AI request.
 
+<TypeScriptExample>
+
 ```ts
 export interface Env {
 	AI: Ai;
@@ -107,6 +109,8 @@ export default {
 } satisfies ExportedHandler<Env>;
 ```
 
+</TypeScriptExample>
+
 For a detailed step-by-step guide on integrating Workers AI with AI Gateway using a binding, see [Integrations in AI Gateway](/ai-gateway/integrations/aig-workers-ai-binding/).
 
 Workers AI supports the following parameters for AI gateways:

src/content/docs/autorag/how-to/bring-your-own-generation-model.mdx

@@ -14,12 +14,15 @@ import {
 	WranglerConfig,
 	MetaInfo,
 	Type,
+	TypeScriptExample,
 } from "~/components";
 
 When using `AI Search`, AutoRAG leverages a Workers AI model to generate the response. If you want to use a model outside of Workers AI, you can use AutoRAG for search while leveraging a model outside of Workers AI to generate responses.
 
 Here is an example of how you can use an OpenAI model to generate your responses. This example uses [Workers Binding](/autorag/usage/workers-binding/), but can be easily adapted to use the [REST API](/autorag/usage/rest-api/) instead.
 
+<TypeScriptExample>
+
 ```ts
 import { openai } from "@ai-sdk/openai";
 import { generateText } from "ai";
@@ -81,3 +84,5 @@ export default {
 	},
 } satisfies ExportedHandler<Env>;
 ```
+
+</TypeScriptExample>

src/content/docs/autorag/how-to/simple-search-engine.mdx

@@ -5,13 +5,17 @@ sidebar:
   order: 5
 ---
 
+import { TypeScriptExample } from "~/components";
+
 By using the `search` method, you can implement a simple but fast search engine. This example uses [Workers Binding](/autorag/usage/workers-binding/), but can be easily adapted to use the [REST API](/autorag/usage/rest-api/) instead.
 
 To replicate this example remember to:
 
 - Disable `rewrite_query`, as you want to match the original user query
 - Configure your AutoRAG to have small chunk sizes, usually 256 tokens is enough
 
+<TypeScriptExample>
+
 ```ts
 export interface Env {
 	AI: Ai;
@@ -34,3 +38,5 @@ export default {
 	},
 } satisfies ExportedHandler<Env>;
 ```
+
+</TypeScriptExample>

src/content/docs/autorag/tutorial/brower-rendering-autorag-tutorial.mdx

@@ -5,6 +5,8 @@ sidebar:
   order: 4
 ---
 
+import { TypeScriptExample } from "~/components";
+
 AutoRAG is designed to work out of the box with data in R2 buckets. But what if your content lives on a website or needs to be rendered dynamically?
 
 In this tutorial, we’ll walk through how to:
@@ -62,6 +64,8 @@ npx wrangler r2 bucket create html-bucket
 
 5. Replace the contents of `src/index.ts` with the following skeleton script:
 
+<TypeScriptExample filename="src/index.ts">
+
 ```typescript
 import puppeteer from "@cloudflare/puppeteer";
 
@@ -120,6 +124,8 @@ export default {
 } satisfies ExportedHandler<Env>;
 ```
 
+</TypeScriptExample>
+
 6. Once the code is ready, you can deploy it to your Cloudflare account by running:
 
 ```bash

src/content/docs/bots/workers-templates/delay-action.mdx

@@ -3,11 +3,15 @@ pcx_content_type: how-to
 title: Delay action
 ---
 
+import { TypeScriptExample } from "~/components";
+
 Customers with a Bot Management and a [Workers](/workers/) subscription can use the template below to introduce a delay to requests that are likely from bots.
 
 The template sets a minimum and maximum delay, and delays requests where the bot score is less than 30 and the URI path starts with `/exampleURI`.
 
-```js title="Workers template"
+<TypeScriptExample>
+
+```ts title="Workers template"
 // Configurable Variables
 const PATH_START = '/exampleURI';
 const DELAY_FROM = 5; // in seconds
@@ -32,3 +36,5 @@ export default {
   },
 } satisfies ExportedHandler<Env>;
 ```
+
+</TypeScriptExample>

src/content/docs/browser-rendering/platform/puppeteer.mdx

@@ -6,7 +6,7 @@ sidebar:
   order: 10
 ---
 
-import { TabItem, Tabs, PackageManagers } from "~/components";
+import { PackageManagers, TypeScriptExample } from "~/components";
 
 [Puppeteer](https://pptr.dev/) is one of the most popular libraries that abstract the lower-level DevTools protocol from developers and provides a high-level API that you can use to easily instrument Chrome/Chromium and automate browsing sessions. Puppeteer is used for tasks like creating screenshots, crawling pages, and testing web applications.
 
@@ -22,24 +22,7 @@ Our version is open sourced and can be found in [Cloudflare's fork of Puppeteer]
 
 Once the [browser binding](/browser-rendering/platform/wrangler/#bindings) is configured and the `@cloudflare/puppeteer` library is installed, Puppeteer can be used in a Worker:
 
-<Tabs> <TabItem label="JavaScript" icon="seti:javascript">
-
-```js
-import puppeteer from "@cloudflare/puppeteer";
-
-export default {
-	async fetch(request, env) {
-		const browser = await puppeteer.launch(env.MYBROWSER);
-		const page = await browser.newPage();
-		await page.goto("https://example.com");
-		const metrics = await page.metrics();
-		await browser.close();
-		return Response.json(metrics);
-	},
-};
-```
-
-</TabItem> <TabItem label="TypeScript" icon="seti:typescript">
+<TypeScriptExample>
 
 ```ts
 import puppeteer from "@cloudflare/puppeteer";
@@ -60,7 +43,7 @@ export default {
 } satisfies ExportedHandler<Env>;
 ```
 
-</TabItem> </Tabs>
+</TypeScriptExample>
 
 This script [launches](https://pptr.dev/api/puppeteer.puppeteernode.launch) the `env.MYBROWSER` browser, opens a [new page](https://pptr.dev/api/puppeteer.browser.newpage), [goes to](https://pptr.dev/api/puppeteer.page.goto) [https://example.com/](https://example.com/), gets the page load [metrics](https://pptr.dev/api/puppeteer.page.metrics), [closes](https://pptr.dev/api/puppeteer.browser.close) the browser and prints metrics in JSON.
 

src/content/docs/browser-rendering/workers-bindings/reuse-sessions.mdx

@@ -5,7 +5,7 @@ sidebar:
   order: 3
 ---
 
-import { Render, PackageManagers, WranglerConfig } from "~/components";
+import { Render, PackageManagers, TypeScriptExample, WranglerConfig } from "~/components";
 
 The best way to improve the performance of your browser rendering Worker is to reuse sessions. One way to do that is via [Durable Objects](/browser-rendering/workers-bindings/browser-rendering-with-do/), which allows you to keep a long running connection from a Worker to a browser. Another way is to keep the browser open after you've finished with it, and connect to that session each time you have a new request.
 
@@ -61,6 +61,8 @@ The script below starts by fetching the current running sessions. If there are a
 
 Take into account that if the browser is idle, i.e. does not get any command, for more than the current [limit](/browser-rendering/platform/limits/), it will close automatically, so you must have enough requests per minute to keep it alive.
 
+<TypeScriptExample>
+
 ```ts
 import puppeteer from "@cloudflare/puppeteer";
 
@@ -136,6 +138,8 @@ export default {
 };
 ```
 
+</TypeScriptExample>
+
 Besides `puppeteer.sessions()`, we have added other methods to facilitate [Session Management](/browser-rendering/platform/puppeteer/#session-management).
 
 ## 5. Test

src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/domain-support/custom-metadata.mdx

@@ -7,7 +7,7 @@ head: []
 description: Configure per-hostname settings such as URL rewriting and custom headers.
 ---
 
-import { Render, APIRequest } from "~/components";
+import { Render, APIRequest, TypeScriptExample } from "~/components";
 
 You may wish to configure per-hostname (customer) settings beyond the scale of Page Rules or Rate Limiting, which have a maximum of 125 rules each.
 
@@ -59,7 +59,9 @@ The metadata object will be accessible on each request using the `request.cf.hos
 
 In the example below we will use the user_id in the Worker that was submitted using the API call above `"custom_metadata":{"customer_id":"12345","redirect_to_https": true,"security_tag":"low"}`, and set a request header to send the `customer_id` to the origin:
 
-```js
+<TypeScriptExample>
+
+```ts
 export default {
   /**
    * Fetch and add a X-Customer-Id header to the origin based on hostname
@@ -79,6 +81,8 @@ export default {
 } satisfies ExportedHandler<Env>;
 ```
 
+</TypeScriptExample>
+
 ## Accessing custom metadata in a rule expression
 
 Use the [`cf.hostname.metadata`](/ruleset-engine/rules-language/fields/reference/cf.hostname.metadata/) field to access the metadata object in rule expressions. To obtain the different values from the JSON object, use the [`lookup_json_string`](/ruleset-engine/rules-language/functions/#lookup_json_string) function.

src/content/docs/cloudflare-one/tutorials/access-workers.mdx

@@ -11,6 +11,8 @@ languages:
   - JavaScript
 ---
 
+import { TypeScriptExample } from "~/components";
+
 This tutorial covers how to use a [Cloudflare Worker](/workers/) to add custom HTTP headers to traffic, and how to send those custom headers to your origin services protected by [Cloudflare Access](/cloudflare-one/policies/access/).
 
 Some applications and networking implementations require specific custom headers to be passed to the origin, which can be difficult to implement for traffic moving through a Zero Trust proxy. You can configure a Worker to send the [user authorization headers](/cloudflare-one/identity/authorization-cookie/) required by Access.
@@ -33,7 +35,9 @@ Some applications and networking implementations require specific custom headers
 
 5. Input the following Worker:
 
-```js title="Worker with custom HTTP headers"
+<TypeScriptExample>
+
+```ts title="Worker with custom HTTP headers"
 export default {
   async fetch(request, env, ctx): Promise<Response> {
     const { headers } = request;
@@ -47,6 +51,8 @@ export default {
 } satisfies ExportedHandler<Env>;
 ```
 
+</TypeScriptExample>
+
 6. Select **Save and deploy**.
 
 Your Worker is now ready to send custom headers to your Access-protected origin services.