feat: update quickstart snippets for latest auth0-ai sdks (#158)

* feat: update quickstart snippets for latest auth0-ai sdks

* feat: update highlights

Author: priley86

auth4genai/snippets/get-started/langchain-fastapi-py/async-auth.mdx

@@ -94,6 +94,9 @@ with_async_authorization = auth0_ai.with_async_authorization(
     # could crash or timeout before the user approves the request.
     on_authorization_request="block",
 
+    # Note: Setting a requested expiry greater than 300 (seconds) will force email verification
+    # instead of using the push notification flow.
+    # requested_expiry=301,
 )
 ```
 

auth4genai/snippets/get-started/langchain-next-js/async-auth.mdx

@@ -23,7 +23,7 @@ In the root directory of your project, install the following dependencies:
 - `langgraph-nextjs-api-passthrough`: API passthrough for LangGraph.
 
 ```bash wrap lines
-npm install @auth0/ai-langchain@4 @langchain/[email protected] @langchain/[email protected].4 @langchain/[email protected] [email protected].12 [email protected]
+npm install @auth0/ai-langchain@4 @langchain/[email protected] @langchain/[email protected].9 @langchain/[email protected] [email protected].33 [email protected]
 ```
 ### Update the environment file
 
@@ -56,16 +56,34 @@ export const withAsyncAuthorization = auth0AI.withAsyncAuthorization({
   audience: process.env["SHOP_API_AUDIENCE"]!,
 
   /**
+   * Note: setting a requestedExpiry to >= 301 will currently ensure email is used. Otherwise,
+   * the default is to use push notification if available.
+   */
+  // requestedExpiry: 301,
+
+  /**
+   * The behavior when the authorization request is made.
+   *
+   * - `block`: The tool execution is blocked until the user completes the authorization.
+   * - `interrupt`: The tool execution is interrupted until the user completes the authorization.
+   * - a callback: Same as "block" but give access to the auth request and executing logic.
+   *
+   * Defaults to `interrupt`.
+   *
    * When this flag is set to `block`, the execution of the tool awaits
    * until the user approves or rejects the request.
-   *
    * Given the asynchronous nature of the CIBA flow, this mode
    * is only useful during development.
    *
    * In practice, the process that is awaiting the user confirmation
    * could crash or timeout before the user approves the request.
    */
-  onAuthorizationRequest: "block",
+  onAuthorizationRequest: async (authReq, creds) => {
+    console.log(`An authorization request was sent to your mobile device or your email.`);
+    await creds;
+    console.log(`Thanks for approving the order.`);
+  },
+
   onUnauthorized: async (e: Error) => {
     if (e instanceof AccessDeniedInterrupt) {
       return "The user has denied the request";

auth4genai/snippets/get-started/vercel-ai-next-js/async-auth.mdx

@@ -22,7 +22,7 @@ In the root directory of your project, install the following dependencies:
 - `zod`: TypeScript-first schema validation library.
 
 ```bash wrap lines
-npm install @auth0/ai-vercel@4 ai@4 @ai-sdk/openai@1 @ai-sdk/react@1 zod@3
+npm install @auth0/ai-vercel@4 ai@5.0.33 @ai-sdk/openai@2.0.24 @ai-sdk/react@2.0.33 zod@3.25.76
 ```
 
 ### Update the environment file
@@ -59,16 +59,34 @@ export const withAsyncAuthorization = auth0AI.withAsyncAuthorization({
   audience: process.env["SHOP_API_AUDIENCE"]!,
 
   /**
+   * Note: Setting a requested expiry greater than 300 (seconds) will force email verification
+   * instead of using the push notification flow.
+   */
+  // requestedExpiry: 301,
+
+  /**
+   * The behavior when the authorization request is made.
+   *
+   * - `block`: The tool execution is blocked until the user completes the authorization.
+   * - `interrupt`: The tool execution is interrupted until the user completes the authorization.
+   * - a callback: Same as "block" but give access to the auth request and executing logic.
+   *
+   * Defaults to `interrupt`.
+   *
    * When this flag is set to `block`, the execution of the tool awaits
    * until the user approves or rejects the request.
-   *
    * Given the asynchronous nature of the CIBA flow, this mode
    * is only useful during development.
    *
    * In practice, the process that is awaiting the user confirmation
    * could crash or timeout before the user approves the request.
    */
-  onAuthorizationRequest: "block",
+  onAuthorizationRequest: async (authReq, creds) => {
+    console.log(`An authorization request was sent to your mobile device or your email.`);
+    await creds;
+    console.log(`Thanks for approving the order.`);
+  },
+
   onUnauthorized: async (e: Error) => {
     if (e instanceof AccessDeniedInterrupt) {
       return "The user has denied the request";
@@ -185,42 +203,37 @@ SHOP_API_AUDIENCE=sample-shop-api
 
 Call the tool from your AI app to make purchases. Update the `src/app/api/chat/route.ts` file with the following code:
 
-```ts src/app/api/chat/route.ts wrap lines highlight={2,3,11,14}
+```ts src/app/api/chat/route.ts wrap lines highlight={2,3,11,13}
 //...
 import { setAIContext } from "@auth0/ai-vercel";
 import { shopOnlineTool } from "@/lib/tools/shop-online";
 
 //...
 export async function POST(req: NextRequest) {
-  const request = await req.json();
-
-  const messages = sanitizeMessages(request.messages);
+  const { id, messages }: { id: string; messages: Array<UIMessage> } = await req.json();
 
-  setAIContext({ threadID: request.id });
+  const tools = { shopOnlineTool };
 
-  const tools = {
-    shopOnlineTool,
-  };
+  setAIContext({ threadID: id });
 
-  return createDataStreamResponse({
-    execute: async (dataStream: DataStreamWriter) => {
+  const stream = createUIMessageStream({
+    async execute({ writer }) {
       const result = streamText({
-        model: openai("gpt-4o-mini"),
+        model: openai.chat('gpt-4o-mini'),
         system: AGENT_SYSTEM_TEMPLATE,
-        messages,
-        maxSteps: 5,
+        messages: convertToModelMessages(messages),
         tools,
       });
 
-      result.mergeIntoDataStream(dataStream, {
-        sendReasoning: true,
-      });
-    },
-    onError: (err: any) => {
-      console.log(err);
-      return `An error occurred! ${err.message}`;
+      writer.merge(
+        result.toUIMessageStream({
+          sendReasoning: true,
+        }),
+      );
     },
   });
+
+  return createUIMessageStreamResponse({ stream });
 }
 //...
 ```

auth4genai/snippets/get-started/vercel-ai-next-js/auth-for-rag.mdx

@@ -22,7 +22,7 @@ In the root directory of your project, install the following dependencies:
 - `zod`: TypeScript-first schema validation library.
 
 ```bash wrap lines
-npm install @auth0/ai-vercel@4 ai@4 @ai-sdk/openai@1 @ai-sdk/react@1 zod@3
+npm install @auth0/ai-vercel@4 ai@5.0.33 @ai-sdk/openai@2.0.24 @ai-sdk/react@2.0.33 zod@3.25.76
 ```
 
 ### Update the environment file

auth4genai/snippets/get-started/vercel-ai-next-js/call-others-api.mdx

@@ -81,7 +81,7 @@ In the root directory of your project, install the following packages:
 - `googleapis`: Node.js client for Google APIs that supports authentication and authorization with OAuth 2.0.
 
 ```bash wrap lines
-npm install @auth0/ai-vercel@4 ai@4 @ai-sdk/openai@1 @ai-sdk/react@1 zod@3 googleapis@148
+npm install @auth0/ai-vercel@4 ai@5.0.33 @ai-sdk/openai@2.0.24 @ai-sdk/react@2.0.33 zod@3.25.76 googleapis@161
 ```
 
 ### Update your environment file
@@ -177,7 +177,7 @@ import { getAccessToken, withGoogleConnection } from '../auth0-ai';
 export const getCalendarEventsTool = withGoogleConnection(
   tool({
     description: `Get calendar events for a given date from the user's Google Calendar`,
-    parameters: z.object({
+    inputSchema: z.object({
       date: z.coerce.date(),
     }),
     execute: async ({ date }) => {
@@ -342,7 +342,7 @@ Now when step-up authorization is required, the user will see a prompt in the ch
 
 Handle the interrupts from the AI agent and call the tool from your AI app to get calendar events. Update your chat route, typically at `/src/app/api/chat/route.ts`, as shown in the following example:
 
-```ts src/app/api/chat/route.ts wrap lines highlight={2-7,14,17,21,35-38,40-43}
+```ts src/app/api/chat/route.ts wrap lines
 //...
 import { setAIContext } from "@auth0/ai-vercel";
 import {
@@ -362,31 +362,53 @@ export async function POST(req: NextRequest) {
     getCalendarEventsTool,
   };
 
-  return createDataStreamResponse({
+   const modelMessages = convertToModelMessages(messages);
+
+  const stream = createUIMessageStream({
+    originalMessages: messages,
     execute: withInterruptions(
-      async (dataStream: DataStreamWriter) => {
+      async ({ writer }) => {
         const result = streamText({
-          model: openai("gpt-4o-mini"),
+          model: openai('gpt-4o-mini'),
           system: AGENT_SYSTEM_TEMPLATE,
-          messages,
-          maxSteps: 5,
+          messages: modelMessages,
           tools,
-        });
 
-        result.mergeIntoDataStream(dataStream, {
-          sendReasoning: true,
+          onFinish: (output) => {
+            if (output.finishReason === 'tool-calls') {
+              const lastMessage = output.content[output.content.length - 1];
+              if (lastMessage?.type === 'tool-error') {
+                const { toolName, toolCallId, error, input } = lastMessage;
+                const serializableError = {
+                  cause: error,
+                  toolCallId: toolCallId,
+                  toolName: toolName,
+                  toolArgs: input,
+                };
+
+                throw serializableError;
+              }
+            }
+          },
         });
+        writer.merge(
+          result.toUIMessageStream({
+            sendReasoning: true,
+          }),
+        );
       },
       {
-        messages,
+        messages: messages,
         tools,
-      }
+      },
     ),
-    onError: errorSerializer((err: any) => {
-      console.log(err);
-      return `An error occurred! ${err.message}`;
+    onError: errorSerializer((err) => {
+      console.error('ai-sdk route: stream error', err);
+      return 'Oops, an error occured!';
     }),
   });
+
+  return createUIMessageStreamResponse({ stream });
 }
 ```
 

auth4genai/snippets/get-started/vercel-ai-next-js/call-your-api.mdx

@@ -21,7 +21,7 @@ In the root directory of your project, install the following dependencies:
 - `zod`: TypeScript-first schema validation library.
 
 ```bash wrap lines
-npm install ai@4 @ai-sdk/openai@1 @ai-sdk/react@1 zod@3
+npm install ai@5.0.33 @ai-sdk/openai@2.0.24 @ai-sdk/react@2.0.33 zod@3.25.76
 ```
 
 ### Update the environment file
@@ -42,7 +42,7 @@ import { auth0 } from "../auth0";
 
 export const getUserInfoTool = tool({
   description: "Get information about the current logged in user.",
-  parameters: z.object({}),
+  inputSchema: z.object({}),
   execute: async () => {
     const session = await auth0.getSession();
     if (!session) {
@@ -71,39 +71,45 @@ export const getUserInfoTool = tool({
 
 The AI agent processes and runs the user's request through the AI pipeline, including the tool call. Vercel AI simplifies this task with the `streamText()` method. Update the `/src/app/api/chat/route.ts` file with the following code:
 
-```ts src/app/api/chat/route.ts wrap lines highlight={2,11}
+```ts src/app/api/chat/route.ts wrap lines highlight={2,11-13,23}
 //...
 import { getUserInfoTool } from "@/lib/tools/user-info";
 
 //... existing code
 
 export async function POST(req: NextRequest) {
-  const request = await req.json();
-  const messages = sanitizeMessages(request.messages);
+  const { id, messages }: { id: string; messages: Array<UIMessage> } = await req.json();
+
+  setAIContext({ threadID: id });
 
   const tools = {
     getUserInfoTool,
   };
 
-  return createDataStreamResponse({
-    execute: async (dataStream: DataStreamWriter) => {
+  const stream = createUIMessageStream({
+    originalMessages: messages,
+    execute: async ({ writer }) => {
       const result = streamText({
-        model: openai("gpt-4o-mini"),
+        model: openai('gpt-4o-mini'),
         system: AGENT_SYSTEM_TEMPLATE,
-        messages,
-        maxSteps: 5,
+        messages: convertToModelMessages(messages),
+        stopWhen: stepCountIs(5),
         tools,
       });
 
-      result.mergeIntoDataStream(dataStream, {
-        sendReasoning: true,
-      });
+      writer.merge(
+        result.toUIMessageStream({
+          sendReasoning: true,
+        })
+      );
     },
     onError: (err: any) => {
       console.log(err);
       return `An error occurred! ${err.message}`;
     },
   });
+
+  return createUIMessageStreamResponse({ stream });
 }
 //... existing code
 ```