latest cloudflare quickstart & how-to updates

auth4genai/how-tos/check-google-calendar-availability.mdx

@@ -12,72 +12,55 @@ import LlamaIndexJSSample from "/snippets/how-tos/google-calendar/llamaindex.mdx
 import LlamaIndexSample from "/snippets/how-tos/google-calendar/llamaindex-python.mdx";
 import NextJSAuth0Sample from "/snippets/how-tos/google-calendar/nextjs-auth0.mdx";
 import GenKitSample from "/snippets/how-tos/google-calendar/genkit.mdx";
-import CreateCustomApiClient from "/snippets/common/create-custom-api-client.mdx";
+
+import { GoogleCalendarPrereqs } from "/snippets/how-tos/google-calendar/prereqs.jsx";
+import { CustomApiClient } from "/snippets/common/custom-api-client.jsx";
 
 <Tabs>
   <Tab title="Javascript" icon="js">
-
-    <Card title="Prerequisites">
-      Before using this example, make sure you:
-
-      - Install Node.js 18+ and `npm`.
-      - [Set up an OpenAI API key](https://platform.openai.com/docs/quickstart?api-mode=chat).
-      - Complete the [User authentication quickstart](/get-started/user-authentication) to create a Next.js app integrated with Auth0.
-      - Set up and configure a Google Cloud project:
-        - Enable the [Google Calendar API](https://console.cloud.google.com/apis/library/calendar-json.googleapis.com).
-        - Create OAuth 2.0 credentials (Web Application) with proper redirect URIs.
-      - Configure a [Social Connection for Google in Auth0](https://marketplace.auth0.com/integrations/google-social-connection)
-        - Make sure to enable `Token Vault`
-        - Select `Offline Access` scope
-      <CreateCustomApiClient />
-    </Card>
-
     <Tabs>
       <Tab title="AI SDK" icon="https://mintlify-assets.b-cdn.net/auth0/vercel.svg">
+        <GoogleCalendarPrereqs lang="js" />
         <AISDKSample />
       </Tab>
 
       <Tab title="Cloudflare Agents" icon="https://mintlify-assets.b-cdn.net/auth0/cloudflare.svg">
+        <GoogleCalendarPrereqs lang="js" />
         <CloudflareAgents />
       </Tab>
 
       <Tab title="LangGraph" icon="https://mintlify-assets.b-cdn.net/auth0/langchain.svg">
+        <GoogleCalendarPrereqs lang="js" createCustomApiClientStep={true} />
         <LangGraphJSSample />
       </Tab>
 
       <Tab title="GenKit" icon="https://mintlify-assets.b-cdn.net/auth0/genkit.svg">
+        <GoogleCalendarPrereqs lang="js" />
         <GenKitSample />
       </Tab>
 
       <Tab title="LlamaIndex" icon="https://mintlify-assets.b-cdn.net/auth0/llamadex.svg">
+        <GoogleCalendarPrereqs lang="js" />
         <LlamaIndexJSSample />
       </Tab>
 
       <Tab title="NextJS-Auth0" icon="https://mintlify-assets.b-cdn.net/auth0/nextjs-svgrepo-com.svg">
+        <GoogleCalendarPrereqs lang="js" />
         <NextJSAuth0Sample />
       </Tab>
     </Tabs>
 
   </Tab>
 
   <Tab title="Python" icon="python">
-
-    <Card headerText="Prerequisites">
-      Before using this example, make sure you:
-
-      - Install Python 3.11+ and `pip`.
-      - [Set up an OpenAI API key](https://platform.openai.com/docs/quickstart?api-mode=chat).
-      - Configure a [Social Connection for Google in Auth0](https://marketplace.auth0.com/integrations/google-social-connection)
-        - Make sure to enable `Token Vault`
-        - Select `Offline Access` scope
-    </Card>
-
     <Tabs>
       <Tab title="LangGraph" icon="https://mintlify-assets.b-cdn.net/auth0/langchain.svg">
+        <GoogleCalendarPrereqs lang="python" />
         <LangGraphSample />
       </Tab>
 
       <Tab title="LlamaIndex" icon="https://mintlify-assets.b-cdn.net/auth0/llamadex.svg">
+        <GoogleCalendarPrereqs lang="python" />
         <LlamaIndexSample />
       </Tab>
 

auth4genai/how-tos/get-salesforce-opportunities.mdx

@@ -4,28 +4,13 @@ description: "Use OpenAI, NextJS, and the Auth0-AI SDKs to get Salesforce opport
 mode: "wide"
 ---
 
+import { SalesforcePrereqs } from "/snippets/how-tos/salesforce/prereqs.jsx";
+import { CustomApiClient } from "/snippets/common/custom-api-client.jsx";
+
 <Tabs>
   <Tab title="Next.js" icon="https://mintlify-assets.b-cdn.net/auth0/nextjs-svgrepo-com.svg">
 
-  <Card title="Prerequisites">
-
-Before using this example, make sure you:
-
-- [Set up an OpenAI API key](https://platform.openai.com/docs/quickstart?api-mode=chat).
-- Set up and configure a Salesforce instance with an [External Client App](https://help.salesforce.com/s/articleView?id=xcloud.external_client_apps.htm&type=5).
-- [Configure a Salesforce OIDC connection](https://auth0.com/docs/authenticate/identity-providers/enterprise-identity-providers/oidc) in Auth0 with the following scopes:
-  - `openid`
-  - `api`
-  - `refresh_token`
-  - `offline_access`
-- Complete the [User authentication quickstart](/get-started/user-authentication) to create a Next.js app integrated with Auth0.
-- Set the `SALESFORCE_INSTANCE_URL` in your `.env` file.
-
-```bash .env wrap lines
-SALESFORCE_INSTANCE_URL=https://your-instance.salesforce.com
-```
-
-  </Card>
+  <SalesforcePrereqs lang="js" />
 
 ## 1. Define the Vercel AI tool and backend API route
 

auth4genai/how-tos/list-github-repositories.mdx

@@ -13,68 +13,56 @@ import NextJSAuth0Sample from "/snippets/how-tos/github/nextjs-auth0.mdx";
 import GenKitSample from "/snippets/how-tos/github/genkit.mdx";
 import LlamaIndexJSSample from "/snippets/how-tos/github/llamaindex.mdx";
 import AccountLinking from "/snippets/how-tos/account-linking.mdx";
-import CreateCustomApiClient from "/snippets/common/create-custom-api-client.mdx";
+
+import { GitHubPrereqs } from "/snippets/how-tos/github/prereqs.jsx";
+import { CustomApiClient } from "/snippets/common/custom-api-client.jsx";
 
 <Tabs>
    <Tab title="JavaScript" icon="js">
 
-    <Card title="Prerequisites">
-      Before using this example, make sure you:
-
-      - Install Node.js 18+ and `npm`.
-      - [Set up an OpenAI API key](https://platform.openai.com/docs/quickstart?api-mode=chat).
-      - Complete the [User authentication quickstart](/get-started/user-authentication) to create a Next.js app integrated with Auth0.
-      - Create and configure a [GitHub App](https://docs.github.com/en/apps/creating-github-apps/about-creating-github-apps/about-creating-github-apps).
-      - Configure a [Social Connection for GitHub in Auth0](https://marketplace.auth0.com/integrations/github-social-connection)
-        - Make sure to enable `Token Vault`
-      <CreateCustomApiClient />
-    </Card>
-
     <Tabs>
       <Tab title="AI SDK" icon="https://mintlify-assets.b-cdn.net/auth0/vercel.svg">
+        <GitHubPrereqs lang="js" />
         <AISDKSample />
       </Tab>
 
       <Tab title="Cloudflare Agents" icon="https://mintlify-assets.b-cdn.net/auth0/cloudflare.svg">
+        <GitHubPrereqs lang="js" />
         <CloudflareAgents />
       </Tab>
 
       <Tab title="LangGraph" icon="https://mintlify-assets.b-cdn.net/auth0/langchain.svg">
+        <GitHubPrereqs lang="js" createCustomApiClientStep={true} />
         <LangGraphJSSample />
       </Tab>
 
       <Tab title="GenKit" icon="https://mintlify-assets.b-cdn.net/auth0/genkit.svg">
+        <GitHubPrereqs lang="js" />
         <GenKitSample />
       </Tab>
 
       <Tab title="LlamaIndex" icon="https://mintlify-assets.b-cdn.net/auth0/llamadex.svg">
+        <GitHubPrereqs lang="js" />
         <LlamaIndexJSSample />
       </Tab>
 
       <Tab title="NextJS-Auth0" icon="https://mintlify-assets.b-cdn.net/auth0/nextjs-svgrepo-com.svg">
+        <GitHubPrereqs lang="js" />
         <NextJSAuth0Sample />
       </Tab>
     </Tabs>
 
   </Tab>
 
   <Tab title="Python" icon="python">
-
-    <Card title="Prerequisites">
-      Before using this example, make sure you:
-
-      - Install Python 3.11+ and `pip`.
-      - [Set up an OpenAI API key](https://platform.openai.com/docs/quickstart?api-mode=chat).
-      - Configure a [Social Connection for GitHub in Auth0](https://marketplace.auth0.com/integrations/github-social-connection)
-        - Make sure to enable `Token Vault`
-    </Card>
-
     <Tabs>
       <Tab title="LangGraph" icon="https://mintlify-assets.b-cdn.net/auth0/langchain.svg">
+        <GitHubPrereqs lang="python" />
         <LangGraphSample />
       </Tab>
 
       <Tab title="LlamaIndex" icon="https://mintlify-assets.b-cdn.net/auth0/llamadex.svg">
+        <GitHubPrereqs lang="python" />
         <LlamaIndexSample />
       </Tab>
 

auth4genai/how-tos/list-slack-channels.mdx

@@ -11,63 +11,50 @@ import LangGraphSample from "/snippets/how-tos/slack/langgraph-python.mdx";
 import LlamaIndexSample from "/snippets/how-tos/slack/llamaindex-python.mdx";
 import GenKitSample from "/snippets/how-tos/slack/genkit.mdx";
 import LlamaIndexJSSample from "/snippets/how-tos/slack/llamaindex.mdx";
-import CreateCustomApiClient from "/snippets/common/create-custom-api-client.mdx";
+
+import { SlackPrereqs } from "/snippets/how-tos/slack/prereqs.jsx";
+import { CustomApiClient } from "/snippets/common/custom-api-client.jsx";
 
 <Tabs>
    <Tab title="Javascript" icon="js">
-
-    <Card title="Prerequisites">
-      Before using this example, make sure you:
-
-      - Install Node.js 18+ and `npm`.
-      - [Set up an OpenAI API key](https://platform.openai.com/docs/quickstart?api-mode=chat).
-      - Complete the [User authentication quickstart](/get-started/user-authentication) to create a Next.js app integrated with Auth0.
-      - Configure a [Social Connection for Slack in Auth0](https://marketplace.auth0.com/integrations/sign-in-with-slack)
-        - Make sure to enable `Token Vault`
-      <CreateCustomApiClient />
-    </Card>
-
     <Tabs>
       <Tab title="AI SDK" icon="https://mintlify-assets.b-cdn.net/auth0/vercel.svg">
+        <SlackPrereqs lang="js" />
         <AISDKSample />
       </Tab>
 
       <Tab title="Cloudflare Agents" icon="https://mintlify-assets.b-cdn.net/auth0/cloudflare.svg">
+        <SlackPrereqs lang="js" />
         <CloudflareAgents />
       </Tab>
 
       <Tab title="LangGraph" icon="https://mintlify-assets.b-cdn.net/auth0/langchain.svg">
+        <SlackPrereqs lang="js" createCustomApiClientStep={true} />
         <LangGraphJSSample />
       </Tab>
 
       <Tab title="GenKit" icon="https://mintlify-assets.b-cdn.net/auth0/genkit.svg">
+        <SlackPrereqs lang="js" />
         <GenKitSample />
       </Tab>
 
       <Tab title="LlamaIndex" icon="https://mintlify-assets.b-cdn.net/auth0/llamadex.svg">
+        <SlackPrereqs lang="js" />
         <LlamaIndexJSSample />
       </Tab>
     </Tabs>
 
   </Tab>
 
   <Tab title="Python" icon="python">
-
-    <Card title="Prerequisites">
-      Before using this example, make sure you:
-
-      - Install Python 3.11+ and `pip`.
-      - [Set up an OpenAI API key](https://platform.openai.com/docs/quickstart?api-mode=chat).
-      - Configure a [Social Connection for Slack in Auth0](https://marketplace.auth0.com/integrations/sign-in-with-slack)
-        - Make sure to enable `Token Vault`
-    </Card>
-
     <Tabs>
       <Tab title="LangGraph" icon="https://mintlify-assets.b-cdn.net/auth0/langchain.svg">
+        <SlackPrereqs lang="python" />
         <LangGraphSample />
       </Tab>
 
       <Tab title="LlamaIndex" icon="https://mintlify-assets.b-cdn.net/auth0/llamadex.svg">
+        <SlackPrereqs lang="python" />
         <LlamaIndexSample />
       </Tab>
 

auth4genai/snippets/common/configure-cloudflare-kv-store.mdx

@@ -0,0 +1,10 @@
+For persisting Auth0 session data and other key-value pairs, you'll want to configure a persistent store with your Cloudflare agent worker. One easy methodology is using Workers KV and a [KV namespace](https://developers.cloudflare.com/kv/get-started/) with your Cloudflare agent workers. This will enable you to store Auth0 session data and other key-value pairs with easy access from your Cloudflare agent workers. This can be used when constructing the `CloudflareKVStore` instance with your Cloudflare agent worker.
+
+```ts
+import { CloudflareKVStore } from '@auth0/ai-cloudflare';
+...
+
+return new CloudflareKVStore({ kv: this.env.YOUR_KV_NAMESPACE });
+```
+
+**Note:** the `kv` prop accepts any store which implements the [KVNamespace interface](https://github.com/auth0/auth0-ai-js/blob/%40auth0/ai-cloudflare-v2.0.0/packages/ai-cloudflare/src/CloudflareKVStore.ts#L3-L14), so any persistent store which implements this interface will work.

auth4genai/snippets/common/custom-api-client.jsx

@@ -0,0 +1,43 @@
+export const CustomApiClient = ({
+  apiName = "the external API"
+}) => {
+  return (
+    <Step title="Create a Custom API Client in Auth0">
+      The Custom API Client allows your API server to perform token exchanges
+      using{" "}
+      <strong>
+        <i>access tokens</i>
+      </strong>{" "}
+      instead of{" "}
+      <strong>
+        <i>refresh tokens</i>
+      </strong>
+      . This client enables Token Vault to exchange an access token for an
+      external API access token (e.g., {apiName}).
+      <br />
+      <ul>
+        <li>
+          Navigate to <strong>Applications &gt; APIs</strong>
+        </li>
+        <li>
+          Click the <strong>Create API</strong> button to create a new Custom
+          API.
+        </li>
+        <li>
+          Go to the Custom API you created and click the{" "}
+          <strong>Add Application</strong> button in the right top corner.
+        </li>
+        <li>
+          After that click the <strong>Configure Application</strong> button
+          in the right top corner.
+        </li>
+        <li>
+          Note down the <code>client id</code> and <code>client secret</code>{" "}
+          for your environment variables.
+        </li>
+      </ul>
+    </Step>
+  );
+};
+
+