diff --git a/src/content/docs/agents/api-reference/agents-api.mdx b/src/content/docs/agents/api-reference/agents-api.mdx index cde17b17f54204..e76fb4e7efcd40 100644 --- a/src/content/docs/agents/api-reference/agents-api.mdx +++ b/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`. + + ```ts import { Agent } from "agents"; @@ -124,6 +126,8 @@ class MyAgent extends Agent { } ``` + + ```ts diff --git a/src/content/docs/ai-gateway/providers/workersai.mdx b/src/content/docs/ai-gateway/providers/workersai.mdx index f46d95ba536058..dc011213a9cbb1 100644 --- a/src/content/docs/ai-gateway/providers/workersai.mdx +++ b/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. + + ```ts export interface Env { AI: Ai; @@ -107,6 +109,8 @@ export default { } satisfies ExportedHandler; ``` + + 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: diff --git a/src/content/docs/autorag/how-to/bring-your-own-generation-model.mdx b/src/content/docs/autorag/how-to/bring-your-own-generation-model.mdx index 45770ae0e7bb45..64422f67457e49 100644 --- a/src/content/docs/autorag/how-to/bring-your-own-generation-model.mdx +++ b/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. + + ```ts import { openai } from "@ai-sdk/openai"; import { generateText } from "ai"; @@ -81,3 +84,5 @@ export default { }, } satisfies ExportedHandler; ``` + + \ No newline at end of file diff --git a/src/content/docs/autorag/how-to/simple-search-engine.mdx b/src/content/docs/autorag/how-to/simple-search-engine.mdx index f170bb28abc469..01630aa731bdfe 100644 --- a/src/content/docs/autorag/how-to/simple-search-engine.mdx +++ b/src/content/docs/autorag/how-to/simple-search-engine.mdx @@ -5,6 +5,8 @@ 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: @@ -12,6 +14,8 @@ 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 + + ```ts export interface Env { AI: Ai; @@ -34,3 +38,5 @@ export default { }, } satisfies ExportedHandler; ``` + + \ No newline at end of file diff --git a/src/content/docs/autorag/tutorial/brower-rendering-autorag-tutorial.mdx b/src/content/docs/autorag/tutorial/brower-rendering-autorag-tutorial.mdx index bd92120a62ac41..c05280a950fa25 100644 --- a/src/content/docs/autorag/tutorial/brower-rendering-autorag-tutorial.mdx +++ b/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: + + ```typescript import puppeteer from "@cloudflare/puppeteer"; @@ -120,6 +124,8 @@ export default { } satisfies ExportedHandler; ``` + + 6. Once the code is ready, you can deploy it to your Cloudflare account by running: ```bash diff --git a/src/content/docs/bots/workers-templates/delay-action.mdx b/src/content/docs/bots/workers-templates/delay-action.mdx index 364cb730872b0f..632fa306fca930 100644 --- a/src/content/docs/bots/workers-templates/delay-action.mdx +++ b/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" + + +```ts title="Workers template" // Configurable Variables const PATH_START = '/exampleURI'; const DELAY_FROM = 5; // in seconds @@ -32,3 +36,5 @@ export default { }, } satisfies ExportedHandler; ``` + + diff --git a/src/content/docs/browser-rendering/platform/puppeteer.mdx b/src/content/docs/browser-rendering/platform/puppeteer.mdx index 1a97023a5f4498..5be6799fcbb1e1 100644 --- a/src/content/docs/browser-rendering/platform/puppeteer.mdx +++ b/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: - - -```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); - }, -}; -``` - - + ```ts import puppeteer from "@cloudflare/puppeteer"; @@ -60,7 +43,7 @@ export default { } satisfies ExportedHandler; ``` - + 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. diff --git a/src/content/docs/browser-rendering/workers-bindings/reuse-sessions.mdx b/src/content/docs/browser-rendering/workers-bindings/reuse-sessions.mdx index 080a15e59cfffb..6986e4a5de3fbc 100644 --- a/src/content/docs/browser-rendering/workers-bindings/reuse-sessions.mdx +++ b/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. + + ```ts import puppeteer from "@cloudflare/puppeteer"; @@ -136,6 +138,8 @@ export default { }; ``` + + Besides `puppeteer.sessions()`, we have added other methods to facilitate [Session Management](/browser-rendering/platform/puppeteer/#session-management). ## 5. Test diff --git a/src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/domain-support/custom-metadata.mdx b/src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/domain-support/custom-metadata.mdx index 29127839fba1c2..9ac131ec4e130d 100644 --- a/src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/domain-support/custom-metadata.mdx +++ b/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 + + +```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; ``` + + ## 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. diff --git a/src/content/docs/cloudflare-one/tutorials/access-workers.mdx b/src/content/docs/cloudflare-one/tutorials/access-workers.mdx index 048ae9d17efd65..2d9ec213e9ff27 100644 --- a/src/content/docs/cloudflare-one/tutorials/access-workers.mdx +++ b/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" + + +```ts title="Worker with custom HTTP headers" export default { async fetch(request, env, ctx): Promise { const { headers } = request; @@ -47,6 +51,8 @@ export default { } satisfies ExportedHandler; ``` + + 6. Select **Save and deploy**. Your Worker is now ready to send custom headers to your Access-protected origin services. diff --git a/src/content/docs/durable-objects/get-started.mdx b/src/content/docs/durable-objects/get-started.mdx index 7582c6b553af93..98b5ec1da58b60 100644 --- a/src/content/docs/durable-objects/get-started.mdx +++ b/src/content/docs/durable-objects/get-started.mdx @@ -298,7 +298,7 @@ export class MyDurableObject extends DurableObject { } } export default { - async fetch(request, env, ctx):Promise { + async fetch(request, env, ctx): Promise { const id:DurableObjectId = env.MY_DURABLE_OBJECT.idFromName(new URL(request.url).pathname); const stub = env.MY_DURABLE_OBJECT.get(id); diff --git a/src/content/docs/images/manage-images/serve-images/serve-private-images.mdx b/src/content/docs/images/manage-images/serve-images/serve-private-images.mdx index 50495a7bb5b192..c296235149c43b 100644 --- a/src/content/docs/images/manage-images/serve-images/serve-private-images.mdx +++ b/src/content/docs/images/manage-images/serve-images/serve-private-images.mdx @@ -5,6 +5,8 @@ sidebar: order: 23 --- +import { TypeScriptExample } from "~/components"; + You can serve private images by using signed URL tokens. When an image requires a signed URL, the image cannot be accessed without a token unless it is being requested for a variant set to always allow public access. 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account. @@ -19,7 +21,9 @@ Private images do not currently support custom paths. The example below uses a Worker that takes in a regular URL without a signed token and returns a tokenized URL that expires after one day. You can, however, set this expiration period to whatever you need, by changing the const `EXPIRATION` value. -```js + + +```ts const KEY = 'YOUR_KEY_FROM_IMAGES_DASHBOARD'; const EXPIRATION = 60 * 60 * 24; // 1 day @@ -69,3 +73,5 @@ export default { }, } satisfies ExportedHandler; ``` + + \ No newline at end of file