diff --git a/contents/docs/ai-engineering/ai-wizard.mdx b/contents/docs/ai-engineering/ai-wizard.mdx index 90d9157ba838..24ddf691d716 100644 --- a/contents/docs/ai-engineering/ai-wizard.mdx +++ b/contents/docs/ai-engineering/ai-wizard.mdx @@ -41,7 +41,9 @@ Running the wizard automatically: 8. Optionally installs the [PostHog MCP server](/docs/model-context-protocol) for your AI agent + The AI wizard integrating both the JS Web SDK and Node SDK into a Next.js application + ## AI wizard installation @@ -77,6 +79,7 @@ Running `npx @posthog/wizard` starts the default integration flow. The wizard al | `wizard audit ` | Audit an existing integration – see [Audit subcommands](#audit-subcommands) | | `wizard revenue-analytics` | Wire up Stripe + PostHog revenue analytics | | `wizard mcp-analytics` | Instrument your own MCP server with [MCP Analytics](/docs/mcp-analytics) | +| `wizard feature-flags` | Add feature flags on Next.js App Router (server eval + client bootstrap) – see [AI wizard installation](/docs/feature-flags/installation/ai-wizard) | | `wizard ai-observability` | Instrument your LLM calls with [AI Observability](/docs/ai-observability) | | `wizard replay-vision` | Turn on Session Replay and create [Replay Vision](/docs/replay-vision) scanners written for your product | | `wizard migrate` | Migrate from another analytics or feature-flag vendor | diff --git a/contents/docs/feature-flags/installation/ai-wizard.mdx b/contents/docs/feature-flags/installation/ai-wizard.mdx new file mode 100644 index 000000000000..3c32d3210a8b --- /dev/null +++ b/contents/docs/feature-flags/installation/ai-wizard.mdx @@ -0,0 +1,93 @@ +--- +title: AI wizard feature flags installation +platformIconName: IconSparkles +--- + +import WizardCommand from 'components/WizardCommand' +import CalloutBox from 'components/Docs/CalloutBox' +import { Steps, Step } from 'components/Docs/Steps' + +`wizard feature-flags` adds the cheap feature flags path to an **existing** PostHog install. It evaluates flags once per request on the server with `evaluateFlags()`, bootstraps those values into the client so the first paint has no flicker and no extra `/flags` fetch, and turns `/flags` polling off in CI. + +You still create and target flags in PostHog. This command is the first-hour wiring: one evaluation per request, the same distinct id on server and client, and a kill switch that stays off until you raise rollout. For SDK snippets without the wizard, see [adding feature flag code](/docs/feature-flags/adding-feature-flag-code). + +This command is not: + +- Default `npx @posthog/wizard` — that installs product analytics. Run it first if PostHog is not initialized. +- `wizard audit feature-flags` — that is a read-only usage and cost audit after you already have flags. +- The [PostHog MCP surface](/docs/feature-flags/surfaces/mcp) or [PostHog AI](/docs/feature-flags/manage-flags-ai) — those manage flags from an editor or the app. This command wires evaluation into your Next.js app. + +## AI wizard + +The fastest way to get this wiring is the wizard (it also works for [LLM coding agents](/blog/envoy-wizard-llm-agent) like Cursor and Bolt): + + + + + +This command instruments **Next.js App Router 15.3 or newer** (`app/` directory). Pages Router, older Next.js, and other frameworks abort. For those stacks, follow [manual installation](/docs/feature-flags/installation) and [bootstrapping](/docs/feature-flags/bootstrapping). + + + + + +The command ships in [wizard pull request 1192](https://github.com/PostHog/wizard/pull/1192) and [context-mill pull request 378](https://github.com/PostHog/context-mill/pull/378). Until those merge, `npx @posthog/wizard@latest feature-flags` will not find it. Use a local wizard build, or wait for the next npm release. + + + +## What it does + + + + + +From the Next.js project that already has PostHog installed, run the command above. Authenticate if the wizard asks. + +If PostHog is not initialized, the run aborts and tells you to run `npx @posthog/wizard` first, then re-run `wizard feature-flags`. + + + + + +The wizard asks once. **Skip is first:** no new flag, no UI change. Confirm: one boolean flag, **active, 0% rollout**, plus one additive UI path (a new, visibly flagged element, not a wrap around existing critical logic). Auth, checkout, payments, and data-mutation handlers stay ungated. Flag-off (including 0%) is current behavior. + + + + + +The wizard: + +- Calls `evaluateFlags()` once per request on the server +- Bootstraps those values into the client `PostHogProvider` +- Turns `/flags` polling off in CI so tests do not bill you + +It does not add local evaluation. See [bootstrapping](/docs/feature-flags/bootstrapping) and [cutting costs](/docs/feature-flags/cutting-costs) for why this path is cheaper. + + + + + +In PostHog, raise the flag's rollout to 100%. Reload the app. The gated UI appears. Set rollout back to 0%. Production users keep seeing today's UI until someone raises rollout in PostHog. + + + + + +## For agents + +Paste this page's URL into any coding agent as a prompt: + +`https://posthog.com/docs/feature-flags/installation/ai-wizard.md` + +Or run the same skill without the TUI: + +```bash +npx @posthog/wizard skill feature-flags-setup +``` + +## Related + +- [Bootstrapping](/docs/feature-flags/bootstrapping) +- [Cutting costs](/docs/feature-flags/cutting-costs) +- [`wizard audit feature-flags`](/docs/ai-engineering/ai-wizard#audit-subcommands) +- [Manage flags over MCP](/docs/feature-flags/surfaces/mcp) diff --git a/contents/docs/feature-flags/installation/index.mdx b/contents/docs/feature-flags/installation/index.mdx index 52312ecd176e..baf7d4e62e32 100644 --- a/contents/docs/feature-flags/installation/index.mdx +++ b/contents/docs/feature-flags/installation/index.mdx @@ -8,9 +8,11 @@ import WizardCommand from 'components/WizardCommand' ## AI wizard -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): +On Next.js App Router 15.3+, add the cheap flags path with this command (it also works for [LLM coding agents](/blog/envoy-wizard-llm-agent) like Cursor and Bolt): - + + +This extends an existing PostHog install. It does not replace `npx @posthog/wizard`. Full walkthrough: [AI wizard feature flags installation](/docs/feature-flags/installation/ai-wizard). Other platforms: pick one below. Wait for it to finish and test the setup once the wizard is complete. diff --git a/contents/docs/feature-flags/start-here.mdx b/contents/docs/feature-flags/start-here.mdx index 953d7b6feb8b..5de4bd5cc16c 100644 --- a/contents/docs/feature-flags/start-here.mdx +++ b/contents/docs/feature-flags/start-here.mdx @@ -8,9 +8,26 @@ import FeatureFlagsInstallationPlatforms from './installation/_snippets/installa import { QuestLog, QuestLogItem } from 'components/Docs/QuestLog' import { IconFlask } from '@posthog/icons' import OSButton from 'components/OSButton' +import WizardCommand from 'components/WizardCommand' + + + On Next.js App Router 15.3+, `wizard feature-flags` adds server `evaluateFlags()`, client bootstrap, and an optional 0% kill switch. It extends an existing PostHog install. Other stacks: skip this step and install an SDK below. + + + + + AI wizard walkthrough + + + +