diff --git a/contents/docs/error-tracking/installation/index.mdx b/contents/docs/error-tracking/installation/index.mdx
index 0656d07d26af..8d94968040f2 100644
--- a/contents/docs/error-tracking/installation/index.mdx
+++ b/contents/docs/error-tracking/installation/index.mdx
@@ -9,7 +9,7 @@ import WizardCommand from 'components/WizardCommand'
Install PostHog in seconds with our wizard by running this command in your project directory with your terminal (it also works for [LLM coding agents](/blog/envoy-wizard-llm-agent) like Cursor and Bolt):
-
+
Wait for it to finish and test the setup once the wizard is complete.
diff --git a/contents/docs/error-tracking/upload-source-maps/_snippets/wizard-section.mdx b/contents/docs/error-tracking/upload-source-maps/_snippets/wizard-section.mdx
index 2af77ab7733e..a98c6730eee7 100644
--- a/contents/docs/error-tracking/upload-source-maps/_snippets/wizard-section.mdx
+++ b/contents/docs/error-tracking/upload-source-maps/_snippets/wizard-section.mdx
@@ -4,4 +4,4 @@ import WizardCommand from 'components/WizardCommand'
Set up source map uploading automatically with our wizard by running this command in your project directory with your terminal (it also works for [LLM coding agents](/blog/envoy-wizard-llm-agent) like Cursor and Bolt):
-
+
diff --git a/contents/docs/error-tracking/upload-source-maps/index.mdx b/contents/docs/error-tracking/upload-source-maps/index.mdx
index 62cd716484b4..5f772e20c272 100644
--- a/contents/docs/error-tracking/upload-source-maps/index.mdx
+++ b/contents/docs/error-tracking/upload-source-maps/index.mdx
@@ -18,7 +18,7 @@ If your source maps are not publicly hosted, you will need to upload them during
If you're using a JavaScript or TypeScript framework, set up source map uploading automatically with our wizard by running this command in your project directory with your terminal (it also works for [LLM coding agents](/blog/envoy-wizard-llm-agent) like Cursor and Bolt):
-
+
Otherwise, choose your platform below for manual instructions.
diff --git a/src/components/WizardCommand/index.tsx b/src/components/WizardCommand/index.tsx
index d04556480c6e..7060e23a4040 100644
--- a/src/components/WizardCommand/index.tsx
+++ b/src/components/WizardCommand/index.tsx
@@ -1,5 +1,33 @@
import React from 'react'
import PlatformInstall from 'components/PlatformInstall'
+import { RenderInClient } from 'components/RenderInClient'
+import usePostHog from 'hooks/usePostHog'
+
+/**
+ * A subcommand that replaces `command` while a PostHog feature flag is on, so a page can
+ * recommend a new wizard command before it is released to everyone.
+ */
+export type FlagCommand = {
+ /** The PostHog feature flag key, evaluated in the browser. */
+ flag: string
+ /** The subcommand to show while the flag is on, e.g. `error-tracking`. */
+ command: string
+}
+
+type WizardCommandProps = {
+ className?: string
+ command?: string
+ selfDriving?: boolean
+ slim?: boolean
+ variant?: 'default' | 'bordered'
+ onCopy?: () => void
+ /**
+ * Swap `command` for another subcommand while a feature flag is on. The server render and the
+ * first client render show `command`; the swap happens once flags load, or not at all when they
+ * do not load (an ad blocker), so the page always has a working command.
+ */
+ flagCommand?: FlagCommand
+}
/**
* Thin backward-compatible alias for the inline PlatformInstall command.
@@ -7,24 +35,39 @@ import PlatformInstall from 'components/PlatformInstall'
* WizardCommand was the original install-command component; PlatformInstall is now the single source
* of truth for both rendering and command-building. This wrapper is kept so the existing
* `` call sites (many in MDX prose, plus the global shortcode) render the consolidated
- * component with zero changes — it owns no logic, it just maps the old prop names onto
- * ``.
+ * component with zero changes — it maps the old prop names onto ``,
+ * and resolves the optional `flagCommand` rollout.
*/
-export default function WizardCommand({
+export default function WizardCommand({ flagCommand, ...props }: WizardCommandProps): JSX.Element {
+ if (!flagCommand) {
+ return
+ }
+ return (
+ }
+ render={() => }
+ />
+ )
+}
+
+function FlaggedWizardCommand({
+ flagCommand,
+ command,
+ ...props
+}: Omit & { flagCommand: FlagCommand }): JSX.Element {
+ const posthog = usePostHog()
+ const enabled = posthog?.isFeatureEnabled?.(flagCommand.flag)
+ return
+}
+
+function InlineWizardCommand({
className = '',
command = '',
selfDriving = false,
slim = false,
variant = 'default',
onCopy,
-}: {
- className?: string
- command?: string
- selfDriving?: boolean
- slim?: boolean
- variant?: 'default' | 'bordered'
- onCopy?: () => void
-}): JSX.Element {
+}: Omit): JSX.Element {
return (