improvement: metadata and docs

Author: emir-karabeg

docs/app/(docs)/[[...slug]]/layout.tsx

@@ -3,10 +3,9 @@ import Link from 'next/link'
 import { DocsLayout } from 'fumadocs-ui/layouts/docs'
 import { GithubIcon, ExternalLink } from 'lucide-react'
 import { source } from '@/lib/source'
-import { AgentIcon } from '@/components/icons'
 
 const GitHubLink = () => (
-  <div className="fixed bottom-4 left-4 z-50">
+  <div className="fixed bottom-4 right-4 z-50">
     <Link
       href="https://github.com/simstudioai/sim"
       target="_blank"
@@ -25,23 +24,25 @@ export default function Layout({ children }: { children: ReactNode }) {
         tree={source.pageTree}
         nav={{
           title: (
-            <div className="flex items-center gap-2">
-              <AgentIcon className="h-4 w-4 text-[#8b5cf6]" />
-              Sim Studio
-            </div>
+            <div className="flex items-center font-medium">Sim Studio</div>
           ),
         }}
         links={[
           {
             text: 'Visit Sim Studio',
             url: 'https://simstudio.ai',
             icon: <ExternalLink className="h-4 w-4" />,
-          }
+          },
         ]}
+        sidebar={{
+          defaultOpenLevel: 1,
+          collapsible: true,
+          footer: null,
+        }}
       >
         {children}
       </DocsLayout>
       <GitHubLink />
     </>
   )
-}
+}

docs/app/(docs)/[[...slug]]/page.tsx

@@ -1,20 +1,27 @@
 import { notFound } from 'next/navigation'
-import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page'
+import {
+  DocsBody,
+  DocsDescription,
+  DocsPage,
+  DocsTitle,
+} from 'fumadocs-ui/page'
 import { source } from '@/lib/source'
 import mdxComponents from '@/components/mdx-components'
 
 export const dynamic = 'force-static'
 
