feat(templates): landing page templates workflow states

Author: icecrasher321

apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data.ts

@@ -35,6 +35,8 @@ export interface PreviewWorkflow {
   color: string
   blocks: PreviewBlock[]
   edges: Array<{ id: string; source: string; target: string }>
+  /** Public JSON export used to seed the landing-page import flow */
+  seedPath?: string
 }
 
 /**

apps/sim/app/(home)/components/templates/template-workflows.ts

@@ -8,6 +8,7 @@ const OCR_INVOICE_WORKFLOW: PreviewWorkflow = {
   id: 'tpl-ocr-invoice',
   name: 'OCR Invoice to DB',
   color: '#2ABBF8',
+  seedPath: '/landing-page-templates/ocr-invoice-db-d502887e-8750-40a3-a98b-fb2a4e725a4d.json',
   blocks: [
     {
       id: 'starter-1',
@@ -57,6 +58,7 @@ const GITHUB_RELEASE_WORKFLOW: PreviewWorkflow = {
   id: 'tpl-github-release',
   name: 'GitHub Release Agent',
   color: '#00F701',
+  seedPath: '/landing-page-templates/gh-release-agent-d3bed10e-fc87-4fdb-b458-80d8e43757d3.json',
   blocks: [
     {
       id: 'github-1',
@@ -108,6 +110,8 @@ const MEETING_FOLLOWUP_WORKFLOW: PreviewWorkflow = {
   id: 'tpl-meeting-followup',
   name: 'Meeting Follow-up Agent',
   color: '#FFCC02',
+  seedPath:
+    '/landing-page-templates/meeting-followup-agent-a2357a2f-67f7-40c1-8e64-301bcd604239.json',
   blocks: [
     {
       id: 'gcal-1',
@@ -159,6 +163,7 @@ const CV_SCANNER_WORKFLOW: PreviewWorkflow = {
   id: 'tpl-cv-scanner',
   name: 'CV/Resume Scanner',
   color: '#FA4EDF',
+  seedPath: '/landing-page-templates/resume-parser-d083c931-8788-4c6e-814c-0788830e164d.json',
   blocks: [
     {
       id: 'starter-2',
@@ -208,6 +213,7 @@ const EMAIL_TRIAGE_WORKFLOW: PreviewWorkflow = {
   id: 'tpl-email-triage',
   name: 'Email Triage Agent',
   color: '#FF6B2C',
+  seedPath: '/landing-page-templates/email-triage-57e84f83-c583-4e74-b73a-080d25f2074d.json',
   blocks: [
     {
       id: 'gmail-2',
@@ -273,6 +279,7 @@ const COMPETITOR_MONITOR_WORKFLOW: PreviewWorkflow = {
   id: 'tpl-competitor-monitor',
   name: 'Competitor Monitor',
   color: '#6366F1',
+  seedPath: '/landing-page-templates/competitor-monitor-52454688-49ae-4279-894a-aa6494f10e3a.json',
   blocks: [
     {
       id: 'schedule-1',
@@ -325,6 +332,7 @@ const SOCIAL_LISTENING_WORKFLOW: PreviewWorkflow = {
   id: 'tpl-social-listening',
   name: 'Social Listening Agent',
   color: '#F43F5E',
+  seedPath: '/landing-page-templates/brand-mention-d2578496-d153-4db1-8ef1-c738cfa94a96.json',
   blocks: [
     {
       id: 'schedule-2',
@@ -377,6 +385,7 @@ const DATA_ENRICHMENT_WORKFLOW: PreviewWorkflow = {
   id: 'tpl-data-enrichment',
   name: 'Data Enrichment Pipeline',
   color: '#14B8A6',
+  seedPath: '/landing-page-templates/lead-enricher-6ed8dede-1df6-4962-95f4-887abf524b38.json',
   blocks: [
     {
       id: 'starter-3',
@@ -426,6 +435,8 @@ const FEEDBACK_DIGEST_WORKFLOW: PreviewWorkflow = {
   id: 'tpl-feedback-digest',
   name: 'Customer Feedback Digest',
   color: '#F59E0B',
+  seedPath:
+    '/landing-page-templates/customer-feedback-digest-2a1c59de-fdcc-4ae0-b448-69a58b36c29a.json',
   blocks: [
     {
       id: 'schedule-3',
@@ -478,6 +489,7 @@ const PR_REVIEW_WORKFLOW: PreviewWorkflow = {
   id: 'tpl-pr-review',
   name: 'PR Review Agent',
   color: '#06B6D4',
+  seedPath: '/landing-page-templates/pr-review-cb5f2d92-a324-4958-8303-4710c572b71d.json',
   blocks: [
     {
       id: 'github-2',
@@ -529,6 +541,7 @@ const KNOWLEDGE_QA_WORKFLOW: PreviewWorkflow = {
   id: 'tpl-knowledge-qa',
   name: 'Knowledge Base QA',
   color: '#84CC16',
+  seedPath: '/landing-page-templates/knowledge-base-qa-e9dcd9f1-18bd-4163-b5d8-3e239a297526.json',
   blocks: [
     {
       id: 'starter-4',

apps/sim/app/(home)/components/templates/templates.tsx

@@ -1,13 +1,17 @@
 'use client'
 
-import { useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
+import { createLogger } from '@sim/logger'
 import { type MotionValue, motion, useScroll, useTransform } from 'framer-motion'
 import dynamic from 'next/dynamic'
-import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 import { Badge, ChevronDown } from '@/components/emcn'
+import { LandingWorkflowSeedStorage } from '@/lib/core/utils/browser-storage'
 import { cn } from '@/lib/core/utils/cn'
 import { TEMPLATE_WORKFLOWS } from '@/app/(home)/components/templates/template-workflows'
 
+const logger = createLogger('LandingTemplates')
+
 const LandingPreviewWorkflow = dynamic(
   () =>
     import(
@@ -344,6 +348,8 @@ const TEMPLATES_PANEL_ID = 'templates-panel'
 export default function Templates() {
   const sectionRef = useRef<HTMLDivElement>(null)
   const [activeIndex, setActiveIndex] = useState(0)
+  const [isPreparingTemplate, setIsPreparingTemplate] = useState(false)
+  const router = useRouter()
 
   const { scrollYProgress } = useScroll({
     target: sectionRef,
@@ -353,6 +359,45 @@ export default function Templates() {
   const activeWorkflow = TEMPLATE_WORKFLOWS[activeIndex]
   const activeDepth = DEPTH_CONFIGS[activeWorkflow.id]
 
+  const handleUseTemplate = useCallback(async () => {
+    if (isPreparingTemplate) return
+
+    setIsPreparingTemplate(true)
+
+    try {
+      if (activeWorkflow.seedPath) {
+        const response = await fetch(activeWorkflow.seedPath)
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch template seed: ${response.status}`)
+        }
+
+        const workflowJson = await response.text()
+        LandingWorkflowSeedStorage.store({
+          templateId: activeWorkflow.id,
+          workflowName: activeWorkflow.name,
+          color: activeWorkflow.color,
+          workflowJson,
+        })
+      }
+    } catch (error) {
+      logger.error('Failed to prepare landing template workflow seed', {
+        templateId: activeWorkflow.id,
+        error,
+      })
+    } finally {
+      setIsPreparingTemplate(false)
+      router.push('/signup')
+    }
+  }, [
+    activeWorkflow.color,
+    activeWorkflow.id,
+    activeWorkflow.name,
+    activeWorkflow.seedPath,
+    isPreparingTemplate,
+    router,
+  ])
+
   return (
     <section
       ref={sectionRef}
@@ -508,11 +553,13 @@ export default function Templates() {
                     fitViewOptions={{ padding: 0.15, maxZoom: 1.3 }}
                   />
                 </div>
-                <Link
-                  href='/signup'
-                  className='group/cta absolute top-[16px] right-[16px] z-10 inline-flex h-[32px] items-center gap-[6px] rounded-[5px] border border-[#33C482] bg-[#33C482] px-[10px] font-[430] font-season text-[14px] text-black transition-[filter] hover:brightness-110'
+                <button
+                  type='button'
+                  onClick={handleUseTemplate}
+                  disabled={isPreparingTemplate}
+                  className='group/cta absolute top-[16px] right-[16px] z-10 inline-flex h-[32px] cursor-pointer items-center gap-[6px] rounded-[5px] border border-[#33C482] bg-[#33C482] px-[10px] font-[430] font-season text-[14px] text-black transition-[filter] hover:brightness-110'
                 >
-                  Use template
+                  {isPreparingTemplate ? 'Preparing...' : 'Use template'}
                   <span className='relative h-[10px] w-[10px] shrink-0'>
                     <ChevronDown className='-rotate-90 absolute inset-0 h-[10px] w-[10px] transition-opacity duration-150 group-hover/cta:opacity-0' />
                     <svg
@@ -531,7 +578,7 @@ export default function Templates() {
                       />
                     </svg>
                   </span>
-                </Link>
+                </button>
               </div>
             </div>
 

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -2,8 +2,14 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { useParams } from 'next/navigation'
-import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
+import { useParams, useRouter } from 'next/navigation'
+import {
+  LandingPromptStorage,
+  LandingTemplateStorage,
+  type LandingWorkflowSeed,
+  LandingWorkflowSeedStorage,
+} from '@/lib/core/utils/browser-storage'
+import { persistImportedWorkflow } from '@/lib/workflows/operations/import-export'
 import { MessageContent, MothershipView, UserInput } from './components'
 import { useChat } from './hooks'
 
@@ -15,19 +21,80 @@ interface HomeProps {
 
 export function Home({ chatId }: HomeProps = {}) {
   const { workspaceId } = useParams<{ workspaceId: string }>()
+  const router = useRouter()
   const [inputValue, setInputValue] = useState('')
-  const hasCheckedLandingPromptRef = useRef(false)
+  const hasCheckedLandingStorageRef = useRef(false)
+
+  const createWorkflowFromLandingSeed = useCallback(
+    async (seed: LandingWorkflowSeed) => {
+      try {
+        const result = await persistImportedWorkflow({
+          content: seed.workflowJson,
+          filename: `${seed.workflowName}.json`,
+          workspaceId,
+          nameOverride: seed.workflowName,
+          descriptionOverride: seed.workflowDescription || 'Imported from landing template',
+          colorOverride: seed.color,
+          createWorkflow: async ({ name, description, color, workspaceId }) => {
+            const response = await fetch('/api/workflows', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                name,
+                description,
+                color,
+                workspaceId,
+              }),
+            })
+
+            if (!response.ok) {
+              const errorData = await response.json().catch(() => ({}))
+              throw new Error(errorData.error || 'Failed to create workflow')
+            }
+
+            return response.json()
+          },
+        })
+
+        if (result?.workflowId) {
+          window.location.href = `/workspace/${workspaceId}/w/${result.workflowId}`
+          return
+        }
+
+        logger.warn('Landing workflow seed did not produce a workflow', {
+          templateId: seed.templateId,
+        })
+      } catch (error) {
+        logger.error('Error creating workflow from landing workflow seed:', error)
+      }
+    },
+    [workspaceId]
+  )
 
   useEffect(() => {
-    if (hasCheckedLandingPromptRef.current) return
-    hasCheckedLandingPromptRef.current = true
+    if (hasCheckedLandingStorageRef.current) return
+    hasCheckedLandingStorageRef.current = true
+
+    const workflowSeed = LandingWorkflowSeedStorage.consume()
+    if (workflowSeed) {
+      logger.info('Retrieved landing page workflow seed, creating workflow in workspace')
+      void createWorkflowFromLandingSeed(workflowSeed)
+      return
+    }
+
+    const templateId = LandingTemplateStorage.consume()
+    if (templateId) {
+      logger.info('Retrieved landing page template, redirecting to template detail')
+      router.replace(`/workspace/${workspaceId}/templates/${templateId}?use=true`)
+      return
+    }
 
     const prompt = LandingPromptStorage.consume()
     if (prompt) {
       logger.info('Retrieved landing page prompt, populating home input')
       setInputValue(prompt)
     }
-  }, [])
+  }, [createWorkflowFromLandingSeed, workspaceId, router])
 
   const {
     messages,