Docs - sync vercel env vars

docs/config/config-file.mdx

@@ -471,7 +471,7 @@ These environment variables are only used during the build process and are not e
 
 #### syncEnvVars
 
-The `syncEnvVars` build extension replaces the deprecated `resolveEnvVars` export. Check out our [syncEnvVars documentation](/deploy-environment-variables#sync-env-vars-from-another-service) for more information.
+The `syncEnvVars` build extension replaces the deprecated `resolveEnvVars` export. Check out our [syncEnvVars documentation](/deploy-environment-variables#sync-env-vars-from-another-service) for more information and example usage (including syncing environment variables from Infisical and Vercel).
 
 #### audioWaveform
 

docs/deploy-environment-variables.mdx

@@ -123,6 +123,10 @@ export default defineConfig({
 });
 ```
 
+#### Syncing environment variables from Vercel
+
+To sync environment variables from your Vercel projects to Trigger.dev, check out our [syncing environment variables from Vercel example](/guides/examples/vercel-sync-env-vars).
+
 #### Deploy
 
 When you run the [CLI deploy command](/cli-deploy) directly or using [GitHub Actions](/github-actions) it will sync the environment variables from [Infisical](https://infisical.com) to Trigger.dev. This means they'll appear on the Environment Variables page so you can confirm that it's worked.

docs/guides/examples/vercel-ai-sdk.mdx

@@ -4,6 +4,8 @@ sidebarTitle: "Vercel AI SDK"
 description: "This example demonstrates how to use the Vercel AI SDK with Trigger.dev."
 ---
 
+import VercelDocsCards from "/snippets/vercel-docs-cards.mdx";
+
 ## Overview
 
 The [Vercel AI SDK](https://www.npmjs.com/package/ai) is a simple way to use AI models from many different providers, including OpenAI, Microsoft Azure, Google Generative AI, Anthropic, Amazon Bedrock, Groq, Perplexity and [more](https://sdk.vercel.ai/providers/ai-sdk-providers).
@@ -51,3 +53,5 @@ To test this task in the dashboard, you can use the following payload:
   "prompt": "What is the meaning of life?"
 }
 ```
+
+<VercelDocsCards />

docs/guides/examples/vercel-sync-env-vars.mdx

@@ -0,0 +1,87 @@
+---
+title: "Syncing environment variables from your Vercel projects"
+sidebarTitle: "Syncing Vercel env vars"
+description: "This example demonstrates how to sync environment variables from your Vercel project to Trigger.dev."
+---
+
+import VercelDocsCards from "/snippets/vercel-docs-cards.mdx";
+
+## Overview
+
+This example shows how to automatically sync environment variables from your Vercel project to Trigger.dev.
+
+## Build configuration
+
+To sync environment variables from your Vercel project to Trigger.dev, you'll first need to add this build configuration to your `trigger.config.ts` file. This extension will then automatically run every time you deploy your project.
+
+This code syncs encrypted environment variables, filtering them based on the current environment (production, preview, or development).
+
+```ts trigger.config.ts
+import { defineConfig } from "@trigger.dev/sdk/v3";
+import { vercelSyncEnvVars } from "@trigger.dev/build/extensions/vercelSyncEnvVars";
+
+export default defineConfig({
+  build: {
+    extensions:
+     extensions: [
+      syncVercelEnvVars(),
+      syncEnvVars(async (ctx) => {
+        const environmentMap = {
+          // Account for the different environment names used by Vercel
+        prod: "production",
+          staging: "preview",
+          dev: "development",
+        } as const;
+
+        const vercelEnvironment =
+          environmentMap[ctx.environment as keyof typeof environmentMap];
+
+        const vercelApiUrl =
+          `https://api.vercel.com/v8/projects/${process.env.VERCEL_PROJECT_ID}/env?decrypt=true`;
+
+        const response = await fetch(vercelApiUrl, {
+          headers: {
+            Authorization: `Bearer ${process.env.VERCEL_ACCESS_TOKEN}`,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        const filteredEnvs = data.envs
+          .filter(
+            (env: { type: string; value: string; target: string[] }) =>
+              env.type === "encrypted" &&
+              env.value &&
+              env.target.includes(vercelEnvironment),
+          )
+          .map((env: { key: string; value: string }) => ({
+            name: env.key,
+            value: env.value,
+          }));
+
+        return filteredEnvs;
+      }),
+    ],,
+  },
+});
+```
+
+<Note>
+  [Build extensions](/config/config-file#extensions) allow you to hook into the build system and
+  customize the build process or the resulting bundle and container image (in the case of
+  deploying). You can use pre-built extensions or create your own.
+</Note>
+
+## Running the sync operation
+
+To run the sync operation, simply run the `deploy` command. You should see some output in the console indicating that the environment variables have been synced, and they should now be available in the Trigger.dev dashboard.
+
+```bash
+npx trigger.dev@latest deploy
+```
+
+<VercelDocsCards />

docs/guides/frameworks/nextjs-webhooks.mdx

@@ -4,6 +4,8 @@ sidebarTitle: "Next.js webhooks"
 description: "Learn how to trigger a task from a webhook in a Next.js app."
 ---
 
+import VercelDocsCards from "/snippets/vercel-docs-cards.mdx";
+
 ## Prerequisites
 
 - [A Next.js project, set up with Trigger.dev](/guides/frameworks/nextjs)
@@ -135,3 +137,5 @@ If you now go to your [Trigger.dev dashboard](https://cloud.trigger.dev), you sh
 </Step>
 
 </Steps>
+
+<VercelDocsCards />

docs/guides/frameworks/nextjs.mdx

@@ -17,6 +17,7 @@ import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.md
 import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to-start.mdx";
 import AddEnvironmentVariables from "/snippets/add-environment-variables.mdx";
 import DeployingYourTask from "/snippets/deplopying-your-task.mdx";
+import VercelDocsCards from "/snippets/vercel-docs-cards.mdx";
 
 <Note>This guide can be followed for both App and Pages router as well as Server Actions.</Note>
 
@@ -254,14 +255,5 @@ Here are the steps to trigger your task in the Next.js App and Pages router and
     <NextjsTroubleshootingButtonSyntax/>
     <WorkerFailedToStartWhenRunningDevCommand/>
 
-## Additional resources for Next.js
-
-<Card
-  title="Next.js - triggering tasks using webhooks"
-  icon="N"
-  href="/guides/frameworks/nextjs-webhooks"
->
-  How to create a webhook handler in a Next.js app, and trigger a task from it.
-</Card>
-
+<VercelDocsCards />
 <UsefulNextSteps />

docs/mint.json

@@ -316,7 +316,8 @@
         "guides/examples/supabase-storage-upload",
         "guides/examples/react-pdf",
         "guides/examples/resend-email-sequence",
-        "guides/examples/vercel-ai-sdk"
+        "guides/examples/vercel-ai-sdk",
+        "guides/examples/vercel-sync-env-vars"
       ]
     },
     {

docs/snippets/vercel-docs-cards.mdx

@@ -0,0 +1,33 @@
+## Learn more about Vercel and Trigger.dev
+
+### Walk-through guides from development to deployment
+
+<CardGroup cols={2}>
+  <Card title="Next.js - setup guide" icon="N" href="/guides/frameworks/nextjs">  
+    Learn how to setup Trigger.dev with Next.js, using either the pages or app router.
+  </Card>
+
+  <Card
+    title="Next.js - triggering tasks using webhooks"
+    icon="N"
+    href="/guides/frameworks/nextjs-webhooks"
+  >
+    Learn how to create a webhook handler for incoming webhooks in a Next.js app, and trigger a task from it.
+  </Card>
+</CardGroup>
+
+### Task examples with code you can copy and paste
+
+<CardGroup cols={2}>
+  <Card
+    title="Vercel sync environment variables"
+    icon="code"
+    href="/guides/examples/vercel-sync-env-vars"
+  >
+    Learn how to automatically sync environment variables from your Vercel projects to Trigger.dev.
+  </Card>
+  <Card title="Vercel AI SDK" icon="code" href="/guides/examples/vercel-ai-sdk">
+    Learn how to use the Vercel AI SDK, which is a simple way to use AI models from different
+    providers, including OpenAI, Anthropic, Amazon Bedrock, Groq, Perplexity etc.
+  </Card>
+</CardGroup>