Skip to content

Commit 638970c

Browse files
committed
fix
1 parent 3b9a3cc commit 638970c

File tree

4 files changed

+126
-22
lines changed

4 files changed

+126
-22
lines changed
Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
title: HTTP and Server-Sent Events
3+
pcx_content_type: concept
4+
sidebar:
5+
order: 8
6+
7+
---
8+
9+
import { MetaInfo, Render, Type, TypeScriptExample, WranglerConfig } from "~/components";
10+
11+
The Agents SDK allows you to handle HTTP requests and has native support for [Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) (SSE). This allows you build applications that can push data to clients, avoid buffering
12+
13+
## Handling HTTP requests
14+
15+
Agents can handle HTTP requests using the `onRequest` method, which is called whenever an HTTP request is received by the Agent instance. The method takes a `Request` object as a parameter and returns a `Response` object.
16+
17+
18+
19+
<TypeScriptExample>
20+
21+
```ts
22+
class MyAgent extends Agent<Env, State> {
23+
// Handle HTTP requests coming to this Agent instance
24+
// Returns a Response object
25+
async onRequest(request: Request) {
26+
return new Response("Hello from Agent!");
27+
}
28+
29+
async callAIModel(prompt: string) {
30+
// Implement AI model call here
31+
}
32+
}
33+
```
34+
35+
</TypeScriptExample>
36+
37+
Review the [Agents API reference](/agents/api-reference/agents-api/) to learn more about the `Agent` class and its methods.
38+
39+
### Implementing Server-Sent Events
40+
41+
TODO
42+
<TypeScriptExample>
43+
44+
```ts
45+
import { Agent } from "agents-sdk";
46+
import { streamText } from 'ai';
47+
import { createOpenAI, openai } from '@ai-sdk/openai';
48+
49+
interface Env {
50+
OPENAI_API_KEY: string;
51+
}
52+
53+
class MyAgent extends Agent<Env> {
54+
// Handle HTTP requests coming to this Agent instance
55+
// Returns a Response object
56+
async onRequest(request: Request) {
57+
return new Response("Hello from Agent!");
58+
}
59+
60+
async callAIModel(prompt: string) {
61+
const openai = createOpenAI({
62+
// custom settings, e.g.
63+
compatibility: 'strict', // strict mode, enable when using the OpenAI API
64+
});
65+
}
66+
}
67+
```
68+
69+
</TypeScriptExample>
70+
71+
## WebSockets vs. Server-Sent Events
72+
73+
TODO

src/content/docs/agents/api-reference/using-ai-models.mdx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,17 @@ sidebar:
88

99
import { AnchorHeading, MetaInfo, Render, Type, TypeScriptExample, WranglerConfig } from "~/components";
1010

11-
Agents can communicate with AI models hosted on any provider, including [Workers AI](/workers-ai/), OpenAI, Anthropic, and Google's Gemini, and use the model routing features in [AI Gateway](/ai-gateway/) to route across providers, eval responses, and manage AI provider rate limits.
11+
Agents can communicate with AI models hosted on any provider, including:
1212

