[BRAPI]typescript SDK tab (#21473)

* typescript api

* more sdk

* json typescript

* Update json-endpoint.mdx

* update

* Update json-endpoint.mdx

* removed json

* typescript SDK

* labelling

Author: daisyfaithauma

src/content/docs/browser-rendering/rest-api/content-endpoint.mdx

@@ -5,10 +5,14 @@ sidebar:
   order: 2
 ---
 
+import { Tabs, TabItem } from "~/components";
+
 The `/content` endpoint instructs the browser to navigate to a website and capture the fully rendered HTML of a page, including the `head` section, after JavaScript execution. This is ideal for capturing content from JavaScript-heavy or interactive websites.
 
 ## Basic usage
 
+<Tabs syncKey="workersExamples"> <TabItem label="curl">
+
 Go to `https://example.com` and return the rendered HTML.
 
 ```bash
@@ -18,6 +22,25 @@ curl -X 'POST' 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browse
   -d '{"url": "https://example.com"}'
 ```
 
+</TabItem> <TabItem label="TypeScript SDK">
+
+```typescript
+import Cloudflare from "cloudflare";
+
+const client = new Cloudflare({
+	apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted
+	apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted
+});
+
+const content = await client.browserRendering.content.create({
+	account_id: "account_id",
+});
+
+console.log(content);
+```
+
+</TabItem> </Tabs>
+
 ## Advanced usage
 
 Navigate to `https://cloudflare.com/` but block images and stylesheets from loading. Undesired requests can be blocked by resource type (`rejectResourceTypes`) or by using a regex pattern (`rejectRequestPattern`). The opposite can also be done, only allow requests that match `allowRequestPattern` or `allowResourceTypes`.

src/content/docs/browser-rendering/rest-api/json-endpoint.mdx

@@ -5,6 +5,8 @@ sidebar:
   order: 9
 ---
 
+import { Tabs, TabItem } from "~/components";
+
 The `/json` endpoint extracts structured data from a webpage. You can specify the expected output using either a `prompt` or a `response_format` parameter which accepts a JSON schema. The endpoint returns the extracted data in JSON format.
 
 :::note[Note]
@@ -15,6 +17,8 @@ The `/json` endpoint leverages [Workers AI](/workers-ai/) for data extraction. U
 
 ## Basic Usage
 
+<Tabs syncKey="workersExamples"> <TabItem label="curl">
+
 ### With a Prompt and JSON schema
 
 This example captures webpage data by providing both a prompt and a JSON schema. The prompt guides the extraction process, while the JSON schema defines the expected structure of the output.
@@ -54,7 +58,6 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID
 }'
 ```
 
-
 ```json output collapse={15-48}
 {
 	"success": true,
@@ -100,7 +103,6 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID
   }'
 ```
 
-
 ```json output
 
 	"success": true,
@@ -151,7 +153,6 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID
   }'
 ```
 
-
 ```json output collapse={13-68}
 {
 	"success": true,
@@ -221,3 +222,24 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID
 	}
 }
 ```
+
+</TabItem> <TabItem label="TypeScript SDK">
+
+Below is an example using the TypeScript SDK:
+
+```typescript
+import Cloudflare from "cloudflare";
+
+const client = new Cloudflare({
+	apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted
+	apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted
+});
+
+const json = await client.browserRendering.json.create({
+	account_id: "account_id",
+});
+
+console.log(json);
+```
+
+</TabItem> </Tabs>

src/content/docs/browser-rendering/rest-api/links-endpoint.mdx

@@ -5,10 +5,14 @@ sidebar:
   order: 10
 ---
 
+import { Tabs, TabItem } from "~/components";
+
 The `/links` endpoint retrieves all links from a webpage. It can be used to extract all links from a page, including those that are hidden.
 
 ## Basic usage
 
+<Tabs syncKey="workersExamples"> <TabItem label="curl">
+
 This example grabs all links from the Cloudflare Developers homepage.
 The response will be a JSON array containing the links found on the page.
 
@@ -100,6 +104,24 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-
 }
 ```
 
+</TabItem> <TabItem label="TypeScript SDK">
+
+```typescript
+import Cloudflare from "cloudflare";
+
+const client = new Cloudflare({
+	apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted
+	apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted
+});
+
+const links = await client.browserRendering.links.create({
+	account_id: "account_id",
+});
+
+console.log(links);
+```
+
+</TabItem> </Tabs>
 ## Advanced usage
 
 In this example we can pass a `visibleLinksOnly` parameter to only return links that are visible on the page.

src/content/docs/browser-rendering/rest-api/markdown-endpoint.mdx

@@ -5,12 +5,16 @@ sidebar:
   order: 10
 ---
 
+import { Tabs, TabItem } from "~/components";
+
 The `/markdown` endpoint retrieves a webpage's content and converts it into Markdown format. You can specify a URL and optional parameters to refine the extraction process.
 
 ## Basic usage
 
 ### Using a URL
 
+<Tabs syncKey="workersExamples"> <TabItem label="curl">
+
 This example fetches the Markdown representation of a webpage.
 
 ```bash
@@ -22,15 +26,32 @@ curl -X 'POST' 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browse
   }'
 ```
 
