fixed image

Author: elithrar

src/content/changelog/agents/2025-03-17-npm-i-agents.mdx

@@ -9,8 +9,31 @@ date: 2025-03-17T14:00:00Z
 
 import { Badge, MetaInfo, Render, TypeScriptExample } from "~/components"
 import { Image } from 'astro:assets';
+import npmAgentsAnimated from "~/assets/images/agents/npm-i-agents.apng"
 
-<Image src="~/assets/images/agents/npm-i-agents.apng" alt="npm i agents" width="1000" height="541" />
+<Image src={npmAgentsAnimated} alt="npm i agents" width="1000" height="541" />
+
+#### `agents-sdk` -> `agents` <Badge text="Updated" variant="tip" size="small" />
+
+**We've renamed the Agents package to `agents`**!
+
+If you've already been building with the Agents SDK, you can update your dependencies to use the new package name, and replace references to `agents-sdk` with `agents`:
+
+```sh
+# Remove the old (deprecated) package
+npm uninstall agents-sdk
+
+# Install the new package
+npm i agents
+
+# Find instances of the old package name in your codebase
+grep -r 'agents-sdk' .
+# Replace instances of the old package name with the new one
+# (or use find-replace in your editor)
+sed -i 's/agents-sdk/agents/g' $(grep -rl 'agents-sdk' .)
+```
+
+Future updates will be pushed to the new `agents` package, and the older package will be marked as deprecated.
 
 #### Multi-Agent applications and RPC <Badge text="New" variant="tip" size="small" />
 
@@ -22,44 +45,79 @@ We've added a number of big new features to the Agents SDK over the past few wee
 - TODO: useAgentChat bug fixes for passing headers/credentials, properly clearing cache on unmount, etc
 - TODO: experiemental /schedule module with a prompt/schema for adding scheduling to your app (with evals!)
 
-We've also fixed a nubmer of bugs with state synchronization and the React hooks.
+We've also fixed a number of bugs with state synchronization and the React hooks.
 
-#### Call Agent methods from your client code <Badge text="New" variant="tip" size="small" />
+<TypeScriptExample>
 
-We've added a new [`@callable` decorator](/agents/api-reference/client-api/) for defining methods that can be called directly from clients. This allows you call methods from within your client code: you can call methods (with arguments) and get native JavaScript objects back.
+```ts
+import { Agent } from 'agents';
 
-#### `agents-sdk` -> `agents` <Badge text="Updated" variant="tip" size="small" />
+// TODO:  example of Multi-Agent or similar here
+class MyAgent extends Agent {}
 
-We've also renamed the Agents package to just `agents` (it's cleaner). If you've already been building with the Agents SDK, you can update your dependencies to use the new package name:
+```
+</TypeScriptExample>
 
-```sh
-# Remove the old (deprecated) package
-npm uninstall agents-sdk
+#### Call Agent methods from your client code <Badge text="New" variant="tip" size="small" />
 
-# Install the new package
-npm i agents
+We've added a new [`@callable()`](/agents/api-reference/client-api/) decorator for defining methods that can be called directly from clients. This allows you call methods from within your client code: you can call methods (with arguments) and get native JavaScript objects back.
+
+<TypeScriptExample>
+
+```ts
+// index.ts
+import { Agent, callable } from 'agents';
+
+// TODO: replace this with a real example
+class MyAgent extends Agent {
+	@callable()
+  async getHistory(limit: number): Promise<string[]> {
+  	// Allow a client to directly fetch chat history
+   	return this.state.chatHistory.slice(-limit)
+  }
+}
+
+// client.tsx
+const { call } = useAgent({ agent: "rpc" });
+
+const fetchUserHistory = async () => {
+    try {
+        setLoading(true);
+        const result = await call("getHistory(5)");
+        addToast(`Regular RPC result: ${result}`, "success");
+    } catch (error) {
+        addToast(`Error: ${error}`, "error");
+    } finally {
+        setLoading(false);
+    }
+};
 
-# Find instances of the old package name in your codebase
-grep -r 'agents-sdk' .
-# Replace instances of the old package name with the new one
-# (or use find-replace in your editor)
-sed -i 's/agents-sdk/agents/g' $(grep -rl 'agents-sdk' .)
 ```
+</TypeScriptExample>
 
-#### agents-starter
+#### agents-starter <Badge text="Updated" variant="tip" size="small" />
 
-TODO
+The [`agents-starter`](https://github.com/cloudflare/agents-starter) project — a real-time, chat-based example application with tool-calling & human-in-the-loop built using the Agents SDK — has seen the following updates:
 
 - TODO
 - Upgraded to use the latest [wrangler v4](/changelog/2025-03-13-wrangler-v4/) release.
 - [Workers AI](/workers-ai/) is now the default AI provider in the [`agents-starter`](https://github.com/cloudflare/agents-starter) project: this uses the new [structured outputs](/changelog/2025-02-25-json-mode/) (or "JSON mode") support now in Workers AI and the [`workers-ai-provider`](https://sdk.vercel.ai/providers/community-providers/cloudflare-workers-ai#generateobject).
 
-#### More documentation
+If you're new to Agents, you can install and run the `agents-starter` project in two commands:
+
+```sh
+# Install it
+$ npm create cloudflare@latest agents-starter -- --template="cloudflare/agents-starter"
+# Run it
+$ npm run start
+```
+
+#### More documentation <Badge text="Updated" variant="tip" size="small" />
 
 We've contined to build out the Agents SDK documentation, including:
 
 - Expanded [API reference documentation](/agents/api-reference/), covering the methods and properties exposed by the Agents SDK, as well as more usage examples.
-- A new [Client API](/agents/api-reference/client-api/) reference that documents `useAgent`, `useAgentChat` and the new `@callable` decorator exposed by the SDK.
-- New documentation on how to [call agents](/agents/api-refererence/calling-agents/) and authenticate clients, using [Server-Sent Events (SSE)](/agents/api-refererence/http-sse/).
+- A new [Client API](/agents/api-reference/client-api/) reference that documents `useAgent`, `useAgentChat` and the new `@callable` RPC decorator exposed by the SDK.
+- New documentation on how to [call agents](/agents/api-refererence/calling-agents/) and (optionally) authenticate clients before they connect to your Agents.
 
 If you're still wondering what Agents are, [read our blog on building AI Agents on Cloudflare](https://blog.cloudflare.com/build-ai-agents-on-cloudflare/) and/or visit the [Agents documentation](/agents/) to learn more.