diff --git a/apps/webapp/app/components/helpContent/HelpContentText.tsx b/apps/webapp/app/components/helpContent/HelpContentText.tsx
index f7039e9c6..dfe62c5f4 100644
--- a/apps/webapp/app/components/helpContent/HelpContentText.tsx
+++ b/apps/webapp/app/components/helpContent/HelpContentText.tsx
@@ -9,6 +9,12 @@ import { useDevEnvironment } from "~/hooks/useEnvironments";
import { ClipboardField } from "../primitives/ClipboardField";
import { Button } from "../primitives/Buttons";
import { InlineCode } from "../code/InlineCode";
+import {
+ ClientTabs,
+ ClientTabsContent,
+ ClientTabsList,
+ ClientTabsTrigger,
+} from "../primitives/ClientTabs";
export function HowToSetupYourProject() {
const devEnvironment = useDevEnvironment();
@@ -33,14 +39,28 @@ export function HowToSetupYourProject() {
. It’s free and easy to use and required to create a tunnel, making
your local machine accessible to the internet.
-
+
-
+
+
+ Mac
+ Windows
+
+
+
+
+
+
+
+
@@ -60,21 +80,11 @@ export function HowToSetupYourProject() {
-
-
-
- Use the public URL that ngrok gave you for the{" "}
- VERCEL_URL environment variable.
-
-
@@ -84,18 +94,25 @@ export function HowToSetupYourProject() {
`}
+ secure="npx @trigger.dev/init@latest -k ••••••••• -t https://cloud.trigger.dev -u "
+ value={`npx @trigger.dev/init@latest -k ${devEnvironment?.apiKey} -t https://cloud.trigger.dev -u `}
/>
Use the public URL from step 2d above to replace the -u placeholder
text.
+
+
+
+
- Run the CLI. It will add Trigger.dev to your existing Next.js project,
- setup a route and give you an example file.
+ It will add Trigger.dev to your existing Next.js project, setup a
+ route and give you an example file.
+
+
+
Once you've run the CLI command, click Refresh to view your example
Job in the list.