Rename Counter class and update type references (#28179)

* Rename Counter class and update type references

Syncs changes from cloudflare/agents PR #867:
- Rename Counter class to CounterAgent
- Export CounterState type for reuse in client code
- Update useAgent type parameters to include both agent and state
- Update all code examples and configuration to use new names

This improves type safety and consistency in the agents SDK examples.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* Clean rename, one stale ref fixed.

Co-authored-by: elithrar <elithrar@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>
Co-authored-by: elithrar <elithrar@users.noreply.github.com>

Author: 5 people

src/content/docs/agents/api-reference/callable-methods.mdx

@@ -69,13 +69,13 @@ Add the `@callable()` decorator to any method you want to expose:
 ```ts
 import { Agent, callable } from "agents";
 
-type State = {
+export type CounterState = {
 	count: number;
 	items: string[];
 };
 
-export class CounterAgent extends Agent<Env, State> {
-	initialState: State = { count: 0, items: [] };
+export class CounterAgent extends Agent<Env, CounterState> {
+	initialState: CounterState = { count: 0, items: [] };
 
 	@callable()
 	increment(): number {

src/content/docs/agents/getting-started/add-to-existing-project.mdx

@@ -38,11 +38,11 @@ Create a new file for your agent (for example, `src/agents/counter.ts`):
 ```ts
 import { Agent } from "agents";
 
-type CounterState = {
+export type CounterState = {
 	count: number;
 };
 
-export class Counter extends Agent<Env, CounterState> {
+export class CounterAgent extends Agent<Env, CounterState> {
 	initialState: CounterState = { count: 0 };
 
 	increment() {
@@ -75,16 +75,16 @@ Add the Durable Object binding and migration:
 	"durable_objects": {
 		"bindings": [
 			{
-				"name": "Counter",
-				"class_name": "Counter",
+				"name": "CounterAgent",
+				"class_name": "CounterAgent",
 			},
 		],
 	},
 
 	"migrations": [
 		{
 			"tag": "v1",
-			"new_sqlite_classes": ["Counter"],
+			"new_sqlite_classes": ["CounterAgent"],
 		},
 	],
 }
@@ -94,7 +94,7 @@ Add the Durable Object binding and migration:
 
 **Key points:**
 
-- `name` in bindings becomes the property on `env` (for example, `env.Counter`)
+- `name` in bindings becomes the property on `env` (for example, `env.CounterAgent`)
 - `class_name` must exactly match your exported class name
 - `new_sqlite_classes` enables SQLite storage for state persistence
 - `nodejs_compat` flag is required for the agents package
@@ -107,7 +107,7 @@ Your agent class must be exported from your main entry point. Update your `src/i
 
 ```ts
 // Export the agent class (required for Durable Objects)
-export { Counter } from "./agents/counter";
+export { CounterAgent } from "./agents/counter";
 
 // Your existing exports...
 export default {
@@ -127,7 +127,7 @@ Choose the approach that matches your project structure:
 
 ```ts
 import { routeAgentRequest } from "agents";
-export { Counter } from "./agents/counter";
+export { CounterAgent } from "./agents/counter";
 
 export default {
 	async fetch(request: Request, env: Env, ctx: ExecutionContext) {
@@ -155,7 +155,7 @@ export default {
 ```ts
 import { Hono } from "hono";
 import { agentsMiddleware } from "hono-agents";
-export { Counter } from "./agents/counter";
+export { CounterAgent } from "./agents/counter";
 
 const app = new Hono<{ Bindings: Env }>();
 
@@ -178,7 +178,7 @@ If you are serving static assets alongside agents, static assets are served firs
 
 ```ts
 import { routeAgentRequest } from "agents";
-export { Counter } from "./agents/counter";
+export { CounterAgent } from "./agents/counter";
 
 export default {
 	async fetch(request: Request, env: Env, ctx: ExecutionContext) {
@@ -221,15 +221,15 @@ npx wrangler types env.d.ts
 This creates an `env.d.ts` file with all your bindings typed. Alternatively, you can manually update your `Env` type to include the agent namespace:
 
 ```ts
-import type { Counter } from "./agents/counter";
+import type { CounterAgent } from "./agents/counter";
 
 interface Env {
 	// Your existing bindings
 	MY_KV: KVNamespace;
 	MY_DB: D1Database;
 
 	// Add agent bindings
-	Counter: DurableObjectNamespace<Counter>;
+	CounterAgent: DurableObjectNamespace<CounterAgent>;
 }
 ```
 
@@ -244,14 +244,13 @@ Refer to [Configuration](/agents/api-reference/configuration/#generating-types)
 ```tsx
 import { useState } from "react";
 import { useAgent } from "agents/react";
-
-type CounterState = { count: number };
+import type { CounterAgent, CounterState } from "./agents/counter";
 
 function CounterWidget() {
 	const [count, setCount] = useState(0);
 
-	const agent = useAgent({
-		agent: "Counter",
+	const agent = useAgent<CounterAgent, CounterState>({
+		agent: "CounterAgent",
 		onStateUpdate: (state) => setCount(state.count),
 	});
 
@@ -275,7 +274,7 @@ function CounterWidget() {
 import { AgentClient } from "agents/client";
 
 const agent = new AgentClient({
-	agent: "Counter",
+	agent: "CounterAgent",
 	name: "user-123", // Optional: unique instance name
 	onStateUpdate: (state) => {
 		document.getElementById("count").textContent = state.count;
@@ -316,15 +315,15 @@ Update the Wrangler configuration file:
 {
 	"durable_objects": {
 		"bindings": [
-			{ "name": "Counter", "class_name": "Counter" },
+			{ "name": "CounterAgent", "class_name": "CounterAgent" },
 			{ "name": "Chat", "class_name": "Chat" },
 			{ "name": "Scheduler", "class_name": "Scheduler" },
 		],
 	},
 	"migrations": [
 		{
 			"tag": "v1",
-			"new_sqlite_classes": ["Counter", "Chat", "Scheduler"],
+			"new_sqlite_classes": ["CounterAgent", "Chat", "Scheduler"],
 		},
 	],
 }
@@ -337,7 +336,7 @@ Export all agents from your entry point:
 <TypeScriptExample>
 
 ```ts
-export { Counter } from "./agents/counter";
+export { CounterAgent } from "./agents/counter";
 export { Chat } from "./agents/chat";
 export { Scheduler } from "./agents/scheduler";
 ```
@@ -404,7 +403,7 @@ export default {
 	async fetch(request: Request, env: Env) {
 		if (request.url.endsWith("/api/increment")) {
 			// Get a specific agent instance
-			const counter = await getAgentByName(env.Counter, "shared-counter");
+			const counter = await getAgentByName(env.CounterAgent, "shared-counter");
 			const newCount = await counter.increment();
 			return Response.json({ count: newCount });
 		}

src/content/docs/agents/getting-started/quick-start.mdx

@@ -53,12 +53,12 @@ Build a simple counter agent from scratch. Replace `src/server.ts`:
 import { Agent, routeAgentRequest, callable } from "agents";
 
 // Define the state shape
-type CounterState = {
+export type CounterState = {
 	count: number;
 };
 
 // Create the agent
-export class Counter extends Agent<Env, CounterState> {
+export class CounterAgent extends Agent<Env, CounterState> {
 	// Initial state for new instances
 	initialState: CounterState = { count: 0 };
 
@@ -107,15 +107,15 @@ Update `wrangler.jsonc` to register the agent:
 	"durable_objects": {
 		"bindings": [
 			{
-				"name": "Counter",
-				"class_name": "Counter",
+				"name": "CounterAgent",
+				"class_name": "CounterAgent",
 			},
 		],
 	},
 	"migrations": [
 		{
 			"tag": "v1",
-			"new_sqlite_classes": ["Counter"],
+			"new_sqlite_classes": ["CounterAgent"],
 		},
 	],
 }
@@ -130,19 +130,14 @@ Replace `src/client.tsx`:
 ```tsx title="src/client.tsx"
 import { useState } from "react";
 import { useAgent } from "agents/react";
-import type { Counter } from "./server";
-
-// Match your agent's state type
-type CounterState = {
-	count: number;
-};
+import type { CounterAgent, CounterState } from "./server";
 
 export default function App() {
 	const [count, setCount] = useState(0);
 
 	// Connect to the Counter agent
-	const agent = useAgent<Counter, CounterState>({
-		agent: "Counter",
+	const agent = useAgent<CounterAgent, CounterState>({
+		agent: "CounterAgent",
 		onStateUpdate: (state) => setCount(state.count),
 	});
 
@@ -186,7 +181,7 @@ flowchart LR
 
 | Concept              | What it means                                                                               |
 | -------------------- | ------------------------------------------------------------------------------------------- |
-| **Agent instance**   | Each unique name gets its own agent. `Counter:user-123` is separate from `Counter:user-456` |
+| **Agent instance**   | Each unique name gets its own agent. `CounterAgent:user-123` is separate from `CounterAgent:user-456` |
 | **Persistent state** | State survives restarts, deploys, and hibernation. It is stored in SQLite                   |
 | **Real-time sync**   | All clients connected to the same agent receive state updates instantly                     |
 | **Hibernation**      | When no clients are connected, the agent hibernates (no cost). It wakes on the next request |
@@ -201,7 +196,7 @@ If you are not using React:
 import { AgentClient } from "agents/client";
 
 const agent = new AgentClient({
-	agent: "Counter",
+	agent: "CounterAgent",
 	name: "my-counter", // optional, defaults to "default"
 	onStateUpdate: (state) => {
 		console.log("New count:", state.count);
@@ -268,13 +263,11 @@ Add the agent and state type parameters:
 
 ```ts
 import { useAgent } from "agents/react";
-import type { Counter } from "./server";
-
-type CounterState = { count: number };
+import type { CounterAgent, CounterState } from "./server";
 
 // Pass the agent and state types to useAgent
-const agent = useAgent<Counter, CounterState>({
-	agent: "Counter",
+const agent = useAgent<CounterAgent, CounterState>({
+	agent: "CounterAgent",
 	onStateUpdate: (state) => setCount(state.count),
 });