@ai-sdk/devtools 1.0.0-canary.28 → 1.0.0-canary.30

package/README.md

@@ -14,20 +14,46 @@ pnpm add @ai-sdk/devtools
 
 ## Requirements
 
-- AI SDK v6 beta (`ai@^6.0.0-beta.0`)
+- AI SDK v7 canary (`ai@canary`)
 - Node.js compatible runtime
 
 ## Usage
 
-### 1. Add the middleware to your model
+### 1. Register the telemetry integration
+
+Register `DevToolsTelemetry` globally so it captures all AI SDK calls:
+
+```typescript
+import { registerTelemetry } from 'ai';
+import { DevToolsTelemetry } from '@ai-sdk/devtools';
+
+registerTelemetry(DevToolsTelemetry());
+```
+
+Telemetry is enabled automatically once an integration is registered:
+
+```typescript
+import { generateText } from 'ai';
+
+const result = await generateText({
+  model: yourModel,
+  prompt: 'What cities are in the United States?',
+});
+```
+
+You can also pass the integration to individual calls instead of registering it
+globally:
 
 ```typescript
-import { wrapLanguageModel } from 'ai';
-import { devToolsMiddleware } from '@ai-sdk/devtools';
+import { streamText } from 'ai';
+import { DevToolsTelemetry } from '@ai-sdk/devtools';
 
-const model = wrapLanguageModel({
-  middleware: devToolsMiddleware(),
+const result = streamText({
   model: yourModel,
+  prompt: 'Hello!',
+  telemetry: {
+    integrations: [DevToolsTelemetry()],
+  },
 });
 ```
 
@@ -39,21 +65,26 @@ npx @ai-sdk/devtools
 
 Open http://localhost:4983 to view your AI SDK interactions.
 
+If you are using a monorepo, start DevTools from the same workspace where your
+AI SDK code runs.
+
 ## How it works
 
-The middleware intercepts all `generateText` and `streamText` calls, capturing:
+The `DevToolsTelemetry` integration hooks into the AI SDK telemetry lifecycle to
+capture `generateText`, `streamText`, `generateObject`, and `streamObject` calls.
+It captures:
 
 - Input parameters and prompts
 - Output content and tool calls
 - Token usage and timing
-- Raw provider request/response data
+- Raw provider data
 
 Data is stored locally in a JSON file (`.devtools/generations.json`) and served through a web UI.
 
 ### Data flow
 
 ```
-AI SDK call → devToolsMiddleware → JSON file → Hono API → React UI
+AI SDK call -> DevToolsTelemetry -> JSON file -> Hono API -> React UI
 ```
 
 ### Key concepts

package/dist/index.js

@@ -1,8 +1,11 @@
 // src/db.ts
 import path from "path";
 import fs from "fs";
-var DB_DIR = path.join(process.cwd(), ".devtools");
-var DB_PATH = path.join(DB_DIR, "generations.json");
+var DEVTOOLS_DB_DIR = ".devtools";
+var DEVTOOLS_DB_FILE = "generations.json";
+var MAX_DB_BYTES = 100 * 1024 * 1024;
+var DB_DIR = path.join(process.cwd(), DEVTOOLS_DB_DIR);
+var DB_PATH = path.join(DB_DIR, DEVTOOLS_DB_FILE);
 var DEVTOOLS_PORT = process.env.AI_SDK_DEVTOOLS_PORT ? parseInt(process.env.AI_SDK_DEVTOOLS_PORT) : 4983;
 var notifyServer = (event) => {
   notifyServerAsync(event);
@@ -596,7 +599,7 @@ function DevToolsTelemetry() {
       });
       state.stepStates.delete(stepResult.stepNumber);
     },
