langfuse · hassiebp · Jun 26, 2026 · Apr 22, 2026 · Apr 22, 2026 · Apr 24, 2026
diff --git a/README.md b/README.md
@@ -15,14 +15,15 @@ Modular mono repo for the Langfuse JS/TS client libraries.
 > [!IMPORTANT]
 > The SDK was rewritten in v5 and released in March 2026. Refer to the [v5 migration guide](https://langfuse.com/docs/observability/sdk/upgrade-path/js-v4-to-v5) for instructions on updating your code.
 
-| Package                                     | NPM                                                                                                               | Description                                               | Environments |
-| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------ |
-| [@langfuse/client](./packages/client)       | [![NPM](https://img.shields.io/npm/v/@langfuse/client.svg)](https://www.npmjs.com/package/@langfuse/client)       | Langfuse API client for universal JavaScript environments | Universal JS |
-| [@langfuse/browser](./packages/browser)     | [![NPM](https://img.shields.io/npm/v/@langfuse/browser.svg)](https://www.npmjs.com/package/@langfuse/browser)     | Langfuse browser SDK for public-key score ingestion       | Browser      |
-| [@langfuse/tracing](./packages/tracing)     | [![NPM](https://img.shields.io/npm/v/@langfuse/tracing.svg)](https://www.npmjs.com/package/@langfuse/tracing)     | Langfuse instrumentation methods based on OpenTelemetry   | Node.js 20+  |
-| [@langfuse/otel](./packages/otel)           | [![NPM](https://img.shields.io/npm/v/@langfuse/otel.svg)](https://www.npmjs.com/package/@langfuse/otel)           | Langfuse OpenTelemetry export helpers                     | Node.js 20+  |
-| [@langfuse/openai](./packages/openai)       | [![NPM](https://img.shields.io/npm/v/@langfuse/openai.svg)](https://www.npmjs.com/package/@langfuse/openai)       | Langfuse integration for OpenAI SDK                       | Universal JS |
-| [@langfuse/langchain](./packages/langchain) | [![NPM](https://img.shields.io/npm/v/@langfuse/langchain.svg)](https://www.npmjs.com/package/@langfuse/langchain) | Langfuse integration for LangChain                        | Universal JS |
+| Package                                             | NPM                                                                                                                       | Description                                               | Environments |
+| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------ |
+| [@langfuse/client](./packages/client)               | [![NPM](https://img.shields.io/npm/v/@langfuse/client.svg)](https://www.npmjs.com/package/@langfuse/client)               | Langfuse API client for universal JavaScript environments | Universal JS |
+| [@langfuse/browser](./packages/browser)             | [![NPM](https://img.shields.io/npm/v/@langfuse/browser.svg)](https://www.npmjs.com/package/@langfuse/browser)             | Langfuse browser SDK for public-key score ingestion       | Browser      |
+| [@langfuse/tracing](./packages/tracing)             | [![NPM](https://img.shields.io/npm/v/@langfuse/tracing.svg)](https://www.npmjs.com/package/@langfuse/tracing)             | Langfuse instrumentation methods based on OpenTelemetry   | Node.js 20+  |
+| [@langfuse/otel](./packages/otel)                   | [![NPM](https://img.shields.io/npm/v/@langfuse/otel.svg)](https://www.npmjs.com/package/@langfuse/otel)                   | Langfuse OpenTelemetry export helpers                     | Node.js 20+  |
+| [@langfuse/openai](./packages/openai)               | [![NPM](https://img.shields.io/npm/v/@langfuse/openai.svg)](https://www.npmjs.com/package/@langfuse/openai)               | Langfuse integration for OpenAI SDK                       | Universal JS |
+| [@langfuse/langchain](./packages/langchain)         | [![NPM](https://img.shields.io/npm/v/@langfuse/langchain.svg)](https://www.npmjs.com/package/@langfuse/langchain)         | Langfuse integration for LangChain                        | Universal JS |
+| [@langfuse/vercel-ai-sdk](./packages/vercel-ai-sdk) | [![NPM](https://img.shields.io/npm/v/@langfuse/vercel-ai-sdk.svg)](https://www.npmjs.com/package/@langfuse/vercel-ai-sdk) | Langfuse integration for AI SDK v7                        | Universal JS |
 
 ## Documentation
 

diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@ai-sdk/anthropic": "^2",
-    "@ai-sdk/openai": "^2",
+    "@ai-sdk/openai": "4.0.0",
     "@eslint/js": "^9.32.0",
     "@langchain/core": "^1.1.24",
     "@langchain/langgraph": "^1.1.4",
@@ -53,7 +53,7 @@
     "@types/mustache": "^4.2.6",
     "@typescript-eslint/eslint-plugin": "^8.36.0",
     "@typescript-eslint/parser": "^8.39.0",
-    "ai": "^5",
+    "ai": "7.0.2",
     "autoevals": "^0.0.131",
     "dotenv": "^17.2.0",
     "eslint": "^9.32.0",

diff --git a/packages/otel/src/MediaService.ts b/packages/otel/src/MediaService.ts
@@ -7,6 +7,7 @@ import {
   getGlobalLogger,
   uploadMedia,
 } from "@langfuse/core";
+import type { MediaContentType } from "@langfuse/core";
 import { ReadableSpan } from "@opentelemetry/sdk-trace-base";
 
 export class MediaService {
@@ -96,8 +97,8 @@ export class MediaService {
       }
     }
 
-    // Handle media from Vercel AI SDK
-    if (span.instrumentationScope.name === "ai") {
+    // Handle media from Vercel AI SDK v6 and AI SDK v7.
+    if (["ai", "gen_ai"].includes(span.instrumentationScope.name)) {
       const aiSDKMediaAttributes = ["ai.prompt.messages", "ai.prompt"];
 
       for (const mediaAttribute of aiSDKMediaAttributes) {
@@ -121,54 +122,34 @@ export class MediaService {
                 for (const part of contentParts) {
                   if (part["type"] === "file") {
                     let base64Content: string | null = null;
+                    const mediaType = part["mediaType"];
                     // FilePart
                     if (
-                      part["data"] != null &&
-                      part["mediaType"] != null &&
-                      typeof part["data"] !== "object" && // skip URL instances
-                      !String(part["data"]).startsWith("http") // skip URL strings
+                      typeof part["data"] === "string" &&
+                      !part["data"].startsWith("http") // skip URL strings
                     ) {
                       base64Content = part["data"];
                     }
 
                     //ImagePart
                     if (
-                      part["image"] != null &&
-                      part["mediaType"] != null &&
+                      typeof part["image"] === "string" &&
                       !part["image"].startsWith("http") // skip URLs
                     ) {
                       base64Content = part["image"];
                     }
 
-                    if (!base64Content) continue;
-
-                    const media = new LangfuseMedia({
-                      contentType: part["mediaType"],
-                      contentBytes: base64ToBytes(base64Content),
-                      source: "bytes",
-                    });
-
-                    const langfuseMediaTag = await media.getTag();
-
-                    if (!langfuseMediaTag) {
-                      this.logger.warn(
-                        "Failed to create Langfuse media tag. Skipping media item.",
-                      );
-
+                    if (!base64Content || typeof mediaType !== "string") {
                       continue;
                     }
 
-                    this.scheduleUpload({
+                    mediaReplacedValue = await this.replaceBytesMedia({
                       span,
-                      media,
+                      mediaReplacedValue,
+                      base64Content,
+                      contentType: mediaType,
                       field: "input",
                     });
-
-                    // Replace original attribute with media escaped attribute
-                    mediaReplacedValue = mediaReplacedValue.replaceAll(
-                      base64Content,
-                      langfuseMediaTag,
-                    );
                   }
                 }
               }
@@ -183,9 +164,111 @@ export class MediaService {
           );
         }
       }
+
+      // Handle media from AI SDK v7 OpenTelemetry semantic-convention
+      // attributes emitted by @ai-sdk/otel.
+      const aiSDKV7MediaAttributes = [
+        { attribute: "gen_ai.input.messages", field: "input" },
+        { attribute: "gen_ai.output.messages", field: "output" },
+      ] as const;
+
+      for (const { attribute, field } of aiSDKV7MediaAttributes) {
+        const value = span.attributes[attribute];
+
+        if (!value || typeof value !== "string") {
+          continue;
+        }
+
+        let mediaReplacedValue = value;
+
+        try {
+          const parsed = JSON.parse(value);
+
+          if (Array.isArray(parsed)) {
+            for (const message of parsed) {
+              if (!Array.isArray(message["parts"])) {
+                continue;
+              }
+
+              for (const part of message["parts"]) {
+                const content = part["content"];
+                const mediaType = part["mime_type"];
+
+                if (
+                  part["type"] !== "blob" ||
+                  typeof content !== "string" ||
+                  !content ||
+                  typeof mediaType !== "string" ||
+                  content.startsWith("http")
+                ) {
+                  continue;
+                }
+
+                const normalizedContent = normalizeBase64Content(content);
+
+                if (!normalizedContent) {
+                  continue;
+                }
+
+                mediaReplacedValue = await this.replaceBytesMedia({
+                  span,
+                  mediaReplacedValue,
+                  base64Content: normalizedContent.base64Content,
+                  contentToReplace: content,
+                  contentType: mediaType,
+                  field,
+                });
+              }
+            }
+          }
+
+          span.attributes[attribute] = mediaReplacedValue;
+        } catch (err) {
+          this.logger.warn(
+            `Failed to handle media for AI SDK v7 attribute ${attribute} for span ${span.spanContext().spanId}`,
+            err,
+          );
+        }
+      }
     }
   }
 
+  private async replaceBytesMedia(params: {
+    span: ReadableSpan;
+    mediaReplacedValue: string;
+    base64Content: string;
+    contentToReplace?: string;
+    contentType: string;
+    field: string;
+  }): Promise<string> {
+    const media = new LangfuseMedia({
+      contentType: params.contentType as MediaContentType,
+      contentBytes: base64ToBytes(params.base64Content),
+      source: "bytes",
+    });
+
+    const langfuseMediaTag = await media.getTag();
+
+    if (!langfuseMediaTag) {
+      this.logger.warn(
+        "Failed to create Langfuse media tag. Skipping media item.",
+      );
+
+      return params.mediaReplacedValue;
+    }
+
+    this.scheduleUpload({
+      span: params.span,
+      media,
+      field: params.field,
+    });
+
+    return params.mediaReplacedValue.replaceAll(
+      params.contentToReplace ?? params.base64Content,
+      langfuseMediaTag,
+    );
+  }
+
   private scheduleUpload(params: {
     span: ReadableSpan;
     field: string;
@@ -234,3 +317,25 @@ export class MediaService {
     }
   }
 }
+
+function normalizeBase64Content(
+  content: string,
+): { base64Content: string } | undefined {
+  if (!content.startsWith("data:")) {
+    return { base64Content: content };
+  }
+
+  const base64Start = content.indexOf(";base64,");
+
+  if (base64Start === -1) {
+    return;
+  }
+
+  const base64Content = content.slice(base64Start + ";base64,".length);
+
+  if (!base64Content) {
+    return;
+  }
+
+  return { base64Content };
+}
diff --git a/packages/vercel-ai-sdk/README.md b/packages/vercel-ai-sdk/README.md
@@ -0,0 +1,102 @@
+![GitHub Banner](https://github.com/langfuse/langfuse-js/assets/2834609/d1613347-445f-4e91-9e84-428fda9c3659)
+
+# @langfuse/vercel-ai-sdk
+
+This package provides a Langfuse-owned telemetry integration for AI SDK v7 (`ai@7`) using the new callback-based telemetry system.
+
+It delegates AI SDK-compatible OpenTelemetry span creation to Vercel's `@ai-sdk/otel` package so it works with the existing Langfuse OTEL ingestion pipeline. Runtime context keys included via AI SDK telemetry are attached as Langfuse observation metadata. The only special runtime context key is `langfusePrompt`, which links Langfuse prompt name and version to model-call observations.
+
+Trace-level attributes such as user ID, session ID, tags, trace name, and trace metadata should be set with `propagateAttributes` from `@langfuse/tracing`.
+
+## Compatibility
+
+This integration targets AI SDK v7 GA. Install it together with `ai@^7`; the package depends on the matching `@ai-sdk/otel` integration internally.
+
+```sh
+pnpm add @langfuse/vercel-ai-sdk ai
+```
+
+## Usage
+
+```ts
+import { generateText, registerTelemetry } from "ai";
+import { propagateAttributes } from "@langfuse/tracing";
+import { LangfuseVercelAiSdkIntegration } from "@langfuse/vercel-ai-sdk";
+
+registerTelemetry(new LangfuseVercelAiSdkIntegration());
+
+await propagateAttributes(
+  {
+    userId: "user-123",
+    sessionId: "session-456",
+    tags: ["production", "chat"],
+    metadata: {
+      feature: "assistant",
+    },
+  },
+  () =>
+    generateText({
+      model,
+      prompt: "Explain RAG in one paragraph",
+      runtimeContext: {
+        route: "support-chat",
+        langfusePrompt: {
+          name: "assistant/default",
+          version: 3,
+          isFallback: false,
+        },
+      },
+      telemetry: {
+        functionId: "chat-assistant",
+        includeRuntimeContext: {
+          route: true,
+          langfusePrompt: true,
+        },
+      },
+    }),
+);
+```
+
+AI SDK v7 excludes `runtimeContext` from telemetry events unless each top-level key is explicitly included. This integration maps every included runtime context key to Langfuse observation metadata, except `langfusePrompt`, which is used for prompt linking and is not added as metadata.
+
+You can also pass the integration on a single call:
+
+```ts
+import { generateText } from "ai";
+import { LangfuseVercelAiSdkIntegration } from "@langfuse/vercel-ai-sdk";
+
+await generateText({
+  model,
+  prompt: "Summarize this article",
+  runtimeContext: {
+    feature: "article-summary",
+  },
+  telemetry: {
+    functionId: "article-summary",
+    includeRuntimeContext: {
+      feature: true,
+    },
+    integrations: new LangfuseVercelAiSdkIntegration(),
+  },
+});
+```
+
+## Packages
+
+| Package                                                                                             | NPM                                                                                                                       | Description                                               | Environments |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------ |
+| [@langfuse/client](https://github.com/langfuse/langfuse-js/tree/main/packages/client)               | [![NPM](https://img.shields.io/npm/v/@langfuse/client.svg)](https://www.npmjs.com/package/@langfuse/client)               | Langfuse API client for universal JavaScript environments | Universal JS |
+| [@langfuse/tracing](https://github.com/langfuse/langfuse-js/tree/main/packages/tracing)             | [![NPM](https://img.shields.io/npm/v/@langfuse/tracing.svg)](https://www.npmjs.com/package/@langfuse/tracing)             | Langfuse instrumentation methods based on OpenTelemetry   | Node.js 20+  |
+| [@langfuse/otel](https://github.com/langfuse/langfuse-js/tree/main/packages/otel)                   | [![NPM](https://img.shields.io/npm/v/@langfuse/otel.svg)](https://www.npmjs.com/package/@langfuse/otel)                   | Langfuse OpenTelemetry export helpers                     | Node.js 20+  |
+| [@langfuse/openai](https://github.com/langfuse/langfuse-js/tree/main/packages/openai)               | [![NPM](https://img.shields.io/npm/v/@langfuse/openai.svg)](https://www.npmjs.com/package/@langfuse/openai)               | Langfuse integration for OpenAI SDK                       | Universal JS |
+| [@langfuse/langchain](https://github.com/langfuse/langfuse-js/tree/main/packages/langchain)         | [![NPM](https://img.shields.io/npm/v/@langfuse/langchain.svg)](https://www.npmjs.com/package/@langfuse/langchain)         | Langfuse integration for LangChain                        | Universal JS |
+| [@langfuse/vercel-ai-sdk](https://github.com/langfuse/langfuse-js/tree/main/packages/vercel-ai-sdk) | [![NPM](https://img.shields.io/npm/v/@langfuse/vercel-ai-sdk.svg)](https://www.npmjs.com/package/@langfuse/vercel-ai-sdk) | Langfuse integration for AI SDK v7                        | Universal JS |
+
+## Documentation
+
+- Docs: https://langfuse.com/docs/sdk/typescript
+- Reference: https://js.reference.langfuse.com
+
+## License
+
+[MIT](LICENSE)