-### JSON response
+```json output
 
-```json title="json response"
-{
 	"success": true,
 	"result": "# Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\n[More information...](https://www.iana.org/domains/example)"
 }
 ```
 
+</TabItem> <TabItem label="TypeScript SDK">
+
+```typescript
+import Cloudflare from "cloudflare";
+
+const client = new Cloudflare({
+	apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted
+	apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted
+});
+
+const markdown = await client.browserRendering.markdown.create({
+	account_id: "account_id",
+});
+
+console.log(markdown);
+```
+
+</TabItem> </Tabs>
+
 ### Use raw HTML
 
 Instead of fetching the content by specifying the URL, you can provide raw HTML content directly.
@@ -44,9 +65,7 @@ curl -X 'POST' 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browse
   }'
 ```
 
-### JSON response
-
-```json title="json response"
+```json output
 {
 	"success": true,
 	"result": "Hello World"
@@ -67,9 +86,7 @@ curl -X 'POST' 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browse
   }'
 ```
 
-### JSON response
-
-```json title="json response"
+```json output
 {
 	"success": true,
 	"result": "# Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\n[More information...](https://www.iana.org/domains/example)"

src/content/docs/browser-rendering/rest-api/pdf-endpoint.mdx

@@ -5,10 +5,14 @@ sidebar:
   order: 5
 ---
 
+import { Tabs, TabItem } from "~/components";
+
 The `/pdf` endpoint instructs the browser to render the webpage as a PDF document.
 
 ## Basic usage
 
+<Tabs syncKey="workersExamples"> <TabItem label="curl">
+
 Navigate to `https://example.com/` and inject custom CSS and an external stylesheet. Then return the rendered page as a PDF.
 
 ```bash
@@ -25,6 +29,28 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-
   --output "output.pdf"
 ```
 
+</TabItem> <TabItem label="TypeScript SDK">
+
+```typescript
+import Cloudflare from "cloudflare";
+
+const client = new Cloudflare({
+	apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted
+	apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted
+});
+
+const pdf = await client.browserRendering.pdf.create({
+	account_id: "account_id",
+});
+
+console.log(pdf);
+
+const content = await pdf.blob();
+console.log(content);
+```
+
+</TabItem> </Tabs>
+
 ## Advanced usage
 
 Navigate to `https://example.com`, first setting an additional HTTP request header and configuring the page size (`viewport`). Then, wait until there are no more than 2 network connections for at least 500 ms, or until the maximum timeout of 4500 ms is reached, before considering the page loaded and returning the rendered PDF document.

src/content/docs/browser-rendering/rest-api/scrape-endpoint.mdx

@@ -5,10 +5,14 @@ sidebar:
   order: 7
 ---
 
+import { Tabs, TabItem } from "~/components";
+
 The `/scrape` endpoint extracts structured data from specific elements on a webpage, returning details such as element dimensions and inner HTML.
 
 ## Basic usage
 
+<Tabs syncKey="workersExamples"> <TabItem label="curl">
+
 Go to `https://example.com` and extract metadata from all `h1` and `a` elements in the DOM.
 
 ```bash
@@ -64,6 +68,26 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-
 }
 ```
 
+</TabItem> <TabItem label="TypeScript SDK">
+
+```typescript
+import Cloudflare from "cloudflare";
+
+const client = new Cloudflare({
+	apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted
+	apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted
+});
+
+const scrapes = await client.browserRendering.scrape.create({
+	account_id: "account_id",
+	elements: [{ selector: "selector" }],
+});
+
+console.log(scrapes);
+```
+
+</TabItem> </Tabs>
+
 Many more options exist, like setting HTTP credentials using `authenticate`, setting `cookies`, and using `gotoOptions` to control page load behaviour - check the endpoint [reference](/api/resources/browser_rendering/subresources/scrape/methods/create/) for all available parameters.
 
 ### Response fields

src/content/docs/browser-rendering/rest-api/screenshot-endpoint.mdx

@@ -5,10 +5,14 @@ sidebar:
   order: 3
 ---
 
+import { Tabs, TabItem } from "~/components";
+
 The `/screenshot` endpoint renders the webpage by processing its HTML and JavaScript, then captures a screenshot of the fully rendered page.
 
 ## Basic usage
 
+<Tabs syncKey="workersExamples"> <TabItem label="curl">
+
 Sets the HTML content of the page to `Hello World!` and then takes a screenshot. The option `omitBackground` hides the default white background and allows capturing screenshots with transparency.
 
 ```bash
@@ -24,6 +28,25 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-
   --output "screenshot.png"
 ```
 
+</TabItem> <TabItem label="TypeScript SDK">
+
+```typescript
+import Cloudflare from "cloudflare";
+
+const client = new Cloudflare({
+	apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted
+	apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted
+});
+
+const screenshot = await client.browserRendering.screenshot.create({
+	account_id: "account_id",
+});
+
+console.log(screenshot.status);
+```
+
+</TabItem> </Tabs>
+
 For more options to control the final screenshot, like `clip`, `captureBeyondViewport`, `fullPage` and others, check the endpoint [reference](/api/resources/browser_rendering/subresources/screenshot/methods/create/).
 
 ## Advanced usage