13-
Because Agents are built on top of [Durable Objects](/durable-objects/), each Agent or chat session is associated with a stateful compute instance. Tradtional serverless architectures often present challenges for persistent connections needed in real-time applications like chat.
13+
* [Workers AI](/workers-ai/)
14+
* The [AI SDK](https://sdk.vercel.ai/docs/ai-sdk-core/overview)
15+
* [OpenAI](https://platform.openai.com/docs/quickstart?language=javascript)
16+
* [Anthropic](https://docs.anthropic.com/en/api/client-sdks#typescript
17+
* [Google's Gemini](https://ai.google.dev/gemini-api/docs/openai)
18+
19+
You can also use the model routing features in [AI Gateway](/ai-gateway/) to route across providers, eval responses, and manage AI provider rate limits.
20+
21+
Because Agents are built on top of [Durable Objects](/durable-objects/), each Agent or chat session is associated with a stateful compute instance. Traditional serverless architectures often present challenges for persistent connections needed in real-time applications like chat.
1422

1523
A user can disconnect during a long-running response from a modern reasoning model (such as `o3-mini` or DeepSeek R1), or lose conversational context when refreshing the browser. Instead of relying on request-response patterns and managing an external database to track & store conversation state, state can be stored directly within the Agent. If a client disconnects, the Agent can write to its own distributed storage, and catch the client up as soon as it reconnects: even if it's hours or days later.
1624

@@ -34,7 +42,7 @@ import { OpenAI } from "openai"
3442

3543
export class MyAgent extends Agent<Env> {
3644
async onConnect(connection: Connection, ctx: ConnectionContext) {
37-
//
45+
//
3846
}
3947

4048
async onMessage(connection: Connection, message: WSMessage) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Using WebSockets
33
pcx_content_type: concept
44
sidebar:
5-
order: 8
5+
order: 10
66

77
---
88

src/content/docs/agents/getting-started/quickstart.mdx

Lines changed: 41 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,43 @@ sidebar:
66

77
---
88

9-
import { Render, GitHubCode, PackageManagers, TypeScriptExample, WranglerConfig } from "~/components"
9+
import { Render, FileTree, GitHubCode, PackageManagers, TypeScriptExample, WranglerConfig } from "~/components"
1010

11-
This quick start tutorial will have you build a basic Agent that can generate code based on user questions. It will show you how the Agent SDK works, how to handle requests, store and sync state from within the Agent itself, and how to route to and call Agents from your Workers code.
11+
This quick start tutorial will have you build a basic Agent that can generate code based on user prompts.
12+
13+
It will show you how the Agent SDK works, how to handle requests, call AI models, store and sync state from within the Agent itself, and how to route to and call Agents from your Workers code.
1214

1315
### Prerequisites
1416

1517
<Render file="prereqs" product="workers" />
1618

1719
### Setup the Agent
1820

19-
You can fetch the quick start project using the following command:
21+
You can fetch the quick start code using the following command:
2022

2123
```sh
2224
npm create cloudflare@latest agents-quick-start -- --template="cloudflare/agents-quick-start"
2325
```
2426

25-
This will create a new directory called `agents-quick-start`, ask you a few basic questions, and install the necessary dependencies.
27+
This will create a new directory called `agents-quick-start`, ask you a few basic questions (select yes), and install the necessary dependencies.
2628

2729
Once complete, change into the Agent's directory:
2830

2931
```sh
3032
cd agents-quick-start
3133
```
3234

35+
Inside this directory, there are a number of files, but we only need to worry about two for now:
36+
37+
* `src/index.ts` - contains your Agent's code
38+
* `wrangler.jsonc` - defines the configuration for your Worker & Agent
39+
40+
Let's take a look at how the Agent in the quick start is defined.
3341

3442
### Understand the Agent class
3543

44+
Open the `src/index.ts` file in your editor:
45+
3646
TODO
3747

3848
### Run your Agent
@@ -57,7 +67,7 @@ Starting local server...
5767
[wrangler:inf] Ready on http://localhost:8787
5868
```
5969

60-
Your Agent is now running locally on your machine, and ready to communicate with the outside world. Leave this server running so we can talk to your Agent in the next step.
70+
Your Agent is now running locally on your machine, and ready to communicate with the outside world. Make sure to leave this server running so we can talk to your Agent in the next step.
6171

6272
### Communicate with your Agent
6373

@@ -82,6 +92,7 @@ wscat --connect "ws://localhost:8787/agents/my-agent/abc123def"
8292
```
8393

8494

95+
8596
#### Agent routing
8697

8798
In the `agents-quick-start` we use the `routeAgentRequest` helper to automatically handle routing to existing and creating new Agent instances on-the-fly.
@@ -108,31 +119,41 @@ export default {
108119

109120
You can learn about more ways to call into your Agents, as well as how to add authentication in front of your Agents, by reviewing [documentation on Calling Agents](/agents/api-reference/calling-agents/).
110121

111-
### Deploy your Agent
122+
### Ship to production
112123

113124
OK, we've:
114125

115126
1. Learned how the `Agent` class works and how to define our own Agents using the Agents SDK.
116127
2. Run our Agent locally and communicated with it.
117128
3. Reviewed how routing to an Agent works, including how Agents are created and retrieved.
118129

119-
Let's deploy our Agent
130+
Let's deploy our Agent using `wrangler`, which was installed when we originally used `npm create cloudflare`:
120131

121-
### Extend the Agent
132+
```sh
133+
npx wrangler@latest deploy
134+
```
122135

123-
TODO;
136+
If this is your first time deploying to Cloudflare Workers, you'll be asked to login. Otherwise, you'll see output similar to the following, including a `workers.dev` URL that allows you access any public endpoints your Agent exposes:
124137

125-
- AI SDK
138+
```sh output
126139

140+
```
127141

128-
<TypeScriptExample>
142+
You can then use `wscat` to talk to your Agent running in production on Cloudflare's global network:
129143

130-
```ts
131-
async aiSDKChat() {
144+
```sh
145+
wscat --connect="wss://agents-quick-start.YOUR_SUBDOMAIN.workers.dev/agents/my-agent/user-id-12345
146+
```
132147
148+
TODO - debug / logs / errors / tail
149+
150+
### Extend the Agent
151+
152+
TODO;
153+
154+
- AI SDK
155+
- Adding a new tool
133156
134-
}
135-
```
136157
137158
</TypeScriptExample>
138159
@@ -142,9 +163,11 @@ TODO: delete
142163
143164
### Next steps
144165
145-
What's next?
166+
If you're looking to build a more complex Agent, you can use the Agents SDK to build a fully-functioning AI Agent with a React front-end, tool calling, and state sync that is built on the Agents SDK with the [Agents SDK starter app](/agents/getting-started/build-a-chat-agent/).
167+
168+
Otherwise, you can:
146169
147-
* Deploy the [Agents SDK starter app](/agents/getting-started/build-a-chat-agent/): a fully-functioning AI Agent with a React front-end, tool calling, and state sync that is built on the Agents SDK.
148170
* Review the [Agents API reference](/agents/api-reference/creating-agents/) and the APIs exposed by the Agents SDK.
149171
* Learn more [using WebSockets](/agents/api-reference/websockets/) to build interactive Agents and stream data back from your Agent.
150-
* [Orchestrate asynchronous workflows](/agents/api-reference/run-workflows) from your Agent by combining the `agents-sdk` and [Workflows](/workflows).
172+
* [Orchestrate asynchronous workflows](/agents/api-reference/run-workflows) from your Agent by combining the Agents SDK and [Workflows](/workflows).
173+
* How to [schedule tasks](/agents/api-reference/schedule-tasks) from within your Agent using the `this.schedule` API.

0 commit comments

Comments
 (0)