Docs - sync vercel env vars (#1426)

* Added sync env vars docs example

* Added links in the config + deploy files

* Updated copy

* Added vercel docs cards and added them to all of the relevant docs pages

* Added sync env vars to the intro page

* Added automatically sync env vars section to nextjs guide

* Added ‘Manually’

* Removed code block and updated title

* updated formatting and added vercelsyncenvvars to the config file

* Added missing comment

* Updated imports to /core

* Added sync env var docs link and note

* Improved the VERCEL_ACCESS_TOKEN note

* Added link to vercel

* Updated docs and improved formatting

* Copy tweaks

* Added space

* Updated deploy docs

Author: D-K-P

docs/config/config-file.mdx

@@ -13,8 +13,8 @@ The `trigger.config.ts` file is used to configure your Trigger.dev project. It i
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //Your project ref (you can see it on the Project settings page in the dashboard)
-  project: "proj_gtcwttqhhtlasxgfuhxs",
+  // Your project ref (you can see it on the Project settings page in the dashboard)
+  project: "<project ref>",
   //The paths for your trigger folders
   dirs: ["./trigger"],
   retries: {
@@ -55,7 +55,8 @@ You can add lifecycle functions to get notified when any task starts, succeeds,
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   onSuccess: async (payload, output, { ctx }) => {
     console.log("Task succeeded", ctx.task.id);
   },
@@ -87,7 +88,8 @@ import { PrismaInstrumentation } from "@prisma/instrumentation";
 import { OpenAIInstrumentation } from "@traceloop/instrumentation-openai";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   instrumentations: [new PrismaInstrumentation(), new OpenAIInstrumentation()],
 });
 ```
@@ -115,7 +117,8 @@ We currently only officially support the `node` runtime, but you can try our exp
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   runtime: "bun",
 });
 ```
@@ -130,7 +133,8 @@ You can specify the default machine for all tasks in your project:
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   defaultMachine: "large-1x",
 });
 ```
@@ -145,7 +149,8 @@ You can set the log level for your project:
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   logLevel: "debug",
 });
 ```
