Skip to content

Commit d1058af

Browse files
committed
update references to @cloudflare/workers-types
1 parent 96e1833 commit d1058af

File tree

13 files changed

+47
-77
lines changed

13 files changed

+47
-77
lines changed

src/content/docs/agents/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ And then define your first Agent by creating a class that extends the `Agent` cl
5050
<TypeScriptExample>
5151

5252
```ts
53-
import { Agent, AgentNamespace } from 'agents';
53+
import { Agent, AgentNamespace } from "agents";
5454

5555
export class MyAgent extends Agent {
5656
// Define methods on the Agent:

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

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@ import { Render, PackageManagers } from "~/components";
88

99
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.
1010

11-
## Prerequisites
12-
13-
- Install and use the `@cloudflare/workers-types` library, version `4.20250124.3` or above.
14-
1511
## 1. Add an AI Binding to your Worker
1612

1713
To connect your Worker to Workers AI, add the following to your [Wrangler configuration file](/workers/wrangler/configuration/):
@@ -34,13 +30,17 @@ This configuration sets up the AI binding accessible in your Worker code as `env
3430
To perform an inference task using Workers AI and an AI Gateway, you can use the following code:
3531

3632
```typescript title="src/index.ts"
37-
const resp = await env.AI.run("@cf/meta/llama-3.1-8b-instruct", {
38-
prompt: "tell me a joke"
39-
}, {
40-
gateway: {
41-
id: "my-gateway"
42-
}
43-
});
33+
const resp = await env.AI.run(
34+
"@cf/meta/llama-3.1-8b-instruct",
35+
{
36+
prompt: "tell me a joke",
37+
},
38+
{
39+
gateway: {
40+
id: "my-gateway",
41+
},
42+
},
43+
);
4444
```
4545

4646
Additionally, you can access the latest request log ID with:
@@ -64,12 +64,12 @@ Once you have the gateway instance, you can use the following methods:
6464
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:
6565

6666
```typescript
67-
gateway.patchLog('my-log-id', {
68-
feedback: 1,
69-
score: 100,
70-
metadata: {
71-
user: "123"
72-
}
67+
gateway.patchLog("my-log-id", {
68+
feedback: 1,
69+
score: 100,
70+
metadata: {
71+
user: "123",
72+
},
7373
});
7474
```
7575