-    onObjectStepFinish: async (event) => {
+    onObjectStepEnd: async (event) => {
       const stepResult = event;
       const state = callStates.get(stepResult.callId);
       if (!state) return;

package/dist/viewer/server.js

@@ -2,7 +2,6 @@
 import { serve } from "@hono/node-server";
 import { serveStatic } from "@hono/node-server/serve-static";
 import { Hono } from "hono";
-import { cors } from "hono/cors";
 import { streamSSE } from "hono/streaming";
 import path2 from "path";
 import fs2 from "fs";
@@ -11,8 +10,11 @@ import { fileURLToPath } from "url";
 // src/db.ts
 import path from "path";
 import fs from "fs";
-var DB_DIR = path.join(process.cwd(), ".devtools");
-var DB_PATH = path.join(DB_DIR, "generations.json");
+var DEVTOOLS_DB_DIR = ".devtools";
+var DEVTOOLS_DB_FILE = "generations.json";
+var MAX_DB_BYTES = 100 * 1024 * 1024;
+var DB_DIR = path.join(process.cwd(), DEVTOOLS_DB_DIR);
+var DB_PATH = path.join(DB_DIR, DEVTOOLS_DB_FILE);
 var DEVTOOLS_PORT = process.env.AI_SDK_DEVTOOLS_PORT ? parseInt(process.env.AI_SDK_DEVTOOLS_PORT) : 4983;
 var notifyServer = (event) => {
   notifyServerAsync(event);
@@ -74,14 +76,40 @@ var saveDb = (db) => {
   dbCache = db;
   writeDb(db);
 };
+var normalizeDevtoolsDbPath = (dbPath) => {
+  const resolvedPath = path.resolve(dbPath);
+  const dbDir = path.dirname(resolvedPath);
+  if (path.basename(resolvedPath) !== DEVTOOLS_DB_FILE || path.basename(dbDir) !== DEVTOOLS_DB_DIR) {
+    return void 0;
+  }
+  return resolvedPath;
+};
+var validateRemoteDbPath = (dbPath) => {
+  if (typeof dbPath !== "string") {
+    return void 0;
+  }
+  const normalizedPath = normalizeDevtoolsDbPath(dbPath);
+  if (!normalizedPath) {
+    return void 0;
+  }
+  try {
+    const stats = fs.statSync(normalizedPath);
+    if (!stats.isFile() || stats.size > MAX_DB_BYTES) {
+      return void 0;
+    }
+    const realPath = fs.realpathSync(normalizedPath);
+    return normalizeDevtoolsDbPath(realPath);
+  } catch {
+    return void 0;
+  }
+};
 var reloadDb = async (remoteDbPath2) => {
-  if (remoteDbPath2) {
+  const validatedRemoteDbPath = validateRemoteDbPath(remoteDbPath2);
+  if (validatedRemoteDbPath) {
     try {
-      if (fs.existsSync(remoteDbPath2)) {
-        const content = fs.readFileSync(remoteDbPath2, "utf-8");
-        dbCache = JSON.parse(content);
-        return;
-      }
+      const content = fs.readFileSync(validatedRemoteDbPath, "utf-8");
+      dbCache = JSON.parse(content);
+      return;
     } catch {
     }
   }
@@ -131,8 +159,32 @@ var isDevMode = devEnv !== void 0 && devEnv !== "false" && devEnv !== "0";
 var projectRoot = path2.resolve(__dirname, "../..");
 var clientDir = path2.join(projectRoot, "dist/client");
 var remoteDbPath;
+var viewerPort = 4983;
 var app = new Hono();
-app.use("/*", cors());
+var getAllowedHosts = () => /* @__PURE__ */ new Set([
+  `localhost:${viewerPort}`,
+  `127.0.0.1:${viewerPort}`,
+  `[::1]:${viewerPort}`
+]);
+var getAllowedOrigins = () => /* @__PURE__ */ new Set([
+  `http://localhost:${viewerPort}`,
+  `http://127.0.0.1:${viewerPort}`,
+  `http://[::1]:${viewerPort}`,
+  "http://localhost:5173",
+  "http://127.0.0.1:5173",
+  "http://[::1]:5173"
+]);
+app.use("/api/*", async (c, next) => {
+  const host = c.req.header("host");
+  if (!host || !getAllowedHosts().has(host)) {
+    return c.text("Forbidden", 403);
+  }
+  const origin = c.req.header("origin");
+  if (origin && !getAllowedOrigins().has(origin)) {
+    return c.text("Forbidden", 403);
+  }
+  await next();
+});
 app.get("/api/runs", async (c) => {
   await reloadDb(remoteDbPath);
   const runs = await getRuns();
@@ -258,8 +310,12 @@ app.get("/api/events", (c) => {
 });
 app.post("/api/notify", async (c) => {
   const body = await c.req.json();
-  if (body.dbPath) {
-    remoteDbPath = body.dbPath;
+  if (body.dbPath !== void 0) {
+    const validatedDbPath = validateRemoteDbPath(body.dbPath);
+    if (!validatedDbPath) {
+      return c.text("Invalid dbPath", 400);
+    }
+    remoteDbPath = validatedDbPath;
   }
   await reloadDb(remoteDbPath);
   broadcastToClients("update", body);
@@ -306,10 +362,12 @@ app.get("*", async (c) => {
   }
 });
 var startViewer = (port = 4983) => {
+  viewerPort = port;
   const server = serve(
     {
       fetch: app.fetch,
-      port
+      port,
+      hostname: "localhost"
     },
     () => {
       if (isDevMode) {
@@ -346,5 +404,6 @@ if (isDirectRun) {
   startViewer(port);
 }
 export {
+  app,
   startViewer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-sdk/devtools",
-  "version": "1.0.0-canary.28",
+  "version": "1.0.0-canary.30",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -56,7 +56,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.6",
     "zod": "3.25.76",
-    "ai": "7.0.0-canary.166"
+    "ai": "7.0.0-canary.172"
   },
   "publishConfig": {
     "access": "public",

package/src/db.ts

@@ -1,8 +1,13 @@
 import path from 'node:path';
 import fs from 'node:fs';
 
-const DB_DIR = path.join(process.cwd(), '.devtools');
-const DB_PATH = path.join(DB_DIR, 'generations.json');
+const DEVTOOLS_DB_DIR = '.devtools';
+const DEVTOOLS_DB_FILE = 'generations.json';
+// Cap how many bytes we read from a remote database file. Guards against a
+// synchronous hang / OOM if the file is enormous.
+const MAX_DB_BYTES = 100 * 1024 * 1024; // 100 MB
+const DB_DIR = path.join(process.cwd(), DEVTOOLS_DB_DIR);
+const DB_PATH = path.join(DB_DIR, DEVTOOLS_DB_FILE);
 const DEVTOOLS_PORT = process.env.AI_SDK_DEVTOOLS_PORT
   ? parseInt(process.env.AI_SDK_DEVTOOLS_PORT)
   : 4983;
@@ -140,21 +145,57 @@ const saveDb = (db: Database): void => {
   writeDb(db);
 };
 
+const normalizeDevtoolsDbPath = (dbPath: string): string | undefined => {
+  const resolvedPath = path.resolve(dbPath);
+  const dbDir = path.dirname(resolvedPath);
+
+  if (
+    path.basename(resolvedPath) !== DEVTOOLS_DB_FILE ||
+    path.basename(dbDir) !== DEVTOOLS_DB_DIR
+  ) {
+    return undefined;
+  }
+
+  return resolvedPath;
+};
+
+export const validateRemoteDbPath = (dbPath: unknown): string | undefined => {
+  if (typeof dbPath !== 'string') {
+    return undefined;
+  }
+
+  const normalizedPath = normalizeDevtoolsDbPath(dbPath);
+  if (!normalizedPath) {
+    return undefined;
+  }
+
+  try {
+    const stats = fs.statSync(normalizedPath);
+    if (!stats.isFile() || stats.size > MAX_DB_BYTES) {
+      return undefined;
+    }
+
+    const realPath = fs.realpathSync(normalizedPath);
+    return normalizeDevtoolsDbPath(realPath);
+  } catch {
+    return undefined;
+  }
+};
+
 /**
  * Reload the database from disk.
  * Used by the viewer server to pick up changes made by the middleware/integration.
- * When a remote dbPath is provided (from a notify POST), reads from that path
- * instead of the local CWD-based path, so the viewer works regardless of where
- * it was started.
+ * When a valid remote dbPath is provided (from a notify POST), reads from that
+ * path instead of the local CWD-based path, so the viewer works regardless of
+ * where it was started.
  */
 export const reloadDb = async (remoteDbPath?: string): Promise<void> => {
-  if (remoteDbPath) {
+  const validatedRemoteDbPath = validateRemoteDbPath(remoteDbPath);
+  if (validatedRemoteDbPath) {
     try {
-      if (fs.existsSync(remoteDbPath)) {
-        const content = fs.readFileSync(remoteDbPath, 'utf-8');
-        dbCache = JSON.parse(content);
-        return;
-      }
+      const content = fs.readFileSync(validatedRemoteDbPath, 'utf-8');
+      dbCache = JSON.parse(content);
+      return;
     } catch {
       // Fall through to default
     }

package/src/integration.ts

@@ -350,7 +350,7 @@ export function DevToolsTelemetry(): Telemetry {
       state.stepStates.delete(stepResult.stepNumber);
     },
 
-    onObjectStepFinish: async event => {
+    onObjectStepEnd: async event => {
       const stepResult = event as GenerateObjectStepEndEvent;
 
       const state = callStates.get(stepResult.callId);

package/src/viewer/server.ts

@@ -1,7 +1,6 @@
 import { serve } from '@hono/node-server';
 import { serveStatic } from '@hono/node-server/serve-static';
 import { Hono } from 'hono';
-import { cors } from 'hono/cors';
 import { streamSSE } from 'hono/streaming';
 import path from 'path';
 import fs from 'fs';
@@ -12,6 +11,7 @@ import {
   getStepsForRun,
   clearDatabase,
   reloadDb,
+  validateRemoteDbPath,
 } from '../db.js';
 
 // SSE client management
@@ -56,11 +56,40 @@ const clientDir = path.join(projectRoot, 'dist/client');
 // Track the DB path from the most recent notify call so all reads
 // use the correct file, even when the viewer runs in a different CWD.
 let remoteDbPath: string | undefined;
+let viewerPort = 4983;
+
+export const app = new Hono();
+
+const getAllowedHosts = () =>
+  new Set([
+    `localhost:${viewerPort}`,
+    `127.0.0.1:${viewerPort}`,
+    `[::1]:${viewerPort}`,
+  ]);
+
+const getAllowedOrigins = () =>
+  new Set([
+    `http://localhost:${viewerPort}`,
+    `http://127.0.0.1:${viewerPort}`,
+    `http://[::1]:${viewerPort}`,
+    'http://localhost:5173',
+    'http://127.0.0.1:5173',
+    'http://[::1]:5173',
+  ]);
+
+app.use('/api/*', async (c, next) => {
+  const host = c.req.header('host');
+  if (!host || !getAllowedHosts().has(host)) {
+    return c.text('Forbidden', 403);
+  }
 
-const app = new Hono();
+  const origin = c.req.header('origin');
+  if (origin && !getAllowedOrigins().has(origin)) {
+    return c.text('Forbidden', 403);
+  }
 
-// Enable CORS for development
-app.use('/*', cors());
+  await next();
+});
 
 // API Routes
 app.get('/api/runs', async c => {
@@ -230,9 +259,13 @@ app.get('/api/events', c => {
 
 // Notification endpoint (called by middleware/integration)
 app.post('/api/notify', async c => {
-  const body = await c.req.json();
-  if (body.dbPath) {
-    remoteDbPath = body.dbPath;
+  const body = (await c.req.json()) as Record<string, unknown>;
+  if (body.dbPath !== undefined) {
+    const validatedDbPath = validateRemoteDbPath(body.dbPath);
+    if (!validatedDbPath) {
+      return c.text('Invalid dbPath', 400);
+    }
+    remoteDbPath = validatedDbPath;
   }
   // Reload database from disk, using the remote dbPath if provided so the
   // viewer works even when started from a different directory than the app.
@@ -288,10 +321,13 @@ app.get('*', async c => {
 });
 
 export const startViewer = (port = 4983) => {
+  viewerPort = port;
+
   const server = serve(
     {
       fetch: app.fetch,
       port,
+      hostname: 'localhost',
     },
     () => {
       if (isDevMode) {