v0.4.7: blog

apps/sim/app/(landing)/building/layout.tsx

@@ -0,0 +1,14 @@
+import { Footer, Nav } from '@/app/(landing)/components'
+
+/**
+ * Layout for the building/blog section with navigation and footer
+ */
+export default function BuildingLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Nav hideAuthButtons={false} variant='landing' />
+      <main className='relative'>{children}</main>
+      <Footer />
+    </>
+  )
+}

apps/sim/app/(landing)/building/openai-vs-n8n-vs-sim/page.tsx

@@ -0,0 +1,139 @@
+import type { Metadata } from 'next'
+import OpenAiN8nSim from './openai-n8n-sim'
+
+const baseUrl = 'https://sim.ai'
+const canonicalUrl = `${baseUrl}/building/openai-vs-n8n-vs-sim`
+
+export const metadata: Metadata = {
+  title: 'OpenAI AgentKit vs n8n vs Sim: AI Agent Workflow Builder Comparison | Sim',
+  description:
+    'Compare OpenAI AgentKit, n8n, and Sim for building AI agent workflows. Explore key differences in capabilities, integrations, collaboration, and which platform best fits your production AI agent needs.',
+  keywords: [
+    'AgentKit',
+    'AI agents',
+    'AI agent development',
+    'agents',
+    'workflow builder',
+    'visual workflow builder',
+    'workflows',
+    'OpenAI AgentKit',
+    'OpenAI',
+    'OpenAI Responses API',
+    'n8n',
+    'n8n workflow automation',
+    'AI workflow automation',
+    'workflow automation platform',
+    'Sim',
+    'agent builder comparison',
+    'RAG agents',
+    'RAG systems',
+    'retrieval augmented generation',
+    'ChatKit',
+    'agent evaluation',
+    'prompt optimization',
+    'multi-agent systems',
+    'team collaboration workflows',
+    'production AI agents',
+    'AI guardrails',
+    'workflow integrations',
+    'self-hosted AI agents',
+    'cloud AI agent platform',
+    'MCP protocol',
+    'Model Context Protocol',
+    'knowledge base integration',
+    'vector embeddings',
+    'AI agent canvas',
+    'agentic workflows',
+    'AI agent API',
+    'AI chatbot workflows',
+    'business process automation',
+    'AI Copilot',
+    'workflow copilot',
+    'AI assistant for workflows',
+    'vector search',
+    'semantic search',
+    'pgvector',
+    'knowledge base AI',
+    'document embeddings',
+    'execution logging',
+    'workflow monitoring',
+    'AI agent observability',
+    'workflow debugging',
+    'execution traces',
+    'AI workflow logs',
+    'intelligent chunking',
+    'context-aware search',
+  ],
+  authors: [{ name: 'Emir Karabeg', url: 'https://x.com/karabegemir' }],
+  creator: 'Emir Karabeg',
+  publisher: 'Sim',
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+  alternates: {
+    canonical: canonicalUrl,
+  },
+  openGraph: {
+    title: 'OpenAI AgentKit vs n8n vs Sim: AI Agent Workflow Builder Comparison',
+    description:
+      'Compare OpenAI AgentKit, n8n, and Sim for building AI agent workflows. Explore key differences in capabilities, integrations, and which platform fits your production needs.',
+    url: canonicalUrl,
+    siteName: 'Sim',
+    locale: 'en_US',
+    type: 'article',
+    publishedTime: '2025-10-06T00:00:00.000Z',
+    modifiedTime: '2025-10-06T00:00:00.000Z',
+    authors: ['Emir Karabeg'],
+    section: 'Technology',
+    tags: [
+      'AI Agents',
+      'Workflow Automation',
+      'OpenAI AgentKit',
+      'n8n',
+      'Sim',
+      'AgentKit',
+      'AI Development',
+      'RAG',
+      'MCP Protocol',
+    ],
+    images: [
+      {
+        url: `${baseUrl}/building/openai-vs-n8n-vs-sim/workflow.png`,
+        width: 1200,
+        height: 630,
+        alt: 'Sim AI agent workflow builder interface comparison',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'OpenAI AgentKit vs n8n vs Sim: AI Agent Workflow Builder Comparison',
+    description:
+      'Compare OpenAI AgentKit, n8n, and Sim for building AI agent workflows. Explore key differences in capabilities, integrations, and which platform fits your production needs.',
+    images: ['/building/openai-vs-n8n-vs-sim/workflow.png'],
+    creator: '@karabegemir',
+    site: '@simai',
+  },
+  other: {
+    'article:published_time': '2025-10-06T00:00:00.000Z',
+    'article:modified_time': '2025-10-06T00:00:00.000Z',
+    'article:author': 'Emir Karabeg',
+    'article:section': 'Technology',
+  },
+}
+
+/**
+ * Blog post page comparing OpenAI AgentKit, n8n, and Sim workflow builders for AI agents.
+ * Optimized for SEO with structured data, canonical URLs, and comprehensive metadata.
+ */
+export default function Page() {
+  return <OpenAiN8nSim />
+}

apps/sim/app/(landing)/building/page.tsx

@@ -0,0 +1,8 @@
+import { redirect } from 'next/navigation'
+
+/**
+ * Redirects /building to the latest blog post
+ */
+export default function BuildingPage() {
+  redirect('/building/openai-vs-n8n-vs-sim')
+}

apps/sim/app/(landing)/components/nav/nav.tsx

@@ -20,7 +20,7 @@ interface NavProps {
 }
 
 export default function Nav({ hideAuthButtons = false, variant = 'landing' }: NavProps = {}) {
-  const [githubStars, setGithubStars] = useState('15.4k')
+  const [githubStars, setGithubStars] = useState('16.3k')
   const [isHovered, setIsHovered] = useState(false)
   const [isLoginHovered, setIsLoginHovered] = useState(false)
   const router = useRouter()

apps/sim/app/layout.tsx

@@ -1,11 +1,10 @@
-import { Analytics } from '@vercel/analytics/next'
 import type { Metadata, Viewport } from 'next'
 import { PublicEnvScript } from 'next-runtime-env'
 import { BrandedLayout } from '@/components/branded-layout'
 import { generateThemeCSS } from '@/lib/branding/inject-theme'
 import { generateBrandedMetadata, generateStructuredData } from '@/lib/branding/metadata'
-import { isHosted } from '@/lib/environment'
 import { createLogger } from '@/lib/logs/console/logger'
+import { PostHogProvider } from '@/lib/posthog/provider'
 import '@/app/globals.css'
 
 import { SessionProvider } from '@/lib/session/session-context'
@@ -55,7 +54,6 @@ export const viewport: Viewport = {
   ],
 }
 
-// Generate dynamic metadata based on brand configuration
 export const metadata: Metadata = generateBrandedMetadata()
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -91,19 +89,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <PublicEnvScript />
       </head>
       <body suppressHydrationWarning>
-        <ThemeProvider>
-          <SessionProvider>
-            <BrandedLayout>
-              <ZoomPrevention />
-              {children}
-              {isHosted && (
-                <>
-                  <Analytics />
-                </>
-              )}
-            </BrandedLayout>
-          </SessionProvider>
-        </ThemeProvider>
+        <PostHogProvider>
+          <ThemeProvider>
+            <SessionProvider>
+              <BrandedLayout>
+                <ZoomPrevention />
+                {children}
+              </BrandedLayout>
+            </SessionProvider>
+          </ThemeProvider>
+        </PostHogProvider>
       </body>
     </html>
   )

apps/sim/app/sitemap.ts

@@ -37,8 +37,18 @@ export default function sitemap(): MetadataRoute.Sitemap {
     },
   ]
 
