feat(blog): created first page (#1550)

* feat(blog): created first page

* feat(building): first draft blog complete

Author: emir-karabeg

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/openai-n8n-sim.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/openai-vs-n8n-vs-sim/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)/building/page.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/(landing)/components/nav/nav.tsx

@@ -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]
 }