fix build

Author: whoiskatrin

src/content/docs/agents/concepts/agent-class.mdx

@@ -5,7 +5,7 @@ sidebar:
   order: 10
 ---
 
-import { Render, TypeScriptExample } from "~/components";
+import { Render } from "~/components";
 
 The core of the `agents` library is the exported `Agent` class. Following the pattern from [Durable Objects](/durable-objects/api/), the main API for developers is to extend the `Agent` class so those classes inherit all the built-in features. While this effectively is a supercharged primitive that allows developers to only write the logic they need in their agents, it obscures the inner workings.
 
@@ -25,14 +25,10 @@ This won't cover Durable Objects in detail, but it's good to know what primitive
 
 ### constructor
 
-<TypeScriptExample>
-
 ```ts
 constructor(ctx: DurableObjectState, env: Env) {}
 ```
 
-</TypeScriptExample>
-
 The Workers runtime always calls the constructor to handle things internally. This means 2 things:
 
 1. While the constructor is called every time the DO is initialized, the signature is fixed. Developers **can't add or update parameters from the constructor**.
@@ -42,8 +38,6 @@ The Workers runtime always calls the constructor to handle things internally. Th
 
 By writing a Durable Object class which inherits from the built-in type `DurableObject`, public methods are exposed as RPC methods, which developers can call using a [DurableObjectStub from a Worker](/durable-objects/best-practices/create-durable-object-stubs-and-send-requests/#invoking-methods-on-a-durable-object).
 
-<TypeScriptExample>
-
 ```ts
 // This instance could've been active, hibernated,
 // not initialized or maybe had never even been created!
@@ -54,8 +48,6 @@ const stub = env.MY_DO.getByName("foo");
 await stub.bar();
 ```
 
-</TypeScriptExample>
-
 ### fetch()
 
 Durable Objects can take a `Request` from a Worker and send a `Response` back. This can **only** be done through the [`fetch`](/durable-objects/best-practices/create-durable-object-stubs-and-send-requests/#invoking-the-fetch-handler) method (which the developer must implement).
@@ -66,8 +58,6 @@ Durable Objects include first-class support for [WebSockets](/durable-objects/be
 
 The base class provides `webSocketMessage(ws, message)`, `webSocketClose(ws, code, reason, wasClean)` and `webSocketError(ws , error)` ([API](/workers/runtime-apis/websockets)).
 
-<TypeScriptExample>
-
 ```ts
 export class MyDurableObject extends DurableObject {
   async fetch(request) {
@@ -91,8 +81,6 @@ export class MyDurableObject extends DurableObject {
 }
 ```
 
-</TypeScriptExample>
-
 ### alarm()
 
 HTTP and RPC requests are not the only entrypoints for a DO. Alarms allow developers to schedule tasks to run at a later time. Whenever the runtime knows an alarm is due, it will call the `alarm()` method, which is left to the developer to implement.
@@ -107,8 +95,6 @@ The base `DurableObject` class sets the [DurableObjectState](/durable-objects/ap
 
 [DurableObjectStorage](/durable-objects/api/sqlite-storage-api/) is the main interface with the DO's persistence mechanisms, which include both a KV and SQLITE **synchronous** APIs.
 
-<TypeScriptExample>
-
 ```ts
 const sql = this.ctx.storage.sql;
 const kv = this.ctx.storage.kv;
@@ -120,8 +106,6 @@ const rows = sql.exec("SELECT * FROM contacts WHERE country = ?", "US");
 const token = kv.get("someToken");
 ```
 
-</TypeScriptExample>
-
 ### this.ctx.env
 
 Lastly, it's worth mentioning that the DO also has the Worker `Env` in `this.env`. Read more about [bindings](/workers/runtime-apis/bindings).
@@ -138,8 +122,6 @@ An important note is that `Server` **does NOT make use any of the DO storage** s
 
 Compare this to the DO addressing [example above](#rpc).
 
-<TypeScriptExample>
-
 ```ts
 // Note the await here!
 const stub = await getServerByName(env.MY_DO, "foo");
@@ -148,12 +130,8 @@ const stub = await getServerByName(env.MY_DO, "foo");
 await stub.bar();
 ```
 
-</TypeScriptExample>
-
 Since we have a URL addressing scheme, we also get access to `routePartykitRequest()`.
 
-<TypeScriptExample>
-
 ```ts
 async fetch(request: Request, env: Env, ctx: ExecutionContext) {
   // Behind the scenes, PartyKit normalizes your DO binding names
@@ -166,16 +144,12 @@ async fetch(request: Request, env: Env, ctx: ExecutionContext) {
 }
 ```
 
-</TypeScriptExample>
-
 You can have a look at [the implementation](https://github.com/cloudflare/partykit/blob/main/packages/partyserver/src/index.ts#L122) if you're interested.
 
 ### onStart
 
 The extra plumbing that `Server` includes on addressing allows it to expose an `onStart` callback that is **executed every time the DO starts up** (the DO was evicted, hibernated or never created at all) and **before any `fetch` or RPC**.
 
-<TypeScriptExample>
-
 ```ts
 class MyServer extends Server {
   onStart() {
@@ -187,14 +161,10 @@ class MyServer extends Server {
 }
 ```
 
-</TypeScriptExample>
-
 ### onRequest and onConnect
 
 `Server` already implements `fetch` for the underlying Durable Object and exposes 2 different callbacks that developers can make use of, `onRequest` and `onConnect` for HTTP requests and incoming WS connections, respectively (**WebSocket connections are accepted by default**).
 
-<TypeScriptExample>
-
 ```ts
 class MyServer extends Server {
   async onRequest(request: Request) {
@@ -213,8 +183,6 @@ class MyServer extends Server {
 }
 ```
 
-</TypeScriptExample>
-
 ### WebSockets
 
 Just as `onConnect` is the callback for every new connection, `Server` also provides wrappers on top of the default callbacks from the `DurableObject` class: `onMessage`, `onClose` and `onError`.
@@ -237,8 +205,6 @@ One of the core features of `Agent` is **automatic state persistence**. Develope
 
 There's also `this.onStateUpdate` that you can override to react to state changes.
 
-<TypeScriptExample>
-
 ```ts
 class MyAgent extends Agent<Env, { count: number }> {
   initialState = { count: 0 };
@@ -253,16 +219,12 @@ class MyAgent extends Agent<Env, { count: number }> {
 }
 ```
 
-</TypeScriptExample>
-
 State is stored in the `cf_agents_state` SQL table. State messages are sent with `type: "cf_agent_state"` (both from the client and the server). Since the `agents` provides [JS and React clients](/agents/api-reference/store-and-sync-state/#synchronizing-state), real-time state updates are available out of the box.
 
 ### this.sql
 
 The Agent provides a convenient `sql` template tag for executing queries against the Durable Object's SQL storage. It constructs parameterized queries and executes them. This uses the **synchronous** SQL API from `this.ctx.storage.sql`.
 
-<TypeScriptExample>
-
 ```ts
 class MyAgent extends Agent {
   onStart() {
@@ -285,14 +247,10 @@ class MyAgent extends Agent {
 }
 ```
 
-</TypeScriptExample>
-
 ### RPC and Callable Methods
 
 `agents` take Durable Objects RPC one step forward by implementing RPC through WebSockets, so clients can also call methods on the Agent directly. To make a method callable, developers can use the `@callable` decorator. Methods can return a serializable value or a stream (when using `@callable({ stream: true })`).
 
-<TypeScriptExample>
-
 ```ts
 class MyAgent extends Agent {
   @callable({ description: "Add two numbers" })
@@ -302,8 +260,6 @@ class MyAgent extends Agent {
 }
 ```
 
-</TypeScriptExample>
-
 Clients can invoke this method by sending a WebSocket message:
 
 ```json
@@ -317,22 +273,16 @@ Clients can invoke this method by sending a WebSocket message:
 
 For example, with the provided `React` client it's as easy as:
 
-<TypeScriptExample>
-
 ```ts
 const { stub } = useAgent({ name: "my-agent" });
 const result = await stub.add(2, 3);
 console.log(result); // 5
 ```
 
-</TypeScriptExample>
-
 ### this.queue and friends
 
 Agents include a built-in task queue for deferred execution. This is useful for offloading work or retrying operations. The available methods are `this.queue`, `this.dequeue`, `this.dequeueAll`, `this.dequeueAllByCallback`, `this.getQueue`, and `this.getQueues`.
 
-<TypeScriptExample>
-
 ```ts
 class MyAgent extends Agent {
   async onConnect() {
@@ -346,16 +296,12 @@ class MyAgent extends Agent {
 }
 ```
 
-</TypeScriptExample>
-
 Tasks are stored in the `cf_agents_queues` SQL table and are automatically flushed in sequence. If a task succeeds, it's automatically dequeued.
 
 ### this.schedule and friends
 
 Agents support scheduled execution of methods by wrapping the Durable Object's `alarm()`. The available methods are `this.schedule`, `this.getSchedule`, `this.getSchedules`, `this.cancelSchedule`. Schedules can be one-time, delayed, or recurring (using cron expressions).
 
-<TypeScriptExample>
-
 ```ts
 class MyAgent extends Agent {
   async onStart() {
@@ -385,16 +331,12 @@ class MyAgent extends Agent {
 }
 ```
 
-</TypeScriptExample>
-
 Schedules are stored in the `cf_agents_schedules` SQL table. Cron schedules automatically reschedule themselves after execution, while one-time schedules are deleted.
 
 ### this.mcp and friends
 
 `Agent` includes a multi-server MCP client. This enables your Agent to interact with external services that expose MCP interfaces. The MCP client is documented in detail at [MCP Client API](/agents/model-context-protocol/mcp-client-api/).
 
-<TypeScriptExample>
-
 ```ts
 class MyAgent extends Agent {
   async onConnect() {
@@ -409,14 +351,10 @@ class MyAgent extends Agent {
 }
 ```
 
-</TypeScriptExample>
-
 ### Email Handling
 
 Agents can receive and reply to emails using Cloudflare's [Email Routing](/email-routing/email-workers/).
 
-<TypeScriptExample>
-
 ```ts
 class MyAgent extends Agent {
   async onEmail(email: AgentEmail) {
@@ -437,12 +375,8 @@ class MyAgent extends Agent {
 }
 ```
 
-</TypeScriptExample>
-
 To route emails to your Agent, use `routeAgentEmail` in your Worker's email handler:
 
-<TypeScriptExample>
-
 ```ts
 export default {
   async email(message, env, ctx) {
@@ -453,14 +387,10 @@ export default {
 };
 ```
 
-</TypeScriptExample>
-
 ### Context Management
 
 `agents` wraps all your methods with an `AsyncLocalStorage` to maintain context throughout the request lifecycle. This allows you to access the current agent, connection, request, or email (depending of what event is being handled) from anywhere in your code:
 
-<TypeScriptExample>
-
 ```ts
 import { getCurrentAgent } from "agents";
 
@@ -477,14 +407,10 @@ function someUtilityFunction() {
 }
 ```
 
-</TypeScriptExample>
-
 ### this.onError
 
 `Agent` extends `Server`'s `onError` so it can be used to handle errors that are not necessarily WebSocket errors. It is called with a `Connection` or `unknown` error.
 
-<TypeScriptExample>
-
 ```ts
 class MyAgent extends Agent {
   onError(connectionOrError: Connection | unknown, error?: unknown) {
@@ -502,14 +428,10 @@ class MyAgent extends Agent {
 }
 ```
 
-</TypeScriptExample>
-
 ### this.destroy
 
 `destroy()` drops all tables, deletes alarms, clears storage, and aborts the context. The `this.abort` method that is called by `this.destroy` comes from `DurableObject` and ensures that the Agent is fully evicted. In order to do so, it throws an uncatchable error that will show up in your logs (read more at [abort()](/durable-objects/api/state/#abort)).
 
-<TypeScriptExample>
-
 ```ts
 class MyAgent extends Agent {
   async onStart() {
@@ -524,14 +446,10 @@ class MyAgent extends Agent {
 }
 ```
 
-</TypeScriptExample>
-
 ### Routing
 
 The `Agent` class re-exports PartyKit's [addressing helpers](#addressing) as `getAgentByName` and `routeAgentRequest`.
 
-<TypeScriptExample>
-
 ```ts
 // Same API as getServerByName
 const stub = await getAgentByName(env.MY_DO, "foo");
@@ -544,5 +462,3 @@ if (res) return res;
 
 return Response("Not found", { status: 404 });
 ```
-
-</TypeScriptExample>