WebMCP (Browser Agents) integration guide

// In your page: offer TrendsAGI's tools to the visitor's browser agent.
// Calls go to your own server (see the Python tab), which holds the API key.
const modelContext = document.modelContext ?? navigator.modelContext;

if (modelContext) {
  const tools = await fetch("/trendsagi/tools").then((response) => response.json());
  const controller = new AbortController(); // controller.abort() removes them

  for (const tool of tools) {
    await modelContext.registerTool(
      {
        ...tool,
        async execute(args) {
          const response = await fetch(`/trendsagi/tools/${tool.name}`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(args ?? {}),
          });
          return JSON.stringify(await response.json());
        },
      },
      { signal: controller.signal },
    );
  }
}