update references to @cloudflare/workers-types to wrangler types

Author: emily-shen

src/content/docs/ai-gateway/integrations/worker-binding-methods.mdx

@@ -8,10 +8,6 @@ import { Render, PackageManagers } from "~/components";
 
 This guide provides an overview of how to use the latest Cloudflare Workers AI Gateway binding methods. You will learn how to set up an AI Gateway binding, access new methods, and integrate them into your Workers.
 
-## Prerequisites
-
-- Install and use the `@cloudflare/workers-types` library, version `4.20250124.3` or above.
-
 ## 1. Add an AI Binding to your Worker
 
 To connect your Worker to Workers AI, add the following to your [Wrangler configuration file](/workers/wrangler/configuration/):
@@ -29,18 +25,24 @@ binding = "AI"
 
 This configuration sets up the AI binding accessible in your Worker code as `env.AI`.
 
+<Render file="wrangler-typegen" product="workers" />
+
 ## 2. Basic Usage with Workers AI + Gateway
 
 To perform an inference task using Workers AI and an AI Gateway, you can use the following code:
 
 ```typescript title="src/index.ts"
-const resp = await env.AI.run("@cf/meta/llama-3.1-8b-instruct", {
-  prompt: "tell me a joke"
-}, {
-  gateway: {
-    id: "my-gateway"
-  }
-});
+const resp = await env.AI.run(
+	"@cf/meta/llama-3.1-8b-instruct",
+	{
+		prompt: "tell me a joke",
+	},
+	{
+		gateway: {
+			id: "my-gateway",
+		},
+	},
+);
 ```
 
 Additionally, you can access the latest request log ID with:
@@ -64,12 +66,12 @@ Once you have the gateway instance, you can use the following methods:
 The `patchLog` method allows you to send feedback, score, and metadata for a specific log ID. All object properties are optional, so you can include any combination of the parameters:
 
 ```typescript
-gateway.patchLog('my-log-id', {
-  feedback: 1,
-  score: 100,
-  metadata: {
-    user: "123"
-  }
+gateway.patchLog("my-log-id", {
+	feedback: 1,
+	score: 100,
+	metadata: {
+		user: "123",
+	},
 });
 ```
 