@@ -78,7 +78,7 @@ gateway.patchLog('my-log-id', {
7878

7979
### 3.2. `getLog`: Read Log Details
8080

81-
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.
81+
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)
8282

8383
```typescript
8484
const log = await gateway.getLog("my-log-id");
@@ -97,7 +97,7 @@ const baseUrl = await gateway.getUrl();
9797
// Output: https://gateway.ai.cloudflare.com/v1/my-account-id/my-gateway/
9898

9999
// Get a provider-specific URL
100-
const openaiUrl = await gateway.getUrl('openai');
100+
const openaiUrl = await gateway.getUrl("openai");
101101
// Output: https://gateway.ai.cloudflare.com/v1/my-account-id/my-gateway/openai
102102
```
103103

@@ -110,30 +110,33 @@ const openaiUrl = await gateway.getUrl('openai');
110110
The `getUrl` method is particularly useful for integrating with popular AI SDKs:
111111

112112
**OpenAI SDK:**
113+
113114
```typescript
114115
import OpenAI from "openai";
115116

116117
const openai = new OpenAI({
117-
apiKey: "my api key", // defaults to process.env["OPENAI_API_KEY"]
118-
baseURL: await env.AI.gateway('my-gateway').getUrl('openai'),
118+
apiKey: "my api key", // defaults to process.env["OPENAI_API_KEY"]
119+
baseURL: await env.AI.gateway("my-gateway").getUrl("openai"),
119120
});
120121
```
121122

122123
**Vercel AI SDK with OpenAI:**
124+
123125
```typescript
124126
import { createOpenAI } from "@ai-sdk/openai";
125127

126128
const openai = createOpenAI({
127-
baseURL: await env.AI.gateway('my-gateway').getUrl('openai'),
129+
baseURL: await env.AI.gateway("my-gateway").getUrl("openai"),
128130
});
129131
```
130132

131133
**Vercel AI SDK with Anthropic:**
134+
132135
```typescript
133136
import { createAnthropic } from "@ai-sdk/anthropic";
134137

135138
const anthropic = createAnthropic({
136-
baseURL: await env.AI.gateway('my-gateway').getUrl('anthropic'),
139+
baseURL: await env.AI.gateway("my-gateway").getUrl("anthropic"),
137140
});
138141
```
139142

@@ -145,14 +148,14 @@ Refer to the [Universal endpoint documentation](/ai-gateway/providers/universal/
145148

146149
```typescript
147150
const resp = await gateway.run({
148-
provider: "workers-ai",
149-
endpoint: "@cf/meta/llama-3.1-8b-instruct",
150-
headers: {
151-
authorization: "Bearer my-api-token"
152-
},
153-
query: {
154-
prompt: "tell me a joke"
155-
}
151+
provider: "workers-ai",
152+
endpoint: "@cf/meta/llama-3.1-8b-instruct",
153+
headers: {
154+
authorization: "Bearer my-api-token",
155+
},
156+
query: {
157+
prompt: "tell me a joke",
158+
},
156159
});
157160
```
158161

@@ -168,4 +171,4 @@ With these AI Gateway binding methods, you can now:
168171
- Get gateway URLs for direct API access with `getUrl`, making it easy to integrate with popular AI SDKs.
169172
- Execute universal requests to any AI Gateway provider with `run`.
170173

171-
These methods offer greater flexibility and control over your AI integrations, empowering you to build more sophisticated applications on the Cloudflare Workers platform.
174+
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/d1/worker-api/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Refer to the relevant sections for the API documentation.
1818

1919
## TypeScript support
2020

21-
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.
21+
D1 Worker Bindings API is fully-typed via the 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.
2222

2323
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.
2424

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -120,17 +120,11 @@ In order to access bindings in a deployed application, you will need to [configu
120120

121121
### Add bindings to TypeScript projects
122122

123-
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/).
123+
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/).
124124

125125
The following is an example of adding a `KVNamespace` binding:
126126

127127
```ts null {9}
128-
import {
129-
CfProperties,
130-
Request,
131-
ExecutionContext,
132-
KVNamespace,
133-
} from "@cloudflare/workers-types";
134128

135129
declare module "h3" {
136130
interface H3EventContext {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ The following code block shows an example of accessing a KV namespace in QwikCit
6868
// ...
6969

7070
export const useGetServerTime = routeLoader$(({ platform }) => {
71-
// the type `KVNamespace` comes from the @cloudflare/workers-types package
71+
// the type `KVNamespace` comes from types generated by running `wrangler types`
7272
const { MY_KV } = (platform.env as { MY_KV: KVNamespace }));
7373

7474
return {

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,11 @@ Use bindings in Astro components and API routes by using `context.locals` from [
113113

114114
Refer to the following example of how to access a KV namespace with TypeScript.
115115

116-
First, you need to define Cloudflare runtime and KV type by updating the `env.d.ts`:
116+
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/).
117117

118118
```typescript
119119
/// <reference types="astro/client" />
120120

121-
type KVNamespace = import("@cloudflare/workers-types").KVNamespace;
122121
type ENV = {
123122
// replace `MY_KV` with your KV namespace
124123
MY_KV: KVNamespace;
@@ -137,7 +136,6 @@ You can then access your KV from an API endpoint in the following way:
137136
import type { APIContext } from "astro";
138137

139138
export async function get({ locals }: APIContext) {
140-
// the type KVNamespace comes from the @cloudflare/workers-types package
141139
const { MY_KV } = locals.runtime.env;
142140

143141
return {

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

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -30,32 +30,7 @@ Add bindings to your Pages project by adding them to your [Wrangler configuratio
3030

3131
## TypeScript type declarations for bindings
3232

33-
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).
34-
35-
Install Workers Types:
36-
37-
```sh
38-
npm install --save-dev @cloudflare/workers-types
39-
```
40-
41-
Add Workers Types to your `tsconfig.json` file, replacing the date below with your project's [compatibility date](/workers/configuration/compatibility-dates/):
42-
43-
```diff title="tsconfig.json"
44-
"types": [
45-
+ "@cloudflare/workers-types/2024-07-29"
46-
]
47-
```
48-
49-
Create an `env.d.ts` file in the root directory of your Next.js app, and explicitly declare the type of each binding:
50-
51-
```ts title="env.d.ts"
52-
interface CloudflareEnv {
53-
MY_KV_1: KVNamespace;
54-
MY_KV_2: KVNamespace;
55-
MY_R2: R2Bucket;
56-
MY_DO: DurableObjectNamespace;
57-
}
58-
```
33+
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.
5934

6035
## Other Cloudflare APIs (`cf`, `ctx`)
6136

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,4 +220,4 @@ Refer to the [bindings documentation](/workers/wrangler/configuration/#vectorize
220220

221221
New Workers projects created via `npm create cloudflare@latest` automatically include the relevant TypeScript types for Vectorize.
222222

223-
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.
223+
If you have an older project, or a 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, you should ensure you have a compatibility date later than `2023-09-22` and that you have generated types by running [`wrangler types`](/workers/languages/typescript/#generate-types).

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ An object containing Cloudflare-specific properties that can be set on the `Requ
9999
fetch(event.request, { cf: { scrapeShield: false } })
100100
```
101101

102-
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.
102+
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.
103103

104104

105105

src/content/docs/workers/runtime-apis/rpc/typescript.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ description: How TypeScript types for your Worker or Durable Object's RPC
1111

1212
---
1313

14-
The [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) package provides the `Service` and `DurableObjectNamespace` types, each of which accepts a single type parameter for the server-side [`WorkerEntrypoint`](/workers/runtime-apis/bindings/service-bindings/rpc) or [`DurableObject`](/durable-objects/best-practices/create-durable-object-stubs-and-send-requests/#call-rpc-methods) types.
14+
The types generated by running [`wrangler types`](/workers/languages/typescript/#generate-types) provide the `Service` and `DurableObjectNamespace` types, each of which accepts a single type parameter for the server-side [`WorkerEntrypoint`](/workers/runtime-apis/bindings/service-bindings/rpc) or [`DurableObject`](/durable-objects/best-practices/create-durable-object-stubs-and-send-requests/#call-rpc-methods) types.
1515

1616
Using higher-order types, we automatically generate client-side stub types (e.g., forcing all methods to be async).
1717

0 commit comments

Comments
 (0)