Dynamic Tools Example

import { createWorkersAI } from "workers-ai-provider";
import { routeAgentRequest } from "agents";
import { AIChatAgent, createToolsFromClientSchemas } from "@cloudflare/ai-chat";
import {
  streamText,
  convertToModelMessages,
  pruneMessages,
  stepCountIs
} from "ai";

export class DynamicToolsAgent extends AIChatAgent {
  async onChatMessage(
    _onFinish: Parameters<AIChatAgent["onChatMessage"]>[0],
    options: Parameters<AIChatAgent["onChatMessage"]>[1]
  ) {
    const workersai = createWorkersAI({ binding: this.env.AI });

    const result = streamText({
      model: workersai("@cf/zai-org/glm-4.7-flash"),
      system:
        "You are a helpful assistant. You have access to tools provided by " +
        "the embedding application. Use them when asked. If no tools are " +
        "available, let the user know they can enable tools in the sidebar.",
      messages: pruneMessages({
        messages: await convertToModelMessages(this.messages),
        toolCalls: "before-last-2-messages",
        reasoning: "before-last-message"
      }),
      // Dynamic tools from client - server doesn't know these at deploy time
      tools: createToolsFromClientSchemas(options?.clientTools),
      stopWhen: stepCountIs(5)
    });

    return result.toUIMessageStreamResponse();
  }
}

export default {
  async fetch(request: Request, env: Env) {
    return (
      (await routeAgentRequest(request, env)) ||
      new Response("Not found", { status: 404 })
    );
  }
} satisfies ExportedHandler<Env>;

import { useAgentChat, type AITool } from "@cloudflare/ai-chat/react";
import { useAgent } from "agents/react";

function ChatApp() {
  const agent = useAgent({
    agent: "DynamicToolsAgent",
    name: sessionId
  });

  // Define tools dynamically - these are sent to the server
  const tools: Record<string, AITool> = {
    getPageTitle: {
      description: "Get the current page title",
      parameters: {
        type: "object",
        properties: {}
      },
      execute: async () => {
        return { title: document.title };
      }
    },
    getUserLocation: {
      description: "Get the user's approximate location from browser",
      parameters: {
        type: "object",
        properties: {}
      },
      execute: async () => {
        return new Promise((resolve) => {
          navigator.geolocation.getCurrentPosition(
            (pos) => resolve({
              latitude: pos.coords.latitude,
              longitude: pos.coords.longitude
            }),
            (err) => resolve({ error: err.message })
          );
        });
      }
    },
    getBrowserInfo: {
      description: "Get information about the user's browser",
      parameters: {
        type: "object",
        properties: {}
      },
      execute: async () => {
        return {
          userAgent: navigator.userAgent,
          language: navigator.language,
          platform: navigator.platform,
          cookiesEnabled: navigator.cookieEnabled
        };
      }
    }
  };

  const { messages, sendMessage } = useAgentChat({
    agent,
    tools  // Tools are automatically sent to the server
  });

  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id}>
          {msg.content}
        </div>
      ))}
      <input onSubmit={(e) => sendMessage(e.target.value)} />
    </div>
  );
}