+  // Blog posts and content pages
+  const blogPages = [
+    {
+      url: `${baseUrl}/building/openai-vs-n8n-vs-sim`,
+      lastModified: new Date('2025-10-06'),
+      changeFrequency: 'monthly' as const,
+      priority: 0.9,
+    },
+  ]
+
   // You can add dynamic pages here by fetching from database
   // const dynamicPages = await fetchDynamicPages()
 
-  return [...staticPages]
+  return [...staticPages, ...blogPages]
 }

apps/sim/instrumentation-client.ts

@@ -5,34 +5,7 @@
  * It respects the user's telemetry preferences stored in localStorage.
  *
  */
-import posthog from 'posthog-js'
-import { env, getEnv, isTruthy } from './lib/env'
-
-// Initialize PostHog only if explicitly enabled
-if (isTruthy(getEnv('NEXT_PUBLIC_POSTHOG_ENABLED')) && getEnv('NEXT_PUBLIC_POSTHOG_KEY')) {
-  posthog.init(getEnv('NEXT_PUBLIC_POSTHOG_KEY')!, {
-    api_host: '/ingest',
-    ui_host: 'https://us.posthog.com',
-    person_profiles: 'identified_only',
-    capture_pageview: true,
-    capture_pageleave: true,
-    capture_performance: true,
-    session_recording: {
-      maskAllInputs: false,
-      maskInputOptions: {
-        password: true,
-        email: false,
-      },
-      recordCrossOriginIframes: false,
-      recordHeaders: true,
-      recordBody: true,
-    },
-    autocapture: true,
-    capture_dead_clicks: true,
-    persistence: 'localStorage+cookie',
-    enable_heatmaps: true,
-  })
-}
+import { env } from './lib/env'
 
 if (typeof window !== 'undefined') {
   const TELEMETRY_STATUS_KEY = 'simstudio-telemetry-status'

apps/sim/lib/posthog/provider.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useEffect } from 'react'
+import posthog from 'posthog-js'
+import { PostHogProvider as PHProvider } from 'posthog-js/react'
+import { getEnv, isTruthy } from '../env'
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    const posthogEnabled = getEnv('NEXT_PUBLIC_POSTHOG_ENABLED')
+    const posthogKey = getEnv('NEXT_PUBLIC_POSTHOG_KEY')
+
+    if (isTruthy(posthogEnabled) && posthogKey && !posthog.__loaded) {
+      posthog.init(posthogKey, {
+        api_host: '/ingest',
+        ui_host: 'https://us.posthog.com',
+        defaults: '2025-05-24',
+        person_profiles: 'identified_only',
+        capture_pageview: true,
+        capture_pageleave: true,
+        capture_performance: true,
+        session_recording: {
+          maskAllInputs: false,
+          maskInputOptions: {
+            password: true,
+            email: false,
+          },
+          recordCrossOriginIframes: false,
+          recordHeaders: true,
+          recordBody: true,
+        },
+        autocapture: true,
+        capture_dead_clicks: true,
+        persistence: 'localStorage+cookie',
+        enable_heatmaps: true,
+      })
+    }
+  }, [])
+
+  return <PHProvider client={posthog}>{children}</PHProvider>
+}