@@ -160,7 +165,8 @@ You can set the default `maxDuration` for all tasks in your project:
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   maxDuration: 60, // 60 seconds
 });
 ```
@@ -175,7 +181,8 @@ You can customize the build process using the `build` option:
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     // Don't bundle these packages
     external: ["header-generator"],
@@ -197,7 +204,8 @@ All code is bundled by default, but you can exclude some packages from the bundl
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     external: ["header-generator"],
   },
@@ -212,7 +220,8 @@ Each entry in the external should be a package name, not necessarily the import
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     external: ["ai"],
   },
@@ -232,7 +241,8 @@ You can customize the `jsx` options that are passed to `esbuild` using the `jsx`
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     jsx: {
       // Use the Fragment component instead of React.Fragment
@@ -258,7 +268,8 @@ You can add custom [import conditions](https://esbuild.github.io/api/#conditions
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     conditions: ["react-server"],
   },
@@ -282,7 +293,8 @@ import { defineConfig } from "@trigger.dev/sdk/v3";
 import { additionalFiles } from "@trigger.dev/build/extensions/core";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [
       additionalFiles({ files: ["wrangler/wrangler.toml", "./assets/**", "./fonts/**"] }),
@@ -304,7 +316,8 @@ import { defineConfig } from "@trigger.dev/sdk/v3";
 import { additionalPackages } from "@trigger.dev/build/extensions/core";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [additionalPackages({ packages: ["wrangler"] })],
   },
@@ -317,7 +330,8 @@ This allows you to include additional packages in the build that are not automat
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [additionalPackages({ packages: ["[email protected]"] })],
   },
@@ -334,6 +348,7 @@ import { emitDecoratorMetadata } from "@trigger.dev/build/extensions/typescript"
 
 export default defineConfig({
   project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [emitDecoratorMetadata()],
   },
@@ -365,6 +380,8 @@ import { defineConfig } from "@trigger.dev/sdk/v3";
 import { prismaExtension } from "@trigger.dev/build/extensions/prisma";
 
 export default defineConfig({
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [
       prismaExtension({
@@ -389,6 +406,7 @@ import { prismaExtension } from "@trigger.dev/build/extensions/prisma";
 
 export default defineConfig({
   project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [
       prismaExtension({
@@ -431,6 +449,7 @@ import { prismaExtension } from "@trigger.dev/build/extensions/prisma";
 
 export default defineConfig({
   project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [
       prismaExtension({
@@ -451,6 +470,7 @@ import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
   project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [
       prismaExtension({
@@ -473,6 +493,43 @@ These environment variables are only used during the build process and are not e
 
 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.
 
+```ts
+import { syncEnvVars } from "@trigger.dev/build/extensions/core";
+
+export default defineConfig({
+  project: "<project ref>",
+  // Your other config settings...
+  build: {
+    extensions: [syncEnvVars()],
+  },
+});
+```
+
+#### vercelSyncEnvVars
+
+The `vercelSyncEnvVars` build extension syncs environment variables from your Vercel project to Trigger.dev.
+
+<Note>
+  You need to set the `VERCEL_ACCESS_TOKEN` and `VERCEL_PROJECT_ID` environment variables, or pass
+  in the token and project ID as arguments to the `vercelSyncEnvVars` build extension. You can find
+  / generate the `VERCEL_ACCESS_TOKEN` in your Vercel
+  [dashboard](https://vercel.com/account/settings/tokens). Make sure the scope of the token covers
+  the project you want to sync.
+</Note>
+
+```ts
+import { defineConfig } from "@trigger.dev/sdk/v3";
+import { vercelSyncEnvVars } from "@trigger.dev/build/extensions/core";
+
+export default defineConfig({
+  project: "<project ref>",
+  // Your other config settings...
+  build: {
+    extensions: [vercelSyncEnvVars()],
+  },
+});
+```
+
 #### audioWaveform
 
 Previously, we installed [Audio Waveform](https://github.com/bbc/audiowaveform) in the build image. That's been moved to a build extension:
@@ -482,7 +539,8 @@ import { defineConfig } from "@trigger.dev/sdk/v3";
 import { audioWaveform } from "@trigger.dev/build/extensions/audioWaveform";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [audioWaveform()], // uses verson 1.1.0 of audiowaveform by default
   },
@@ -525,6 +583,7 @@ import { defineConfig } from "@trigger.dev/sdk/v3";
 import { ffmpeg } from "@trigger.dev/build/extensions/core";
 
 export default defineConfig({
+  project: "<project ref>",
   // Your other config settings...
   build: {
     extensions: [ffmpeg()],
@@ -539,7 +598,8 @@ import { defineConfig } from "@trigger.dev/sdk/v3";
 import { ffmpeg } from "@trigger.dev/build/extensions/core";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [ffmpeg({ version: "6.0-4" })],
   },
@@ -561,6 +621,7 @@ import { sentryEsbuildPlugin } from "@sentry/esbuild-plugin";
 
 export default defineConfig({
   project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [
       esbuildPlugin(
@@ -586,7 +647,8 @@ import { defineConfig } from "@trigger.dev/sdk/v3";
 import { aptGet } from "@trigger.dev/build/extensions/core";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [aptGet({ packages: ["ffmpeg"] })],
   },
@@ -599,7 +661,8 @@ If you want to install a specific version of a package, you can specify the vers
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [aptGet({ packages: ["ffmpeg=6.0-4"] })],
   },
@@ -646,7 +709,8 @@ Instead of creating this function and worrying about types, you can define an ex
 import { defineConfig } from "@trigger.dev/sdk/v3";
 
 export default defineConfig({
-  //..other stuff
+  project: "<project ref>",
+  // Your other config settings...
   build: {
     extensions: [
       {

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, you can use our build extension. Check out our [syncing environment variables from Vercel guide](/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,53 @@
+---
+title: "Syncing environment variables from your Vercel projects"
+sidebarTitle: "Vercel sync environment variables"
+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, you just need to add our build extension to your `trigger.config.ts` file. This extension will then automatically run every time you deploy your Trigger.dev project.
+
+<Note>
+  You need to set the `VERCEL_ACCESS_TOKEN` and `VERCEL_PROJECT_ID` environment variables in the
+  Trigger.dev dashboard, or pass in the token and project ID as arguments to the `vercelSyncEnvVars`
+  build extension. You can find / generate the `VERCEL_ACCESS_TOKEN` in your Vercel
+  [dashboard](https://vercel.com/account/settings/tokens). Make sure the scope of the token covers
+  the project with the environment variables you want to sync.
+</Note>
+
+```ts trigger.config.ts
+import { defineConfig } from "@trigger.dev/sdk/v3";
+import { vercelSyncEnvVars } from "@trigger.dev/build/extensions/core";
+
+export default defineConfig({
+  project: "<project ref>",
+  // Your other config settings...
+  build: {
+    // Add the vercelSyncEnvVars build extension
+    extensions: [vercelSyncEnvVars()],
+  },
+});
+```
+
+<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 sync the environment variables, all you need to do is run our `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 your 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 />