https://posthog.com/component---src-pages-products-index-tsx-3fabf891d8aba468ec51.js

1"use strict";(self.webpackChunkposthog_com=self.webpackChunkposthog_com||[]).push([[1464],{7116:function(e,t,s){s.r(t),s.d(t,{default:function(){return O}});var a=s(19371),l=s(30758),r=s(63629),n=s(8462),o=s(60086),i=s(49271),d=s(76591),c=s(2212),u=s(93747),m=s(20787),x=s(99754),p=s(55442),f=s(31925),h=s(52416),g=s(2362),b=s(39106),v=s(86070);function y(e,t){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),s.push.apply(s,a)}return s}function w(e){for(var t=1;t<arguments.length;t++){var s=null!=arguments[t]?arguments[t]:{};t%2?y(Object(s),!0).forEach(function(t){(0,a.A)(e,t,s[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):y(Object(s)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(s,t))})}return e}const j={beta:"bg-yellow",alpha:"bg-orange",WIP:"bg-red"},N=[{title:"Context warehouse",description:"Having all your product data in one place means you can make more informed decisions. Push all your data to PostHog, then send it anywhere else you need, too.",link:{label:"Data stack README",url:"/context-warehouse"},groups:[{label:"Data I/O",handles:["data_in","data_out"],afterLink:{label:"View all integrations",url:"/context-warehouse/integrations-library"}},{label:"Manage & query",colSpan:2,columns:[["data_modeling","data_warehouse","cdp"],["sql_editor","bi"]]}]},{title:"Automatic tooling",description:(0,v.jsxs)(v.Fragment,{children:["In a previous era of building products, you'd need to configure event tracking and feature flags manually. Now, your AI coding agent can use the"," ",(0,v.jsx)(c.A,{to:"/docs/model-context-protocol",state:{newWindow:!0},className:"font-semibold",children:"PostHog MCP"})," ","to configure PostHog without leaving your"," ",(0,v.jsx)(f.A,{trigger:(0,v.jsx)("span",{className:"border-b border-primary border-dotted",children:"ADE"}),children:(0,v.jsx)("span",{children:"AI development environment – like Claude Code, Cursor, and more."})}),"."]}),link:[{label:"Tooling README",url:"/tooling"},{label:"Instructions for LLMs",url:"/docs/ai-engineering/markdown-llms-txt"}],groups:[{label:"Understand product usage",colSpan:2,columns:[["web_analytics","product_analytics","trends"],["funnels","user_paths","lifecycle","heatmaps"],["ai_observability","llm_evals","activity"]]},{label:"Debug & fix issues",handles:["error_tracking","logs","traces","session_replay","profiles"]},{label:"Ship features & get feedback",colSpan:2,columns:[["feature_flags","experiments","no_code_ab_testing","early_access","endpoints","webhooks"],["workflows_emails","surveys","support","user_interviews"]]}]}],k=[{slide:"analytics",text:"Why has my traffic decreased?",videoId:"pmh9dvfgj4"},{slide:"analytics",text:"Create an SEO/SEM dashboard for my marketing team",videoId:"79pshye67k"},{slide:"analytics",text:"Find issues with page performance",videoId:"1fxx4escag"},{slide:"replay",text:"Watch user sessions to find UX issues",videoId:"39pr1b86tw"},{slide:"replay",text:"Show me recordings of visitors using a feature",videoId:"1bct5lkhxh"},{slide:"feature-flags",text:"Create a feature flag",videoId:"lqo8v51lw6"},{slide:"data-warehouse",text:"Write a SQL query",videoId:"lw11gbdm03"}],_="inline-flex size-9 cursor-pointer items-center justify-center rounded-md border border-primary bg-primary text-secondary shadow-md transition-colors hover:bg-accent hover:text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue";function I(e){let{handle:t}=e;const s=(0,o.A)({handle:t}),a=null==s?void 0:s.Icon;return(0,v.jsxs)("div",{className:"flex items-center gap-2",children:[a&&(0,v.jsx)(a,{className:"size-5 text-"+(null==s?void 0:s.color)}),(0,v.jsx)("h2",{className:"!m-0",children:null==s?void 0:s.name})]})}const A=()=>{const e=(0,l.useRef)(null),t=(0,l.useRef)(null),{0:s,1:a}=(0,l.useState)(0),{0:r,1:n}=(0,l.useState)(!0),o=()=>{t.current&&setTimeout(()=>{var e;null===(e=t.current)||void 0===e||e.scrollIntoView({behavior:"smooth",block:"nearest"})},100)};(0,l.useEffect)(()=>{n(!0)},[s]);const d=k[s],c=d.slide,u=k.map((e,t)=>w(w({},e),{},{globalIndex:t})),m=[{handle:"product_analytics",value:"analytics"},{handle:"session_replay",value:"replay"},{handle:"feature_flags",value:"feature-flags"},{handle:"data_warehouse",value:"data-warehouse"}].map(t=>{let{handle:l,value:r}=t;const n=u.filter(e=>e.slide===r);return{value:r,trigger:(0,v.jsx)(I,{handle:l}),content:(0,v.jsx)("div",{"data-scheme":"secondary",className:"flex flex-col px-6 gap-px",children:n.map(t=>(0,v.jsxs)(b.A,{size:"md",width:"full",align:"left",onClick:()=>{return(l=t.globalIndex)===s?(null===(r=e.current)||void 0===r||r.time(0),null===(n=e.current)||void 0===n||n.play()):a(l),void o();var l,r,n},className:'before:opacity-0 hover:!border-transparent before:content-["►"] before:text-base before:absolute before:-left-4 before:top-0.5 before:text-red dark:before:text-yellow active:!bg-transparent focus:!border-transparent '+(s===t.globalIndex?"font-bold before:opacity-100 !text-red dark:!text-yellow":"hover:underline hover:before:opacity-25 before:!text-primary"),children:['"',t.text,'"']},t.globalIndex))})}});return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)("h3",{className:"mt-0 mb-4 text-lg",children:"PostHog AI demos"}),(0,v.jsxs)("div",{className:"flex flex-col @2xl:flex-row gap-8",children:[(0,v.jsx)("div",{className:"@2xl:flex-[0_0_350px]",children:(0,v.jsx)("div",{className:"@2xl:max-w-lg",children:(0,v.jsx)(g.nD,{items:m,defaultValue:c,onValueChange:e=>{if(!e)return;const t=k.findIndex(t=>t.slide===e);-1!==t&&(a(t),o())}

1,triggerClassName:"[&_h2]:text-lg !bg-transparent"},c)})}),(0,v.jsxs)("div",{ref:t,className:"min-w-0 flex-1 flex flex-col items-center",children:[(0,v.jsx)("div",{className:"relative aspect-[4/3] w-full overflow-hidden rounded-md border border-primary bg-primary shadow-2xl",children:(0,v.jsx)(h.A,{ref:e,videoId:d.videoId,onEnd:()=>{a(e=>(e+1)%k.length)},className:"absolute inset-0 !aspect-auto [&_.w-chrome]:!rounded-md [&_video]:m-0 [&_.w-vulcan-v2]:!rounded-md [&_.w-chrome]:![clip-path:none]",hideInitialControls:!0,hideAudioControls:!0})}),(0,v.jsxs)("div",{className:"mt-4 flex items-center justify-center gap-2",children:[(0,v.jsx)("button",{type:"button",className:_,"aria-label":"Previous demo",onClick:()=>{a(e=>(e-1+k.length)%k.length)},children:(0,v.jsx)(i.IconFastForward,{className:"size-4 scale-x-[-1]"})}),(0,v.jsx)("button",{type:"button",className:_,"aria-label":r?"Pause demo":"Play demo",onClick:()=>{var t,s;r?null===(t=e.current)||void 0===t||t.pause():null===(s=e.current)||void 0===s||s.play();n(!r)},children:r?(0,v.jsx)(i.IconPauseFilled,{className:"size-4"}):(0,v.jsx)(i.IconPlayFilled,{className:"size-4"})}),(0,v.jsx)("button",{type:"button",className:_,"aria-label":"Next demo",onClick:()=>{a(e=>(e+1)%k.length)},children:(0,v.jsx)(i.IconFastForward,{className:"size-4"})})]})]})]})]})},P=e=>{let{product:t}=e;const s="WIP"===t.status;return(0,v.jsxs)("button",{onClick:e=>{e.preventDefault(),s||(0,r.navigate)("/"+t.slug,{state:{newWindow:!0}})},className:"flex items-center gap-2 py-0.5 group text-left w-full "+(s?"cursor-default opacity-60":"cursor-pointer"),children:[t.Icon&&l.createElement(t.Icon,{className:"size-6 shrink-0 text-"+t.color}),(0,v.jsx)("span",{className:"text-[15px] font-medium text-primary "+(s?"":"group-hover:underline underline-offset-2"),children:t.name}),t.status&&(0,v.jsx)("span",{className:"size-1.5 shrink-0 rounded-full "+(j[t.status]||"bg-muted")})]})};function C(){const e=(0,o.A)(),t=(0,l.useMemo)(()=>{const t={};for(const s of e)t[s.handle]=s;return t},[e]);return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(n.Ay,{title:"Products – PostHog",description:"PostHog is the cracked technical co-founder that handles all the stuff you used to worry about.",image:"/images/og/default.png"}),(0,v.jsxs)(d.A,{maxWidth:900,children:[(0,v.jsxs)("div",{className:"space-y-10 [&_p]:text-base [&_li]:text-base",children:[(0,v.jsxs)("header",{className:"grid gap-4 py-8 text-center @xl:text-left @3xl:grid-cols-[minmax(0,1.25fr)_minmax(15rem,1fr)] @3xl:items-center @3xl:gap-8",children:[(0,v.jsx)("div",{className:"order-1 flex justify-center @3xl:order-2",children:(0,v.jsx)(u.A,{src:"https://res.cloudinary.com/dmukukwp6/image/upload/hogzilla_self_driving_486ef58706.png",imgClassName:"w-72 max-w-full @xl:w-56 @3xl:w-80"})}),(0,v.jsxs)("div",{className:"order-2 space-y-4 @3xl:order-1",children:[(0,v.jsxs)("h1",{className:"text-2xl @lg:text-3xl font-bold leading-tight",children:["Devtools and product data infrastructure for building"," ",(0,v.jsx)("span",{className:"bg-blue/10 dark:bg-blue/20 text-blue rounded-md px-1 whitespace-nowrap",children:"self-driving products"})]}),(0,v.jsx)("p",{className:"text-lg leading-relaxed",children:"Humans and AI agents build with PostHog because everything you need to collect and analyze product usage data – and build and ship new features – lives in one place."}),(0,v.jsx)(m.wj,{selfDriving:!0,showSecondaryActions:!1})]})]}),(0,v.jsx)(x.A,{tabs:p.f}),(0,v.jsx)("hr",{}),N.map(e=>(0,v.jsxs)("section",{className:"space-y-3",children:[(0,v.jsxs)("div",{className:"flex flex-wrap items-baseline justify-between gap-x-4 gap-y-0",children:[(0,v.jsx)("h2",{className:"text-xl font-bold m-0",children:e.title}),e.link&&(0,v.jsx)("aside",{className:"order-last @xl:order-none",children:(Array.isArray(e.link)?e.link:[e.link]).map((e,t,s)=>(0,v.jsxs)(l.Fragment,{children:[(0,v.jsxs)(c.A,{to:e.url,state:{newWindow:!0},className:"group inline-flex items-center gap-1 font-medium whitespace-nowrap",children:[e.label," ",(0,v.jsx)(i.IconArrowUpRight,{className:"size-3.5 text-secondary group-hover:text-primary"})]}),t<s.length-1&&(0,v.jsx)("span",{className:"text-secondary mx-1",children:" | "})]},e.url))}),(0,v.jsx)("p",{className:"text-[15px] leading-relaxed w-full mt-2 mb-0",children:e.description})]}),(0,v.jsx)("div",{className:"grid gap-x-8 gap-y-6 "+(e.groups.length>

1=3?"grid-cols-1 @lg:grid-cols-2 @2xl:grid-cols-3":"grid-cols-1 @3xl:grid-cols-3"),children:e.groups.map((e,s)=>{var a;if("columns"in e&&e.columns){const a=0===s,l=2===e.colSpan?a?"@lg:col-span-2 @2xl:col-span-3":"@lg:col-span-2":"";return(0,v.jsxs)("div",{className:l,children:[e.label&&(0,v.jsx)("h3",{className:"text-sm font-semibold uppercase text-secondary mb-1.5",children:e.label}),(0,v.jsx)("div",{className:"grid gap-x-4 @lg:gap-x-8 gap-y-1 "+(a?"@lg:grid-cols-2 @3xl:grid-cols-3":"@lg:grid-cols-2"),children:e.columns.map((e,s)=>(0,v.jsx)("div",{className:"space-y-1.5",children:e.map(e=>{const s=t[e];return s?(0,v.jsx)(P,{product:s},e):null})},s))})]},s)}return(0,v.jsxs)("div",{className:"space-y-1",children:[e.label&&(0,v.jsx)("h3",{className:"text-sm font-semibold uppercase text-secondary mb-1.5",children:e.label}),null===(a=e.handles)||void 0===a?void 0:a.map(e=>{const s=t[e];return s?(0,v.jsx)(P,{product:s},e):null}),"afterLink"in e&&e.afterLink&&(0,v.jsxs)(c.A,{to:e.afterLink.url,state:{newWindow:!0},className:"inline-flex items-center gap-1 text-sm font-bold mt-2",children:[e.afterLink.label," ",(0,v.jsx)(i.IconArrowRight,{className:"size-3.5"})]})]},s)})})]},e.title)),(0,v.jsxs)("div",{children:[(0,v.jsx)("h2",{className:"text-xl font-bold m-0",children:"Data exploration"}),(0,v.jsxs)("p",{className:"text-[15px] leading-relaxed !mt-4",children:["Instead of building insights from scratch, chat with"," ",(0,v.jsx)(c.A,{to:"/ai",state:{newWindow:!0},className:"font-semibold",children:"PostHog AI"})," ","to have it do the hard work for you. If you want to do a deep dive, try"," ",(0,v.jsx)(c.A,{to:"/notebooks",state:{newWindow:!0},className:"font-semibold",children:"Notebooks"})," ","where you can compile multiple insights and write up your findings on an infinite canvas. And if you want to monitor metrics over time, save them to"," ",(0,v.jsx)(c.A,{to:"/dashboards",state:{newWindow:!0},className:"font-semibold",children:"Dashboards"}),"."]}),(0,v.jsx)(A,{})]})]}),(0,v.jsx)("h2",{children:"Try it – free"}),(0,v.jsxs)("p",{className:"text-[15px] leading-relaxed",children:["We've got a"," ",(0,v.jsx)(c.A,{href:"/pricing",state:{newWindow:!0},className:"font-semibold",children:"generous free tier"}),", so you can kick the tires without even entering a credit card."]}),(0,v.jsx)(m.kO,{})]})]})}function O(){return(0,v.jsx)(C,{})}},52416:function(e,t,s){var a=s(30758),l=s(86070);const r=(0,a.forwardRef)((e,t)=>{let{videoId:s,className:r="",onEnd:n,hideInitialControls:o=!1,hideAudioControls:i=!1,autoPlay:d=!0}=e;const c=(0,a.useRef)(null),u=(0,a.useRef)(null),m=(0,a.useRef)(null);(0,a.useImperativeHandle)(t,()=>({play:()=>{var e;return null===(e=u.current)||void 0===e?void 0:e.play()},pause:()=>{var e;return null===(e=u.current)||void 0===e?void 0:e.pause()},time:e=>{var t,s;void 0!==e&&(null===(s=u.current)||void 0===s||s.time(e));return(null===(t=u.current)||void 0===t?void 0:t.time())||0}}));const x=(0,a.useRef)(n);return x.current=n,(0,a.useEffect)(()=>{if("undefined"==typeof window||!c.current)return;let e=!0;const t=()=>{if(u.current&&m.current)try{u.current.unbind("end",m.current)}catch(e){}m.current=null,u.current=null,c.current&&(c.current.innerHTML="")},a=()=>{if(!e||!c.current)return;const t=document.createElement("div");t.className="wistia_embed wistia_async_"+s+" videoFoam=true "+(o?"controlsVisibleOnLoad=false playButtonVisible=false":"")+" "+(i?"volumeControl=false":""),t.style.width="100%",t.style.height="100%",c.current.appendChild(t);const a=()=>{var s;if(!e)return;const l=null===(s=window.Wistia)||void 0===s?void 0:s.api(t);l?(u.current=l,l.mute(),m.current=()=>{var t;e&&(null===(t=x.current)||void 0===t||t.call(x))},l.bind("end",m.current),d&&l.play()):setTimeout(a,100)};setTimeout(a,100)};if(t(),window.Wistia)a();else{const t=document.createElement("script");t.src="https://fast.wistia.com/assets/external/E-v1.js",t.async=!0,t.onload=()=>{e&&a()},document.head.appendChild(t)}return()=>{e=!1,t()}},[s,d]),(0,l.jsx)("div",{ref:c,className:"aspect-square "+r})});r.displayName="WistiaVideo",t.A=r}}]);
2//# sourceMappingURL=component---src-pages-products-index-tsx-3fabf891d8aba468ec51.js.map