feat(whitelabel): add in the ability to whitelabel via envvars (#887)

* feat(whitelabel): add in the ability to whitelabel via envvars

* restore site.webmanifest

* fix(dynamic): remove force-dynamic from routes that don't need it (#888)

* Reinstall dependencies

* Update docs

Author: waleedlatif1

.github/CONTRIBUTING.md

@@ -537,7 +537,7 @@ This visibility system ensures clean user interfaces while maintaining full flex
 
 ### Guidelines & Best Practices
 
-- **Code Style:** Follow the project's ESLint and Prettier configurations. Use meaningful variable names and small, focused functions.
+- **Code Style:** Follow the project's Biome configurations. Use meaningful variable names and small, focused functions.
 - **Documentation:** Clearly document the purpose, inputs, outputs, and any special behavior for your block/tool.
 - **Error Handling:** Implement robust error handling and provide user-friendly error messages.
 - **Parameter Visibility:** Always specify the appropriate visibility level for each parameter to ensure proper UI behavior and LLM integration.

apps/docs/content/docs/tools/file.mdx

@@ -50,7 +50,7 @@ The File Parser tool is particularly useful for scenarios where your agents need
 
 ## Usage Instructions
 
-Upload and extract contents from structured file formats including PDFs, CSV spreadsheets, and Word documents (DOCX). Upload files directly. Specialized parsers extract text and metadata from each format. You can upload multiple files at once and access them individually or as a combined document.
+Upload and extract contents from structured file formats including PDFs, CSV spreadsheets, and Word documents (DOCX). You can either provide a URL to a file or upload files directly. Specialized parsers extract text and metadata from each format. You can upload multiple files at once and access them individually or as a combined document.
 
 
 

apps/docs/content/docs/tools/hunter.mdx

@@ -38,6 +38,7 @@ With Hunter.io, you can:
 In Sim, the Hunter.io integration enables your agents to programmatically search for and verify email addresses, discover companies, and enrich contact data using Hunter.io’s API. This allows you to automate lead generation, contact enrichment, and email verification directly within your workflows. Your agents can leverage Hunter.io’s tools to streamline outreach, keep your CRM up-to-date, and power intelligent automation scenarios for sales, recruiting, and more.
 {/* MANUAL-CONTENT-END */}
 
+
 ## Usage Instructions
 
 Search for email addresses, verify their deliverability, discover companies, and enrich contact data using Hunter.io's powerful email finding capabilities.

apps/docs/content/docs/tools/knowledge.mdx

@@ -64,7 +64,7 @@ Search for similar content in a knowledge base using vector similarity
 | Parameter | Type | Required | Description |
 | --------- | ---- | -------- | ----------- |
 | `knowledgeBaseId` | string | Yes | ID of the knowledge base to search in |
-| `query` | string | Yes | Search query text |
+| `query` | string | No | Search query text \(optional when using tag filters\) |
 | `topK` | number | No | Number of most similar results to return \(1-100\) |
 | `tagFilters` | any | No | Array of tag filters with tagName and tagValue properties |
 

apps/docs/content/docs/tools/mistral_parse.mdx

@@ -79,7 +79,7 @@ The Mistral Parse tool is particularly useful for scenarios where your agents ne
 
 ## Usage Instructions
 
-Extract text and structure from PDF documents using Mistral's OCR API. Configure processing options and get the content in your preferred format. For URLs, they must be publicly accessible and point to a valid PDF file. Note: Google Drive, Dropbox, and other cloud storage links are not supported; use a direct download URL from a web server instead.
+Extract text and structure from PDF documents using Mistral's OCR API. Either enter a URL to a PDF document or upload a PDF file directly. Configure processing options and get the content in your preferred format. For URLs, they must be publicly accessible and point to a valid PDF file. Note: Google Drive, Dropbox, and other cloud storage links are not supported; use a direct download URL from a web server instead.
 
 
 

apps/docs/content/docs/tools/outlook.mdx

@@ -158,6 +158,10 @@ Send emails using Outlook
 | `to` | string | Yes | Recipient email address |
 | `subject` | string | Yes | Email subject |
 | `body` | string | Yes | Email body content |
+| `replyToMessageId` | string | No | Message ID to reply to \(for threading\) |
+| `conversationId` | string | No | Conversation ID for threading |
+| `cc` | string | No | CC recipients \(comma-separated\) |
+| `bcc` | string | No | BCC recipients \(comma-separated\) |
 
 #### Output
 

apps/sim/app/(auth)/layout.tsx

@@ -2,9 +2,12 @@
 
 import Image from 'next/image'
 import Link from 'next/link'
+import { useBrandConfig } from '@/lib/branding/branding'
 import { GridPattern } from '@/app/(landing)/components/grid-pattern'
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  const brand = useBrandConfig()
+
   return (
     <main className='relative flex min-h-screen flex-col bg-[#0C0C0C] font-geist-sans text-white'>
       {/* Background pattern */}
@@ -21,7 +24,17 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
       <div className='relative z-10 px-6 pt-9'>
         <div className='mx-auto max-w-7xl'>
           <Link href='/' className='inline-flex'>
-            <Image src='/sim.svg' alt='Sim Logo' width={42} height={42} />
+            {brand.logoUrl ? (
+              <img
+                src={brand.logoUrl}
+                alt={`${brand.name} Logo`}
+                width={42}
+                height={42}
+                className='h-[42px] w-[42px] object-contain'
+              />
+            ) : (
+              <Image src='/sim.svg' alt={`${brand.name} Logo`} width={42} height={42} />
+            )}
           </Link>
         </div>
       </div>

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

@@ -15,6 +15,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/components/ui/sheet'
+import { useBrandConfig } from '@/lib/branding/branding'
 import { usePrefetchOnHover } from '@/app/(landing)/utils/prefetch'
 
 // --- Framer Motion Variants ---
@@ -165,6 +166,7 @@ export default function NavClient({
   const [isMobile, setIsMobile] = useState(initialIsMobile ?? false)
   const [isSheetOpen, setIsSheetOpen] = useState(false)
   const _router = useRouter()
+  const brand = useBrandConfig()
 
   useEffect(() => {
     setMounted(true)
@@ -199,7 +201,17 @@ export default function NavClient({
           <div className='flex flex-1 items-center'>
             <div className='inline-block'>
               <Link href='/' className='inline-flex'>
-                <Image src='/sim.svg' alt='Sim Logo' width={42} height={42} />
+                {brand.logoUrl ? (
+                  <img
+                    src={brand.logoUrl}
+                    alt={`${brand.name} Logo`}
+                    width={42}
+                    height={42}
+                    className='h-[42px] w-[42px] object-contain'
+                  />
+                ) : (
+                  <Image src='/sim.svg' alt={`${brand.name} Logo`} width={42} height={42} />
+                )}
               </Link>
             </div>
           </div>

apps/sim/app/layout.tsx

@@ -1,8 +1,10 @@
 import { Analytics } from '@vercel/analytics/next'
 import { SpeedInsights } from '@vercel/speed-insights/next'
-import { GeistSans } from 'geist/font/sans'
 import type { Metadata, Viewport } from 'next'
 import { PublicEnvScript } from 'next-runtime-env'
+import { BrandedLayout } from '@/components/branded-layout'
+import { generateBrandedMetadata, generateStructuredData } from '@/lib/branding/metadata'
+import { env } from '@/lib/env'
 import { isHosted } from '@/lib/environment'
 import { createLogger } from '@/lib/logs/console/logger'
 import { getAssetUrl } from '@/lib/utils'
@@ -51,149 +53,20 @@ export const viewport: Viewport = {
   userScalable: false,
 }
 
-export const metadata: Metadata = {
-  title: {
-    template: '',
-    default: 'Sim',
-  },
-  description:
-    'Build and deploy AI agents using our Figma-like canvas. Build, write evals, and deploy AI agent workflows that automate workflows and streamline your business processes.',
-  applicationName: 'Sim',
-  authors: [{ name: 'Sim' }],
-  generator: 'Next.js',
-  keywords: [
-    'AI agent',
-    'AI agent builder',
-    'AI agent workflow',
-    'AI workflow automation',
-    'visual workflow editor',
-    'AI agents',
-    'workflow canvas',
-    'intelligent automation',
-    'AI tools',
-    'workflow designer',
-    'artificial intelligence',
-    'business automation',
-    'AI agent workflows',
-    'visual programming',
-  ],
-  referrer: 'origin-when-cross-origin',
-  creator: 'Sim',
-  publisher: 'Sim',
-  metadataBase: new URL('https://sim.ai'),
-  alternates: {
-    canonical: '/',
-    languages: {
-      'en-US': '/en-US',
-    },
-  },
-  robots: {
-    index: true,
-    follow: true,
-    googleBot: {
-      index: true,
-      follow: true,
-      'max-image-preview': 'large',
-      'max-video-preview': -1,
-      'max-snippet': -1,
-    },
-  },
-  openGraph: {
-    type: 'website',
-    locale: 'en_US',
-    url: 'https://sim.ai',
-    title: 'Sim',
-    description:
-      'Build and deploy AI agents using our Figma-like canvas. Build, write evals, and deploy AI agent workflows that automate workflows and streamline your business processes.',
-    siteName: 'Sim',
-    images: [
-      {
-        url: getAssetUrl('social/facebook.png'),
-        width: 1200,
-        height: 630,
-        alt: 'Sim',
-      },
-    ],
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'Sim',
-    description:
-      'Build and deploy AI agents using our Figma-like canvas. Build, write evals, and deploy AI agent workflows that automate workflows and streamline your business processes.',
-    images: [getAssetUrl('social/twitter.png')],
-    creator: '@simstudioai',
-    site: '@simstudioai',
-  },
-  manifest: '/favicon/site.webmanifest',
-  icons: {
-    icon: [
-      { url: '/favicon/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
-      { url: '/favicon/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
-      {
-        url: '/favicon/favicon-192x192.png',
-        sizes: '192x192',
-        type: 'image/png',
-      },
-      {
-        url: '/favicon/favicon-512x512.png',
-        sizes: '512x512',
-        type: 'image/png',
-      },
-      { url: '/sim.png', sizes: 'any', type: 'image/png' },
-    ],
-    apple: '/favicon/apple-touch-icon.png',
-    shortcut: '/favicon/favicon.ico',
-  },
-  appleWebApp: {
-    capable: true,
-    statusBarStyle: 'default',
-    title: 'Sim',
-  },
-  formatDetection: {
-    telephone: false,
-  },
-  category: 'technology',
-  other: {
-    'apple-mobile-web-app-capable': 'yes',
-    'mobile-web-app-capable': 'yes',
-    'msapplication-TileColor': '#ffffff',
-    'msapplication-config': '/favicon/browserconfig.xml',
-  },
-}
+// Generate dynamic metadata based on brand configuration
+export const metadata: Metadata = generateBrandedMetadata()
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const structuredData = generateStructuredData()
+
   return (
-    <html lang='en' suppressHydrationWarning className={GeistSans.className}>
+    <html lang='en' suppressHydrationWarning>
       <head>
         {/* Structured Data for SEO */}
         <script
           type='application/ld+json'
           dangerouslySetInnerHTML={{
-            __html: JSON.stringify({
-              '@context': 'https://schema.org',
-              '@type': 'SoftwareApplication',
-              name: 'Sim',
-              description:
-                'Build and deploy AI agents using our Figma-like canvas. Build, write evals, and deploy AI agent workflows that automate workflows and streamline your business processes.',
-              url: 'https://sim.ai',
-              applicationCategory: 'BusinessApplication',
-              operatingSystem: 'Web Browser',
-              offers: {
-                '@type': 'Offer',
-                category: 'SaaS',
-              },
-              creator: {
-                '@type': 'Organization',
-                name: 'Sim',
-                url: 'https://sim.ai',
-              },
-              featureList: [
-                'Visual AI Agent Builder',
-                'Workflow Canvas Interface',
-                'AI Agent Automation',
-                'Custom AI Workflows',
-              ],
-            }),
+            __html: JSON.stringify(structuredData),
           }}
         />
 
@@ -226,24 +99,26 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <PublicEnvScript />
 
         {/* RB2B Script - Only load on hosted version */}
-        {/* {isHosted && env.NEXT_PUBLIC_RB2B_KEY && (
+        {isHosted && env.NEXT_PUBLIC_RB2B_KEY && (
           <script
             dangerouslySetInnerHTML={{
               __html: `!function () {var reb2b = window.reb2b = window.reb2b || [];if (reb2b.invoked) return;reb2b.invoked = true;reb2b.methods = ["identify", "collect"];reb2b.factory = function (method) {return function () {var args = Array.prototype.slice.call(arguments);args.unshift(method);reb2b.push(args);return reb2b;};};for (var i = 0; i < reb2b.methods.length; i++) {var key = reb2b.methods[i];reb2b[key] = reb2b.factory(key);}reb2b.load = function (key) {var script = document.createElement("script");script.type = "text/javascript";script.async = true;script.src = "https://b2bjsstore.s3.us-west-2.amazonaws.com/b/" + key + "/${env.NEXT_PUBLIC_RB2B_KEY}.js.gz";var first = document.getElementsByTagName("script")[0];first.parentNode.insertBefore(script, first);};reb2b.SNIPPET_VERSION = "1.0.1";reb2b.load("${env.NEXT_PUBLIC_RB2B_KEY}");}();`,
             }}
           />
-        )} */}
+        )}
       </head>
       <body suppressHydrationWarning>
-        <ZoomPrevention />
-        <TelemetryConsentDialog />
-        {children}
-        {isHosted && (
-          <>
-            <SpeedInsights />
-            <Analytics />
-          </>
-        )}
+        <BrandedLayout>
+          <ZoomPrevention />
+          <TelemetryConsentDialog />
+          {children}
+          {isHosted && (
+            <>
+              <SpeedInsights />
+              <Analytics />
+            </>
+          )}
+        </BrandedLayout>
       </body>
     </html>
   )

apps/sim/app/manifest.ts

@@ -0,0 +1,29 @@
+import type { MetadataRoute } from 'next'
+import { getBrandConfig } from '@/lib/branding/branding'
+
+export default function manifest(): MetadataRoute.Manifest {
+  const brand = getBrandConfig()
+
+  return {
+    name: brand.name,
+    short_name: brand.name,
+    description:
+      'Build and deploy AI agents using our Figma-like canvas. Build, write evals, and deploy AI agent workflows that automate workflows and streamline your business processes.',
+    start_url: '/',
+    display: 'standalone',
+    background_color: brand.primaryColor || '#ffffff',
+    theme_color: brand.primaryColor || '#ffffff',
+    icons: [
+      {
+        src: '/favicon/android-chrome-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: '/favicon/android-chrome-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+    ],
+  }
+}