@@ -78,7 +80,7 @@ gateway.patchLog('my-log-id', {
 
 ### 3.2. `getLog`: Read Log Details
 
-The `getLog` method retrieves details of a specific log ID. It returns an object of type `Promise<AiGatewayLog>`. You can import the `AiGatewayLog` type from the `@cloudflare/workers-types` library.
+The `getLog` method retrieves details of a specific log ID. It returns an object of type `Promise<AiGatewayLog>`. If this type is missing, ensure you have run [`wrangler types`](/workers/languages/typescript/#generate-types).
 
 ```typescript
 const log = await gateway.getLog("my-log-id");
@@ -97,7 +99,7 @@ const baseUrl = await gateway.getUrl();
 // Output: https://gateway.ai.cloudflare.com/v1/my-account-id/my-gateway/
 
 // Get a provider-specific URL
-const openaiUrl = await gateway.getUrl('openai');
+const openaiUrl = await gateway.getUrl("openai");
 // Output: https://gateway.ai.cloudflare.com/v1/my-account-id/my-gateway/openai
 ```
 
@@ -110,30 +112,33 @@ const openaiUrl = await gateway.getUrl('openai');
 The `getUrl` method is particularly useful for integrating with popular AI SDKs:
 
 **OpenAI SDK:**
+
 ```typescript
 import OpenAI from "openai";
 
 const openai = new OpenAI({
-  apiKey: "my api key", // defaults to process.env["OPENAI_API_KEY"]
-  baseURL: await env.AI.gateway('my-gateway').getUrl('openai'),
+	apiKey: "my api key", // defaults to process.env["OPENAI_API_KEY"]
+	baseURL: await env.AI.gateway("my-gateway").getUrl("openai"),
 });
 ```
 
 **Vercel AI SDK with OpenAI:**
+
 ```typescript
 import { createOpenAI } from "@ai-sdk/openai";
 
 const openai = createOpenAI({
-  baseURL: await env.AI.gateway('my-gateway').getUrl('openai'),
+	baseURL: await env.AI.gateway("my-gateway").getUrl("openai"),
 });
 ```
 
 **Vercel AI SDK with Anthropic:**
+
 ```typescript
 import { createAnthropic } from "@ai-sdk/anthropic";
 
 const anthropic = createAnthropic({
-  baseURL: await env.AI.gateway('my-gateway').getUrl('anthropic'),
+	baseURL: await env.AI.gateway("my-gateway").getUrl("anthropic"),
 });
 ```
 
@@ -145,14 +150,14 @@ Refer to the [Universal endpoint documentation](/ai-gateway/providers/universal/
 
 ```typescript
 const resp = await gateway.run({
-  provider: "workers-ai",
-  endpoint: "@cf/meta/llama-3.1-8b-instruct",
-  headers: {
-    authorization: "Bearer my-api-token"
-  },
-  query: {
-    prompt: "tell me a joke"
-  }
+	provider: "workers-ai",
+	endpoint: "@cf/meta/llama-3.1-8b-instruct",
+	headers: {
+		authorization: "Bearer my-api-token",
+	},
+	query: {
+		prompt: "tell me a joke",
+	},
 });
 ```
 
@@ -168,4 +173,4 @@ With these AI Gateway binding methods, you can now:
 - Get gateway URLs for direct API access with `getUrl`, making it easy to integrate with popular AI SDKs.
 - Execute universal requests to any AI Gateway provider with `run`.
 
-These methods offer greater flexibility and control over your AI integrations, empowering you to build more sophisticated applications on the Cloudflare Workers platform.
+These methods offer greater flexibility and control over your AI integrations, empowering you to build more sophisticated applications on the Cloudflare Workers platform.

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

@@ -42,6 +42,8 @@ binding = "MYBROWSER"
 
 </WranglerConfig>
 
+<Render file="wrangler-typegen" product="workers" />
+
 Install the npm package:
 
 ```bash

src/content/docs/d1/worker-api/index.mdx

@@ -18,7 +18,7 @@ Refer to the relevant sections for the API documentation.
 
 ## TypeScript support
 
-D1 Worker Bindings API is fully-typed via the [`@cloudflare/workers-types`](/workers/languages/typescript/#typescript) package, and also supports [generic types](https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-types) as part of its TypeScript API. A generic type allows you to provide an optional `type parameter` so that a function understands the type of the data it is handling.
+D1 Worker Bindings API is fully-typed via the runtime types generated by running [`wrangler types`](/workers/languages/typescript/#typescript) package, and also supports [generic types](https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-types) as part of its TypeScript API. A generic type allows you to provide an optional `type parameter` so that a function understands the type of the data it is handling.
 
 When using the query statement methods [`D1PreparedStatement::run`](/d1/worker-api/prepared-statements/#run), [`D1PreparedStatement::raw`](/d1/worker-api/prepared-statements/#raw) and [`D1PreparedStatement::first`](/d1/worker-api/prepared-statements/#first), you can provide a type representing each database row. D1's API will [return the result object](/d1/worker-api/return-object/#d1result) with the correct type.
 

src/content/docs/pages/framework-guides/deploy-a-nuxt-site.mdx

@@ -120,17 +120,11 @@ In order to access bindings in a deployed application, you will need to [configu
 
 ### Add bindings to TypeScript projects
 
-To get proper type support, you need to create a new `env.d.ts` file in the root of your project and declare a [binding](/pages/functions/bindings/).
+To get proper type support, you need to create a new `env.d.ts` file in the root of your project and declare a [binding](/pages/functions/bindings/). Make sure you have generated Cloudflare runtime types by running [`wrangler types`](/pages/functions/typescript/).
 
 The following is an example of adding a `KVNamespace` binding:
 
 ```ts null {9}
-import {
-	CfProperties,
-	Request,
-	ExecutionContext,
-	KVNamespace,
-} from "@cloudflare/workers-types";
 
 declare module "h3" {
 	interface H3EventContext {

src/content/docs/pages/framework-guides/deploy-a-qwik-site.mdx

@@ -68,7 +68,7 @@ The following code block shows an example of accessing a KV namespace in QwikCit
 // ...
 
 export const useGetServerTime = routeLoader$(({ platform }) => {
-  // the type `KVNamespace` comes from the @cloudflare/workers-types package
+  // the type `KVNamespace` comes from runtime types generated by running `wrangler types`
   const { MY_KV } = (platform.env as { MY_KV: KVNamespace }));
 
   return {

src/content/docs/pages/framework-guides/deploy-an-astro-site.mdx

@@ -113,12 +113,11 @@ Use bindings in Astro components and API routes by using `context.locals` from [
 
 Refer to the following example of how to access a KV namespace with TypeScript.
 
-First, you need to define Cloudflare runtime and KV type by updating the `env.d.ts`:
+First, you need to define Cloudflare runtime and KV type by updating the `env.d.ts`. Make sure you have generated Cloudflare runtime types by running [`wrangler types`](/pages/functions/typescript/). 
 
 ```typescript
 /// <reference types="astro/client" />
 
-type KVNamespace = import("@cloudflare/workers-types").KVNamespace;
 type ENV = {
 	// replace `MY_KV` with your KV namespace
 	MY_KV: KVNamespace;
@@ -137,7 +136,6 @@ You can then access your KV from an API endpoint in the following way:
 import type { APIContext } from "astro";
 
 export async function get({ locals }: APIContext) {
-	// the type KVNamespace comes from the @cloudflare/workers-types package
 	const { MY_KV } = locals.runtime.env;
 
 	return {

src/content/docs/pages/framework-guides/nextjs/ssr/bindings.mdx

@@ -30,32 +30,7 @@ Add bindings to your Pages project by adding them to your [Wrangler configuratio
 
 ## TypeScript type declarations for bindings
 
-To ensure that the `env` object from `getRequestContext().env` above has accurate TypeScript types, install [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) and create a [TypeScript declaration file](https://www.typescriptlang.org/docs/handbook/2/type-declarations.html).
-
-Install Workers Types:
-
-```sh
-npm install --save-dev @cloudflare/workers-types
-```
-
-Add Workers Types to your `tsconfig.json` file, replacing the date below with your project's [compatibility date](/workers/configuration/compatibility-dates/):
-
-```diff title="tsconfig.json"
-    "types": [
-+        "@cloudflare/workers-types/2024-07-29"
-    ]
-```
-
-Create an `env.d.ts` file in the root directory of your Next.js app, and explicitly declare the type of each binding:
-
-```ts title="env.d.ts"
-interface CloudflareEnv {
-	MY_KV_1: KVNamespace;
-	MY_KV_2: KVNamespace;
-	MY_R2: R2Bucket;
-	MY_DO: DurableObjectNamespace;
-}
-```
+To ensure that the `env` object from `getRequestContext().env` above has accurate TypeScript types, make sure you have generated types by running [`wrangler types`](/workers/languages/typescript/#generate-types) and followed the setup steps.
 
 ## Other Cloudflare APIs (`cf`, `ctx`)
 

src/content/docs/pub-sub/learning/integrate-workers.mdx

@@ -5,7 +5,7 @@ sidebar:
   order: 2
 ---
 
-import { WranglerConfig } from "~/components";
+import { WranglerConfig, Render } from "~/components";
 
 Once of the most powerful features of Pub/Sub is the ability to connect [Cloudflare Workers](/workers/) — powerful serverless functions that run on the edge — and filter, aggregate and mutate every message published to that broker. Workers can also mirror those messages to other sources, including writing to [Cloudflare R2 storage](/r2/), external databases, or other cloud services beyond Cloudflare, making it easy to persist or analyze incoming message payloads and data at scale.
 
@@ -129,6 +129,8 @@ BROKER_PUBLIC_KEYS = '''{
 
 </WranglerConfig>
 
+<Render file="wrangler-typegen" product="workers" />
+
 With the `BROKER_PUBLIC_KEYS` environmental variable set, we can now access these in our Worker code. The [`@cloudflare/pubsub`](https://www.npmjs.com/package/@cloudflare/pubsub) package allows you to authenticate the incoming request against your Broker's
 public keys.
 
@@ -144,8 +146,6 @@ our Worker code directly:
 ```typescript
 // An example that shows how to consume and transform Pub/Sub messages from a Cloudflare Worker.
 
-/// <reference types="@cloudflare/workers-types" />
-
 import { isValidBrokerRequest, PubSubMessage } from "@cloudflare/pubsub";
 
 async function pubsub(

src/content/docs/vectorize/reference/client-api.mdx

@@ -218,6 +218,4 @@ Refer to the [bindings documentation](/workers/wrangler/configuration/#vectorize
 
 ## TypeScript Types
 
-New Workers projects created via `npm create cloudflare@latest` automatically include the relevant TypeScript types for Vectorize.
-
-Older projects, or non-Workers projects looking to use Vectorize's [REST API](https://developers.cloudflare.com/api/resources/vectorize/subresources/indexes/methods/list/) in a TypeScript project, should ensure `@cloudflare/workers-types` version `4.20230922.0` or later is installed.
+<Render file="wrangler-typegen" product="workers" />

src/content/docs/workers/runtime-apis/request.mdx

@@ -99,7 +99,7 @@ An object containing Cloudflare-specific properties that can be set on the `Requ
 fetch(event.request, { cf: { scrapeShield: false } })
 ```
 
-Invalid or incorrectly-named keys in the `cf` object will be silently ignored. Consider using TypeScript and [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) to ensure proper use of the `cf` object.
+Invalid or incorrectly-named keys in the `cf` object will be silently ignored. Consider using TypeScript and generating types by running [`wrangler types`](/workers/languages/typescript/#generate-types) to ensure proper use of the `cf` object.