have streaming example use tool

Author: ianmacartney

example/convex/agents/story.ts

@@ -1,11 +1,46 @@
 // See the docs at https://docs.convex.dev/agents/getting-started
-import { Agent } from "@convex-dev/agent";
+import { Agent, createTool, stepCountIs } from "@convex-dev/agent";
 import { components } from "../_generated/api";
 import { defaultConfig } from "./config";
+import { z } from "zod/v3";
 
 // Define an agent similarly to the AI SDK
 export const storyAgent = new Agent(components.agent, {
   name: "Story Agent",
   instructions: "You tell stories with twist endings. ~ 200 words.",
   ...defaultConfig,
+  stopWhen: stepCountIs(3),
+  tools: {
+    getCharacterNames: createTool({
+      description:
+        "Get the names of characters for the story. Only call this once.",
+      args: z.object({
+        count: z.number().describe("The number of character names to get"),
+      }),
+      handler: async (ctx, args) => {
+        return [
+          "Eleanor",
+          "Henry",
+          "Clara",
+          "Samuel",
+          "Margaret",
+          "Jordan",
+          "Maya",
+          "Lucas",
+          "Riley",
+          "Aiden",
+          "Elira",
+          "Kaelen",
+          "Seraphine",
+          "Thorne",
+          "Lyra",
+          "Dorian",
+          "Isolde",
+          "Malachai",
+          "Selene",
+          "Victor",
+        ].slice(0, args.count);
+      },
+    }),
+  },
 });

example/ui/chat/ChatStreaming.tsx

@@ -10,6 +10,7 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import { useDemoThread } from "@/hooks/use-demo-thread";
+import { ToolUIPart } from "ai";
 
 export default function ChatStreaming() {
   const { threadId, resetThread } = useDemoThread("Streaming Chat Example");
@@ -192,6 +193,9 @@ function Message({ message }: { message: UIMessage }) {
       startStreaming: message.status === "streaming",
     },
   );
+  const nameToolCalls = message.parts.filter(
+    (p): p is ToolUIPart => p.type === "tool-getCharacterNames",
+  );
   return (
     <div className={cn("flex", isUser ? "justify-end" : "justify-start")}>
       <div
@@ -207,6 +211,13 @@ function Message({ message }: { message: UIMessage }) {
         {reasoningText && (
           <div className="text-xs text-gray-500">💭{reasoningText}</div>
         )}
+        {nameToolCalls.map((p) => (
+          <div key={p.toolCallId} className="text-xs text-gray-500">
+            Names generated:{" "}
+            {p.output ? (p.output as string[]).join(", ") : p.state}
+            <br />
+          </div>
+        ))}
         {visibleText || "..."}
       </div>
     </div>