feat(home): expand template examples with 83 categorized templates

apps/docs/package.json

@@ -29,8 +29,8 @@
     "next": "16.1.6",
     "next-themes": "^0.4.6",
     "postgres": "^3.4.5",
-    "react": "19.2.1",
-    "react-dom": "19.2.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "shiki": "4.0.0",
     "tailwind-merge": "^3.0.2"
   },

apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/index.ts

@@ -1 +1,3 @@
+export type { Category, ModuleTag, Tag, TemplatePrompt } from './consts'
+export { CATEGORY_META, MODULE_META, TEMPLATES } from './consts'
 export { TemplatePrompts } from './template-prompts'

apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx

@@ -1,96 +1,152 @@
-import type { ComponentType, SVGProps } from 'react'
+'use client'
+
+import { useState } from 'react'
 import Image from 'next/image'
-import { Search, Table } from '@/components/emcn/icons'
-import { GmailIcon, GoogleCalendarIcon } from '@/components/icons'
-import { MarkdownIcon } from '@/components/icons/document-icons'
-
-interface TemplatePrompt {
-  icon: ComponentType<SVGProps<SVGSVGElement>>
-  title: string
-  prompt: string
-  image: string
+import { ChevronDown } from '@/components/emcn/icons'
+import type { Category, ModuleTag } from './consts'
+import { CATEGORY_META, MODULE_META, TEMPLATES } from './consts'
+
+const FEATURED_TEMPLATES = TEMPLATES.filter((t) => t.featured)
+const EXTRA_TEMPLATES = TEMPLATES.filter((t) => !t.featured)
+
+/** Group non-featured templates by category, preserving category order. */
+function getGroupedExtras() {
+  const groups: { category: Category; label: string; templates: typeof TEMPLATES }[] = []
+  const byCategory = new Map<Category, typeof TEMPLATES>()
+
+  for (const t of EXTRA_TEMPLATES) {
+    const existing = byCategory.get(t.category)
+    if (existing) {
+      existing.push(t)
+    } else {
+      const arr = [t]
+      byCategory.set(t.category, arr)
+    }
+  }
+
+  for (const [key, meta] of Object.entries(CATEGORY_META)) {
+    const cat = key as Category
+    if (cat === 'popular') continue
+    const items = byCategory.get(cat)
+    if (items?.length) {
+      groups.push({ category: cat, label: meta.label, templates: items })
+    }
+  }
+
+  return groups
 }
 
-const TEMPLATES: TemplatePrompt[] = [
-  {
-    icon: Table,
-    title: 'Self-populating CRM',
-    prompt:
-      'Create a self-healing CRM table that keeps track of all my customers by integrating with my existing data sources. Schedule a recurring job every morning to automatically pull updates from all relevant data sources and keep my CRM up to date.',
-    image: '/templates/crm-light.png',
-  },
-  {
-    icon: GoogleCalendarIcon,
-    title: 'Meeting prep agent',
-    prompt:
-      'Create an agent that checks my calendar each morning, pulls context on every attendee and topic, and prepares a brief for each meeting so I walk in fully prepared.',
-    image: '/templates/meeting-prep-dark.png',
-  },
-  {
-    icon: MarkdownIcon,
-    title: 'Resolve todo list',
-    prompt:
-      'Create a file of all my todos then go one by one and check off every time a todo is done. Look at my calendar and see what I have to do.',
-    image: '/templates/todo-list-light.png',
-  },
-  {
-    icon: Search,
-    title: 'Research assistant',
-    prompt:
-      'Build an agent that takes a topic, searches the web for the latest information, summarizes key findings, and compiles them into a clean document I can review.',
-    image: '/templates/research-assistant-dark.png',
-  },
-  {
-    icon: GmailIcon,
-    title: 'Auto-reply agent',
-    prompt: 'Create a Gmail agent that drafts responses to relevant emails automatically.',
-    image: '/templates/gmail-agent-dark.png',
-  },
-  {
-    icon: Table,
-    title: 'Expense tracker',
-    prompt:
-      'Create a table that tracks all my expenses by pulling transactions from my connected accounts. Categorize each expense automatically and generate a weekly summary report.',
-    image: '/templates/expense-tracker-light.png',
-  },
-]
+const GROUPED_EXTRAS = getGroupedExtras()
+
+function ModulePills({ modules }: { modules: ModuleTag[] }) {
+  return (
+    <div className='flex flex-wrap gap-[4px]'>
+      {modules.map((mod) => (
+        <span
+          key={mod}
+          className='rounded-full bg-[var(--surface-3)] px-[6px] py-[1px] text-[11px] text-[var(--text-secondary)]'
+        >
+          {MODULE_META[mod].label}
+        </span>
+      ))}
+    </div>
+  )
+}
 
 interface TemplatePromptsProps {
   onSelect: (prompt: string) => void
 }
 
 export function TemplatePrompts({ onSelect }: TemplatePromptsProps) {
+  const [expanded, setExpanded] = useState(false)
+
   return (
-    <div className='grid grid-cols-3 gap-[16px]'>
-      {TEMPLATES.map((template) => {
-        const Icon = template.icon
-        return (
-          <button
-            key={template.title}
-            type='button'
-            onClick={() => onSelect(template.prompt)}
-            className='group flex cursor-pointer flex-col text-left'
-          >
-            <div className='overflow-hidden rounded-[10px] border border-[var(--border-1)]'>
-              <div className='relative h-[120px] w-full overflow-hidden'>
-                <Image
-                  src={template.image}
-                  alt={template.title}
-                  fill
-                  unoptimized
-                  className='object-cover transition-transform duration-300 group-hover:scale-105'
-                />
-              </div>
-              <div className='flex items-center gap-[6px] border-[var(--border-1)] border-t bg-[var(--white)] px-[10px] py-[6px] dark:bg-[var(--surface-4)]'>
-                <Icon className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
-                <span className='font-base text-[14px] text-[var(--text-body)]'>
-                  {template.title}
-                </span>
+    <div className='flex flex-col gap-[24px]'>
+      {/* Featured grid */}
+      <div className='grid grid-cols-3 gap-[16px]'>
+        {FEATURED_TEMPLATES.map((template) => (
+          <TemplateCard key={template.title} template={template} onSelect={onSelect} />
+        ))}
+      </div>
+
+      {/* Expand / collapse */}
+      <button
+        type='button'
+        onClick={() => setExpanded((prev) => !prev)}
+        aria-expanded={expanded}
+        className='flex items-center justify-center gap-[6px] text-[13px] text-[var(--text-secondary)] transition-colors hover:text-[var(--text-body)]'
+      >
+        {expanded ? (
+          <>
+            Show less <ChevronDown className='h-[14px] w-[14px] rotate-180' />
+          </>
+        ) : (
+          <>
+            More examples <ChevronDown className='h-[14px] w-[14px]' />
+          </>
+        )}
+      </button>
+
+      {/* Categorized extras */}
+      {expanded && (
+        <div className='flex flex-col gap-[32px]'>
+          {GROUPED_EXTRAS.map((group) => (
+            <div key={group.category} className='flex flex-col gap-[12px]'>
+              <h3 className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                {group.label}
+              </h3>
+              <div className='grid grid-cols-3 gap-[16px]'>
+                {group.templates.map((template) => (
+                  <TemplateCard key={template.title} template={template} onSelect={onSelect} />
+                ))}
               </div>
             </div>
-          </button>
-        )
-      })}
+          ))}
+        </div>
+      )}
     </div>
   )
 }
+
+interface TemplateCardProps {
+  template: (typeof TEMPLATES)[number]
+  onSelect: (prompt: string) => void
+}
+
+function TemplateCard({ template, onSelect }: TemplateCardProps) {
+  const Icon = template.icon
+
+  return (
+    <button
+      type='button'
+      onClick={() => onSelect(template.prompt)}
+      aria-label={`Select template: ${template.title}`}
+      className='group flex cursor-pointer flex-col text-left'
+    >
+      <div className='overflow-hidden rounded-[10px] border border-[var(--border-1)]'>
+        <div className='relative h-[120px] w-full overflow-hidden'>
+          {template.image ? (
+            <Image
+              src={template.image}
+              alt={template.title}
+              fill
+              unoptimized
+              className='object-cover transition-transform duration-300 group-hover:scale-105'
+            />
+          ) : (
+            <div className='flex h-full w-full items-center justify-center bg-[var(--surface-3)] transition-colors group-hover:bg-[var(--surface-4)]'>
+              <Icon className='h-[32px] w-[32px] text-[var(--text-icon)] opacity-40' />
+            </div>
+          )}
+        </div>
+        <div className='flex flex-col gap-[4px] border-[var(--border-1)] border-t bg-[var(--white)] px-[10px] py-[6px] dark:bg-[var(--surface-4)]'>
+          <div className='flex items-center gap-[6px]'>
+            <Icon className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
+            <span className='font-base text-[14px] text-[var(--text-body)]'>{template.title}</span>
+          </div>
+          <ModulePills modules={template.modules} />
+        </div>
+      </div>
+    </button>
+  )
+}

apps/sim/package.json

@@ -144,8 +144,8 @@
     "posthog-js": "1.334.1",
     "posthog-node": "5.9.2",
     "prismjs": "^1.30.0",
-    "react": "19.2.1",
-    "react-dom": "19.2.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "react-hook-form": "^7.54.2",
     "react-markdown": "^10.1.0",
     "react-simple-code-editor": "^0.14.1",

package.json

@@ -26,8 +26,8 @@
     "release": "bun run scripts/create-single-release.ts"
   },
   "overrides": {
-    "react": "19.2.1",
-    "react-dom": "19.2.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "next": "16.1.6",
     "@next/env": "16.1.6",
     "drizzle-orm": "^0.44.5",