vybekiit 0.7.26 → 0.7.28

package/dist/global-skills/instrument-product-analytics/references/next-js.md

@@ -1,10 +1,6 @@
 > AI agents: this is one page from PostHog's docs. Full index of Markdown docs for LLMs: https://posthog.com/llms.txt
 
-# Next.js - Docs
-
-Copy page
-
-# Next.js - Docs
+# Next.js
 
 PostHog makes it easy to get data about traffic and usage of your [Next.js](https://nextjs.org/) app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more.
 
@@ -37,8 +33,6 @@ Or, to integrate manually, continue with the rest of this guide.
 
 Install `posthog-js` using your package manager:
 
-PostHog AI
-
 ### npm
 
 ```bash
@@ -65,8 +59,6 @@ bun add posthog-js
 
 > **If your site sets a Content-Security-Policy**, it needs to allow PostHog. This applies to the snippet and to package installs alike: the SDK lazy-loads extra bundles (session replay, surveys) from PostHog's CDN, and sends events to the ingestion host. PostHog serves from subdomains of `posthog.com` that change over time, so allow the wildcard:
 >
-> PostHog AI
->
 > ```
 > script-src 'self' https://*.posthog.com;
 > connect-src 'self' https://*.posthog.com;
@@ -79,8 +71,6 @@ Add your environment variables to your `.env.local` file and to your hosting pro
 
 .env.local
 
-PostHog AI
-
 ```shell
 NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN=<ph_project_token>
 NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
@@ -92,12 +82,11 @@ These values need to start with `NEXT_PUBLIC_` to be accessible on the client-si
 
 Next.js provides the [`instrumentation-client.ts|js`](https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client) file for client-side setup. Add it to the root of your Next.js app (for both app and pages router) and initialize PostHog in it like this:
 
-PostHog AI
-
 ### instrumentation-client.js
 
 ```javascript
 import posthog from 'posthog-js'
+
 posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN, {
   api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
   defaults: '2026-05-30'
@@ -108,6 +97,7 @@ posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN, {
 
 ```typescript
 import posthog from 'posthog-js'
+
 posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN!, {
   api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
   defaults: '2026-05-30'
@@ -145,8 +135,6 @@ If your app calls your own backend, `tracing_headers` adds `X-POSTHOG-DISTINCT-I
 
 JavaScript
 
-PostHog AI
-
 ```javascript
 posthog.init('<ph_project_token>', {
   api_host: 'https://us.i.posthog.com',
@@ -181,7 +169,11 @@ For certain features like [heatmaps](/docs/toolbar/heatmaps.md), your Web Applic
 
 **US**: `44.205.89.55`, `52.4.194.122`, `44.208.188.173`
 
-These are public, stable IPs used by PostHog services (e.g., Celery tasks for snapshots).
+These are public, stable IPs used by PostHog services.
+
+PostHog captures heatmap screenshots using [Browserless](https://www.browserless.io), which has its own IP addresses. Browserless [publishes the current list here](https://docs.browserless.io/baas/troubleshooting/whitelisting-ips).
+
+An allowlist does not help when your app has a private address. For apps on an internal network, see [internal and intranet applications](/docs/session-replay/troubleshooting.md#internal-and-intranet-applications).
 
 ## Accessing PostHog
 
@@ -189,11 +181,10 @@ Once initialized in `instrumentation-client.js|ts`, import `posthog` from `posth
 
 JavaScript
 
-PostHog AI
-
 ```javascript
 "use client";
 import posthog from "posthog-js";
+
 export default function Home() {
   return (
     <div>
@@ -209,13 +200,13 @@ The [React feature flag hooks](/docs/libraries/react.md#feature-flags) work auto
 
 JavaScript
 
-PostHog AI
-
 ```javascript
 "use client";
 import { useFeatureFlagEnabled } from "@posthog/react";
+
 export default function FeatureComponent() {
   const showNewFeature = useFeatureFlagEnabled("new-feature");
+
   return showNewFeature ? <NewFeature /> : <OldFeature />;
 }
 ```
@@ -235,8 +226,6 @@ Next.js enables you to both server-side render pages and add server-side functio
 
 First, install the `posthog-node` library:
 
-PostHog AI
-
 ### npm
 
 ```bash
@@ -271,11 +260,10 @@ This enables us to send events and fetch data from PostHog on the server – wit
 
 JavaScript
 
-PostHog AI
-
 ```javascript
 // app/posthog.js
 import { PostHog } from 'posthog-node'
+
 export default function PostHogClient() {
   const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN, {
     host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
@@ -295,17 +283,18 @@ To use this client, we import it into our pages and call it with the `PostHogCli
 
 JavaScript
 
-PostHog AI
-
 ```javascript
 import Link from 'next/link'
 import PostHogClient from '../posthog'
+
 export default async function About() {
+
   const posthog = PostHogClient()
   const flags = await posthog.getAllFlags(
     'user_distinct_id' // replace with a user's distinct ID
   );
   await posthog.shutdown()
+
   return (
     <main>
       <h1>About</h1>
@@ -326,21 +315,22 @@ This looks like this:
 
 JavaScript
 
-PostHog AI
-
 ```javascript
 // pages/posts/[id].js
 import { useContext, useEffect, useState } from 'react'
 import { getServerSession } from "next-auth/next"
 import { authOptions } from '@/lib/auth'
 import { PostHog } from 'posthog-node'
+
 export default function Post({ post, flags }) {
   const [ctaState, setCtaState] = useState()
+
   useEffect(() => {
     if (flags) {
       setCtaState(flags['blog-cta'])
     }
   })
+
   return (
     <div>
       <h1>{post.title}</h1>
@@ -353,10 +343,13 @@ export default function Post({ post, flags }) {
     </div>
   )
 }
+
 export async function getServerSideProps(ctx) {
+
   // Pass authOptions, or your session callbacks don't run.
   const session = await getServerSession(ctx.req, ctx.res, authOptions)
   let flags = null
+
   if (session) {
     const client = new PostHog(
       process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN,
@@ -364,8 +357,10 @@ export async function getServerSideProps(ctx) {
         host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
       }
     )
+
     // A stable ID from your auth system, not an email. See the note below.
     const distinctId = session.user.id
+
     flags = await client.getAllFlags(distinctId);
     client.capture({
       distinctId,
@@ -374,8 +369,10 @@ export async function getServerSideProps(ctx) {
         $current_url: ctx.req.url,
       },
     });
+
     await client.shutdown()
   }
+
   const { posts } = await import('../../blog.json')
   const post = posts.find((post) => post.id.toString() === ctx.params.id)
   return {
@@ -391,8 +388,6 @@ export async function getServerSideProps(ctx) {
 >
 > JavaScript
 >
-> PostHog AI
->
 > ```javascript
 > // lib/auth.js
 > export const authOptions = {
@@ -419,8 +414,6 @@ You can override that configuration when initializing PostHog, but make sure you
 
 TSX
 
-PostHog AI
-
 ```jsx
 posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN, {
   // ... your configuration

package/dist/global-skills/instrument-product-analytics/references/nuxt-js-3-6.md

@@ -1,10 +1,6 @@
 > AI agents: this is one page from PostHog's docs. Full index of Markdown docs for LLMs: https://posthog.com/llms.txt
 
-# Nuxt.js (v3.0 to v3.6) - Docs
-
-Copy page
-
-# Nuxt.js (v3.0 to v3.6) - Docs
+# Nuxt.js (v3.0 to v3.6)
 
 PostHog makes it easy to get data about usage of your [Nuxt.js](https://nuxt.com/) app. Integrating PostHog into your app enables analytics about user behavior, custom events capture, session replays, feature flags, and more.
 
@@ -14,8 +10,6 @@ These docs are for Nuxt v3.0 to v3.6. You can see a working example of the Nuxt
 
 1.  Install `posthog-js` using your package manager:
 
-PostHog AI
-
 ### npm
 
 ```bash
@@ -42,8 +36,6 @@ bun add posthog-js
 
 > **If your site sets a Content-Security-Policy**, it needs to allow PostHog. This applies to the snippet and to package installs alike: the SDK lazy-loads extra bundles (session replay, surveys) from PostHog's CDN, and sends events to the ingestion host. PostHog serves from subdomains of `posthog.com` that change over time, so allow the wildcard:
 >
-> PostHog AI
->
 > ```
 > script-src 'self' https://*.posthog.com;
 > connect-src 'self' https://*.posthog.com;
@@ -56,8 +48,6 @@ bun add posthog-js
 
 .env
 
-PostHog AI
-
 ```shell
 NUXT_PUBLIC_POSTHOG_PROJECT_TOKEN=<ph_project_token>
 NUXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
@@ -67,8 +57,6 @@ Then reference them in your `nuxt.config.js` file:
 
 nuxt.config.js
 
-PostHog AI
-
 ```javascript
 export default defineNuxtConfig({
   runtimeConfig: {
@@ -93,11 +81,11 @@ Either way, prefer reading keys from environment variables rather than hard-codi
 
 plugins/posthog.client.js
 
-PostHog AI
-
 ```javascript
 import { defineNuxtPlugin, useRuntimeConfig } from '#imports'
+
 import posthog from 'posthog-js'
+
 export default defineNuxtPlugin(() => {
   const runtimeConfig = useRuntimeConfig()
   const posthogClient = posthog.init(runtimeConfig.public.posthogToken, {
@@ -107,6 +95,7 @@ export default defineNuxtPlugin(() => {
       if (import.meta.env.MODE === 'development') posthog.debug()
     },
   })
+
   return {
     provide: {
       posthog: () => posthogClient,
@@ -119,8 +108,6 @@ PostHog can then be accessed throughout your Nuxt.js using the provider accessor
 
 Vue
 
-PostHog AI
-
 ```html
 <script setup>
    const { $posthog } = useNuxtApp()
@@ -140,8 +127,6 @@ If your app calls your own backend, `tracing_headers` adds `X-POSTHOG-DISTINCT-I
 
 JavaScript
 
-PostHog AI
-
 ```javascript
 posthog.init('<ph_project_token>', {
   api_host: 'https://us.i.posthog.com',
@@ -176,14 +161,16 @@ For certain features like [heatmaps](/docs/toolbar/heatmaps.md), your Web Applic
 
 **US**: `44.205.89.55`, `52.4.194.122`, `44.208.188.173`
 
-These are public, stable IPs used by PostHog services (e.g., Celery tasks for snapshots).
+These are public, stable IPs used by PostHog services.
+
+PostHog captures heatmap screenshots using [Browserless](https://www.browserless.io), which has its own IP addresses. Browserless [publishes the current list here](https://docs.browserless.io/baas/troubleshooting/whitelisting-ips).
+
+An allowlist does not help when your app has a private address. For apps on an internal network, see [internal and intranet applications](/docs/session-replay/troubleshooting.md#internal-and-intranet-applications).
 
 ## Setting up PostHog on the server side
 
 Install `posthog-node` using your package manager:
 
-PostHog AI
-
 ### npm
 
 ```bash
@@ -212,8 +199,6 @@ Add your PostHog API key and host to your `nuxt.config.js` file, reading them fr
 
 nuxt.config.js
 
-PostHog AI
-
 ```javascript
 export default defineNuxtConfig({
   runtimeConfig: {
@@ -230,16 +215,16 @@ Initialize the PostHog Node client where you'd like to use it on the server side
 
 server/api/example.js
 
-PostHog AI
-
 ```javascript
-const runtimeConfig = useRuntimeConfig()
+  const runtimeConfig = useRuntimeConfig()
+
   const posthog = new PostHog(
     runtimeConfig.public.posthogToken,
     {
       host: runtimeConfig.public.posthogHost,
     }
   );
+
   posthog.capture({
     event: 'api_call',
     distinctId: distinctID,
@@ -249,6 +234,7 @@ const runtimeConfig = useRuntimeConfig()
     }
   })
   posthog.shutdown()
+
   return {
     message: "example response"
 ```

package/dist/global-skills/instrument-product-analytics/references/nuxt-js.md

@@ -1,10 +1,6 @@
 > AI agents: this is one page from PostHog's docs. Full index of Markdown docs for LLMs: https://posthog.com/llms.txt
 
-# Nuxt.js - Docs
-
-Copy page
-
-# Nuxt.js - Docs
+# Nuxt.js
 
 PostHog makes it easy to get data about usage of your [Nuxt.js](https://nuxt.com/) app. Integrating PostHog into your app enables analytics about user behavior, custom events capture, session replays, feature flags, and more.
 
@@ -25,8 +21,6 @@ For server-side event capture beyond error tracking, use the `posthog-node` SDK
 
 Install the PostHog Nuxt module using your package manager:
 
-PostHog AI
-
 ### npm
 
 ```bash
@@ -53,8 +47,6 @@ bun add @posthog/nuxt
 
 > **If your site sets a Content-Security-Policy**, it needs to allow PostHog. This applies to the snippet and to package installs alike: the SDK lazy-loads extra bundles (session replay, surveys) from PostHog's CDN, and sends events to the ingestion host. PostHog serves from subdomains of `posthog.com` that change over time, so allow the wildcard:
 >
-> PostHog AI
->
 > ```
 > script-src 'self' https://*.posthog.com;
 > connect-src 'self' https://*.posthog.com;
@@ -77,8 +69,6 @@ If your app calls your own backend, `tracing_headers` adds `X-POSTHOG-DISTINCT-I
 
 JavaScript
 
-PostHog AI
-
 ```javascript
 posthog.init('<ph_project_token>', {
   api_host: 'https://us.i.posthog.com',
@@ -97,8 +87,6 @@ Store your PostHog keys in environment variables rather than hard-coding them. A
 
 .env
 
-PostHog AI
-
 ```shell
 NUXT_PUBLIC_POSTHOG_KEY=<ph_project_token>
 NUXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
@@ -108,8 +96,6 @@ Then reference them when you add the module to your `nuxt.config.ts` file:
 
 nuxt.config.ts
 
-PostHog AI
-
 ```typescript
 export default defineNuxtConfig({
   modules: ['@posthog/nuxt'],
@@ -137,11 +123,10 @@ The module provides the `usePostHog()` composable which is auto-imported and ava
 
 app/pages/index.vue
 
-PostHog AI
-
 ```html
 <script setup>
 const posthog = usePostHog()
+
 // Capture a custom event
 posthog?.capture('button_clicked', { button_name: 'signup' })
 </script>
@@ -159,11 +144,11 @@ First, create a server utility to reuse the PostHog client across requests:
 
 server/utils/posthog.ts
 
-PostHog AI
-
 ```typescript
 import { PostHog } from 'posthog-node'
+
 let client: PostHog | null = null
+
 export function useServerPostHog(): PostHog {
   if (!client) {
     const config = useRuntimeConfig()
@@ -179,15 +164,15 @@ Then use it in your server routes:
 
 server/api/example.ts
 
-PostHog AI
-
 ```typescript
 export default defineEventHandler((event) => {
   const posthog = useServerPostHog()
+
   posthog.capture({
     distinctId: 'user_123',
     event: 'server_event',
   })
+
   return { success: true }
 })
 ```
@@ -214,7 +199,11 @@ For certain features like [heatmaps](/docs/toolbar/heatmaps.md), your Web Applic
 
 **US**: `44.205.89.55`, `52.4.194.122`, `44.208.188.173`
 
-These are public, stable IPs used by PostHog services (e.g., Celery tasks for snapshots).
+These are public, stable IPs used by PostHog services.
+
+PostHog captures heatmap screenshots using [Browserless](https://www.browserless.io), which has its own IP addresses. Browserless [publishes the current list here](https://docs.browserless.io/baas/troubleshooting/whitelisting-ips).
+
+An allowlist does not help when your app has a private address. For apps on an internal network, see [internal and intranet applications](/docs/session-replay/troubleshooting.md#internal-and-intranet-applications).
 
 ## Feature flags
 
@@ -222,13 +211,12 @@ The module provides auto-imported composables for feature flags. All composables
 
 Vue
 
-PostHog AI
-
 ```html
 <script setup>
 const isEnabled = useFeatureFlagEnabled('new-feature')
 // returns true, false, or undefined
 </script>
+
 <template>
   <div v-if="isEnabled">Feature is enabled!</div>
 </template>
@@ -236,13 +224,12 @@ const isEnabled = useFeatureFlagEnabled('new-feature')
 
 Vue
 
-PostHog AI
-
 ```html
 <script setup>
 const variant = useFeatureFlagVariantKey('experiment')
 // returns the variant string, true/false, or undefined
 </script>
+
 <template>
   <div v-if="variant === 'control'">Control group</div>
   <div v-else-if="variant === 'test'">Test group</div>
@@ -251,13 +238,12 @@ const variant = useFeatureFlagVariantKey('experiment')
 
 Vue
 
-PostHog AI
-
 ```html
 <script setup>
 const payload = useFeatureFlagPayload('config-flag')
 // returns any JSON value or undefined
 </script>
+
 <template>
   <div v-if="payload">Config: {{ payload.value }}</div>
 </template>