-export default async function Page(props: { params: Promise<{ slug?: string[] }> }) {
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>
+}) {
   const params = await props.params
   const page = source.getPage(params.slug)
   if (!page) notFound()
 
   const MDX = page.data.body
 
   return (
-    <DocsPage 
-      toc={page.data.toc} 
+    <DocsPage
+      toc={page.data.toc}
       full={page.data.full}
       tableOfContent={{
         style: 'clerk',
@@ -29,6 +36,9 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
         style: 'clerk',
         enabled: true,
       }}
+      footer={{
+        enabled: false,
+      }}
     >
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
@@ -43,7 +53,9 @@ export async function generateStaticParams() {
   return source.generateParams()
 }
 
-export async function generateMetadata(props: { params: Promise<{ slug?: string[] }> }) {
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>
+}) {
   const params = await props.params
   const page = source.getPage(params.slug)
   if (!page) notFound()

docs/app/global.css

@@ -2,6 +2,17 @@
 @import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
 :root {
-    --color-fd-primary: #8b5cf6; /* or your desired purple hue */
+    --color-fd-primary: #802FFF; /* Purple from control-bar component */
 }
+
+/* Custom text highlighting styles */
+.text-highlight {
+    color: var(--color-fd-primary);
+}
+
+/* Override marker color for highlighted lists */
+.highlight-markers li::marker {
+    color: var(--color-fd-primary);
+}
+
 @source '../node_modules/fumadocs-ui/dist/**/*.js';

docs/app/layout.tsx

@@ -19,7 +19,8 @@ export default function Layout({ children }: { children: ReactNode }) {
 
 export const metadata = {
   title: 'Sim Studio',
-  description: 'Drag and drop agents to create workflows. Powered by Simplicity',
+  description:
+    'Build agents in seconds with a drag and drop workflow builder. Access comprehensive documentation to help you create efficient workflows and maximize your automation capabilities.',
   manifest: '/favicon/site.webmanifest',
   icons: {
     icon: [

docs/components/ui/features.tsx

@@ -1,7 +1,7 @@
 import {
   IconAdjustmentsBolt,
   IconCloud,
-  IconCurrencyDollar,
+  IconHistory,
   IconEaseInOut,
   IconHeart,
   IconHelp,
@@ -14,7 +14,8 @@ export function Features() {
   const features = [
     {
       title: 'Multi-LLM Support',
-      description: 'Connect to any LLM provider including OpenAI, Anthropic, and more',
+      description:
+        'Connect to any LLM provider including OpenAI, Anthropic, and more',
       icon: <IconCloud />,
     },
     {
@@ -33,7 +34,7 @@ export function Features() {
       icon: <IconEaseInOut />,
     },
     {
-      title: '100+ Integrations',
+      title: '40+ Integrations',
       description: 'Connect to hundreds of external services and data sources',
       icon: <IconAdjustmentsBolt />,
     },
@@ -45,7 +46,7 @@ export function Features() {
     {
       title: 'Version Control',
       description: 'Track changes and roll back to previous versions',
-      icon: <IconCurrencyDollar />,
+      icon: <IconHistory />,
     },
     {
       title: 'Team Collaboration',
@@ -87,7 +88,9 @@ export const Feature = ({
       {index >= 4 && (
         <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
       )}
-      <div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">{icon}</div>
+      <div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">
+        {icon}
+      </div>
       <div className="text-lg font-bold mb-2 relative z-10 px-10">
         <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-purple-500 transition-all duration-200 origin-center" />
         <span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100">

docs/content/docs/introduction/index.mdx

@@ -11,7 +11,7 @@ Sim Studio is a powerful platform for building, testing, and optimizing agentic
 
 ## Why Sim Studio?
 
-Building agentic applications requires extensive coding and integration work. Developers spend more time on infrastructure and plumbing than focusing on core AI logic. Sim Studio changes this with a <span className="text-[#B5A1D4]">comprehensive visual workflow editor</span> that handles complexity while keeping you in control of what matters.
+Building agentic applications requires extensive coding and integration work. Developers spend more time on infrastructure and plumbing than focusing on core AI logic. Sim Studio changes this with a <span className="text-highlight">comprehensive visual workflow editor</span> that handles complexity while keeping you in control of what matters.
 
 ## How Sim Studio Differs
 
@@ -21,19 +21,24 @@ Sim Studio takes a fundamentally different approach from existing agent developm
 
 Developers waste countless hours customizing multi-agent frameworks, writing boilerplate code, creating integrations, and building tooling from scratch. By the time they've configured their environment, precious resources are consumed before any real agent work begins.
 
-Sim Studio eliminates this overhead. We've distilled agent development to its essence, removing boilerplate and infrastructure complexity. With Sim Studio, you can <span className="text-[#B5A1D4]">immediately start designing intelligence</span> rather than wrestling with configuration. Your time is best spent refining agent behaviors, not writing glue code that doesn't improve the end-user experience.
+Sim Studio eliminates this overhead. We've distilled agent development to its essence, removing boilerplate and infrastructure complexity. With Sim Studio, you can <span className="text-highlight">immediately start designing intelligence</span> rather than wrestling with configuration. Your time is best spent refining agent behaviors, not writing glue code that doesn't improve the end-user experience.
 
 ### Provider-Aligned Interfaces
 
 Existing frameworks abstract away provider-specific features, forcing developers to navigate layers of abstraction to access specific capabilities. The result: lost functionality, reduced flexibility, and additional code to bridge these gaps.
 
-Sim Studio stays <span className="text-[#B5A1D4]">close to provider definitions</span>, directly exposing the parameters that matter:
-<ul className="list-disc pl-6 space-y-2 marker:text-[#B5A1D4]">
+Sim Studio stays <span className="text-highlight">close to provider definitions</span>, directly exposing the parameters that matter:
+
+<ul className="list-disc pl-6 space-y-2 highlight-markers">
   <li>System prompts and instructions with native formatting</li>
-  <li>Tool definitions and access patterns that match provider implementations</li>
+  <li>
+    Tool definitions and access patterns that match provider implementations
+  </li>
   <li>Temperature and sampling parameters with their full range of options</li>
   <li>Structured output formatting that aligns with provider capabilities</li>
-  <li>Model selection and configuration with provider-specific optimizations</li>
+  <li>
+    Model selection and configuration with provider-specific optimizations
+  </li>
 </ul>
 
 This approach gives you full control over agent behavior without unnecessary complexity. You leverage each provider's full capabilities without sacrificing the convenience of a unified platform.
@@ -42,28 +47,34 @@ This approach gives you full control over agent behavior without unnecessary com
 
 Most environments lock you into a specific LLM provider early in development. Changing providers later requires significant refactoring, often affecting your entire application architecture and limiting your ability to leverage advances in model capabilities.
 
-Our platform provides a <span className="text-[#B5A1D4]">consistent interface across different AI models</span>, letting you switch between OpenAI, Anthropic, Claude, Llama, Gemini and others without rewriting your agent logic. This model-agnostic approach future-proofs your applications and gives you freedom to select the best model for each specific use case—optimize for cost with one agent and performance with another, all within the same workflow.
+Our platform provides a <span className="text-highlight">consistent interface across different AI models</span>, letting you switch between OpenAI, Anthropic, Claude, Llama, Gemini and others without rewriting your agent logic. This model-agnostic approach future-proofs your applications and gives you freedom to select the best model for each specific use case—optimize for cost with one agent and performance with another, all within the same workflow.
 
 ### AI-Native Design
 
 Traditional development environments were designed for conventional software and later adapted for AI. These adaptations often feel like afterthoughts, with AI capabilities awkwardly grafted onto existing paradigms.
 
-Sim Studio is <span className="text-[#B5A1D4]">built from the ground up as an AI-native application</span>. Every aspect—from the visual workflow editor to testing environments—is designed specifically for agent development. Common AI development patterns are first-class concepts in our platform, not workarounds. Testing prompts, adjusting parameters, or implementing complex tool calling patterns feel natural because they're core to our design philosophy.
+Sim Studio is <span className="text-highlight">built from the ground up as an AI-native application</span>. Every aspect—from the visual workflow editor to testing environments—is designed specifically for agent development. Common AI development patterns are first-class concepts in our platform, not workarounds. Testing prompts, adjusting parameters, or implementing complex tool calling patterns feel natural because they're core to our design philosophy.
 
 ### Local Development Support
 
 Many AI platforms force you to develop against cloud APIs, creating dependencies on internet connectivity, increasing costs, and introducing privacy concerns with sensitive data.
 
-Sim Studio supports <span className="text-[#B5A1D4]">full local development</span> using Ollama integration. Develop with privacy-preserving local models, then seamlessly deploy with cloud providers in production. This hybrid approach gives you the best of both worlds: privacy, cost-efficiency, and reliability during development, with scalability and performance in production.
+Sim Studio supports <span className="text-highlight">full local development</span> using Ollama integration. Develop with privacy-preserving local models, then seamlessly deploy with cloud providers in production. This hybrid approach gives you the best of both worlds: privacy, cost-efficiency, and reliability during development, with scalability and performance in production.
 
 ### Comprehensive Observability
 
 Existing solutions provide limited visibility into agent performance, making it difficult to identify bottlenecks, understand costs, or diagnose failures. Developers build custom instrumentation or operate in the dark.
 
-Sim Studio provides <span className="text-[#B5A1D4]">full visibility into agent performance</span> with integrated observability:
-<ul className="list-disc pl-6 space-y-2 marker:text-[#B5A1D4]">
-  <li>Detailed execution logs capturing every interaction between agents and models</li>
-  <li>Latency tracing with span visualization to identify performance bottlenecks</li>
+Sim Studio provides <span className="text-highlight">full visibility into agent performance</span> with integrated observability:
+
+<ul className="list-disc pl-6 space-y-2 highlight-markers">
+  <li>
+    Detailed execution logs capturing every interaction between agents and
+    models
+  </li>
+  <li>
+    Latency tracing with span visualization to identify performance bottlenecks
+  </li>
   <li>Cost tracking and optimization to prevent budget overruns</li>
   <li>Error analysis and debugging tools for complex workflows</li>
   <li>Performance comparisons across different model configurations</li>
@@ -77,6 +88,6 @@ Sim Studio provides a wide range of features designed to accelerate your develop
 
 <Features />
 
-## 
+##
 
-Ready to get started? Check out our [Getting Started](/docs/getting-started) guide or explore our [Blocks](/docs/blocks) and [Tools](/docs/tools) in more detail. 
+Ready to get started? Check out our [Getting Started](/getting-started) guide or explore our [Blocks](/docs/blocks) and [Tools](/docs/tools) in more detail.

docs/content/docs/introduction/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Introduction",
+  "pages": ["index"]
+} 

docs/content/docs/meta.json

@@ -1,5 +1,18 @@
 {
   "title": "Sim Studio Documentation",
-  "pages": ["introduction", "getting-started", "blocks", "variables", "tools", "connections", "execution"],
+  "pages": [
+    "---Introduction---",
+    "./introduction/index",
+    "./getting-started/index",
+    "---Create---",
+    "blocks",
+    "tools",
+    "---Connections---",
+    "connections",
+    "---Execution---",
+    "execution",
+    "---Advanced---",
+    "./variables/index"
+  ],
   "defaultOpen": true
 }

sim/app/layout.tsx

@@ -49,9 +49,9 @@ export const viewport: Viewport = {
 }
 
 export const metadata: Metadata = {
-  title: 'Sim Studio | Create Workflows with Drag and Drop Agents',
+  title: 'Sim Studio',
   description:
-    'Create powerful workflows by dragging and dropping agents. Build, customize, and deploy automated processes with Sim Studio powered by Simplicity.',
+    'Build agents in seconds with a drag and drop workflow builder. Streamline your automation processes, boost productivity, and create custom workflows.',
   applicationName: 'Sim Studio',
   authors: [{ name: 'Simplicity' }],
   generator: 'Next.js',
@@ -90,7 +90,7 @@ export const metadata: Metadata = {
     url: 'https://simstudio.ai',
     title: 'Sim Studio | Create Workflows with Drag and Drop Agents',
     description:
-      'Create powerful workflows by dragging and dropping agents. Build, customize, and deploy automated processes with Sim Studio powered by Simplicity.',
+      'Build agents in seconds with a drag and drop workflow builder. Streamline your automation processes, boost productivity, and create custom workflows.',
     siteName: 'Sim Studio',
     images: [
       {
@@ -103,9 +103,9 @@ export const metadata: Metadata = {
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'Sim Studio | Create Workflows with Drag and Drop Agents',
+    title: 'Sim Studio',
     description:
-      'Create powerful workflows by dragging and dropping agents. Build, customize, and deploy automated processes with Sim Studio.',
+      'Build agents in seconds with a drag and drop workflow builder. Streamline your automation processes, boost productivity, and create custom workflows.',
     images: ['/sim.png'],
     creator: '@simplicity',
     site: '@simstudio',