v0.5.30: vllm fixes, permissions fixes, isolated vms for code execution, tool fixes

README.md

@@ -130,6 +130,7 @@ When running with Docker, use `host.docker.internal` if vLLM is on your host mac
 
 **Requirements:**
 - [Bun](https://bun.sh/) runtime
+- [Node.js](https://nodejs.org/) v20+ (required for sandboxed code execution)
 - PostgreSQL 12+ with [pgvector extension](https://github.com/pgvector/pgvector) (required for AI embeddings)
 
 **Note:** Sim uses vector embeddings for AI features like knowledge bases and semantic search, which requires the `pgvector` PostgreSQL extension.

apps/docs/app/[lang]/[[...slug]]/page.tsx

@@ -1,3 +1,4 @@
+import type React from 'react'
 import { findNeighbour } from 'fumadocs-core/page-tree'
 import defaultMdxComponents from 'fumadocs-ui/mdx'
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page'
@@ -10,14 +11,15 @@ import { LLMCopyButton } from '@/components/page-actions'
 import { StructuredData } from '@/components/structured-data'
 import { CodeBlock } from '@/components/ui/code-block'
 import { Heading } from '@/components/ui/heading'
-import { source } from '@/lib/source'
+import { type PageData, source } from '@/lib/source'
 
 export default async function Page(props: { params: Promise<{ slug?: string[]; lang: string }> }) {
   const params = await props.params
   const page = source.getPage(params.slug, params.lang)
   if (!page) notFound()
 
-  const MDX = page.data.body
+  const data = page.data as PageData
+  const MDX = data.body
   const baseUrl = 'https://docs.sim.ai'
 
   const pageTreeRecord = source.pageTree as Record<string, any>
@@ -51,7 +53,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
 
       if (index === urlParts.length - 1) {
         breadcrumbs.push({
-          name: page.data.title,
+          name: data.title,
           url: `${baseUrl}${page.url}`,
         })
       } else {
@@ -168,15 +170,15 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
   return (
     <>
       <StructuredData
-        title={page.data.title}
-        description={page.data.description || ''}
+        title={data.title}
+        description={data.description || ''}
         url={`${baseUrl}${page.url}`}
         lang={params.lang}
         breadcrumb={breadcrumbs}
       />
       <DocsPage
-        toc={page.data.toc}
-        full={page.data.full}
+        toc={data.toc}
+        full={data.full}
         breadcrumb={{
           enabled: false,
         }}
@@ -207,20 +209,32 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
             </div>
             <PageNavigationArrows previous={neighbours?.previous} next={neighbours?.next} />
           </div>
-          <DocsTitle>{page.data.title}</DocsTitle>
-          <DocsDescription>{page.data.description}</DocsDescription>
+          <DocsTitle>{data.title}</DocsTitle>
+          <DocsDescription>{data.description}</DocsDescription>
         </div>
         <DocsBody>
           <MDX
             components={{
               ...defaultMdxComponents,
               CodeBlock,
-              h1: (props) => <Heading as='h1' {...props} />,
-              h2: (props) => <Heading as='h2' {...props} />,
-              h3: (props) => <Heading as='h3' {...props} />,
-              h4: (props) => <Heading as='h4' {...props} />,
-              h5: (props) => <Heading as='h5' {...props} />,
-              h6: (props) => <Heading as='h6' {...props} />,
+              h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+                <Heading as='h1' {...props} />
+              ),
+              h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+                <Heading as='h2' {...props} />
+              ),
+              h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+                <Heading as='h3' {...props} />
+              ),
+              h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+                <Heading as='h4' {...props} />
+              ),
+              h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+                <Heading as='h5' {...props} />
+              ),
+              h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+                <Heading as='h6' {...props} />
+              ),
             }}
           />
         </DocsBody>
@@ -240,16 +254,17 @@ export async function generateMetadata(props: {
   const page = source.getPage(params.slug, params.lang)
   if (!page) notFound()
 
+  const data = page.data as PageData
   const baseUrl = 'https://docs.sim.ai'
   const fullUrl = `${baseUrl}${page.url}`
 
-  const description = page.data.description || ''
-  const ogImageUrl = `${baseUrl}/api/og?title=${encodeURIComponent(page.data.title)}&category=DOCUMENTATION${description ? `&description=${encodeURIComponent(description)}` : ''}`
+  const description = data.description || ''
+  const ogImageUrl = `${baseUrl}/api/og?title=${encodeURIComponent(data.title)}&category=DOCUMENTATION${description ? `&description=${encodeURIComponent(description)}` : ''}`
 
   return {
-    title: page.data.title,
+    title: data.title,
     description:
-      page.data.description || 'Sim visual workflow builder for AI applications documentation',
+      data.description || 'Sim visual workflow builder for AI applications documentation',
     keywords: [
       'AI workflow builder',
       'visual workflow editor',
@@ -258,16 +273,16 @@ export async function generateMetadata(props: {
       'AI agents',
       'no-code AI',
       'drag and drop workflows',
-      page.data.title?.toLowerCase().split(' '),
+      data.title?.toLowerCase().split(' '),
     ]
       .flat()
       .filter(Boolean),
     authors: [{ name: 'Sim Team' }],
     category: 'Developer Tools',
     openGraph: {
-      title: page.data.title,
+      title: data.title,
       description:
-        page.data.description || 'Sim visual workflow builder for AI applications documentation',
+        data.description || 'Sim visual workflow builder for AI applications documentation',
       url: fullUrl,
       siteName: 'Sim Documentation',
       type: 'article',
@@ -280,15 +295,15 @@ export async function generateMetadata(props: {
           url: ogImageUrl,
           width: 1200,
           height: 630,
-          alt: page.data.title,
+          alt: data.title,
         },
       ],
     },
     twitter: {
       card: 'summary_large_image',
-      title: page.data.title,
+      title: data.title,
       description:
-        page.data.description || 'Sim visual workflow builder for AI applications documentation',
+        data.description || 'Sim visual workflow builder for AI applications documentation',
       images: [ogImageUrl],
       creator: '@simdotai',
       site: '@simdotai',

apps/docs/app/api/og/route.tsx

@@ -43,7 +43,6 @@ export async function GET(request: NextRequest) {
   const description = searchParams.get('description') || ''
 
   const baseUrl = new URL(request.url).origin
-  const backgroundImageUrl = `${baseUrl}/static/og-background.png`
 
   const allText = `${title}${category}${description}docs.sim.ai`
   const fontData = await loadGoogleFont('Geist', '400;500;600', allText)
@@ -55,36 +54,49 @@ export async function GET(request: NextRequest) {
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
-        background: 'linear-gradient(315deg, #1e1e3f 0%, #1a1a2e 40%, #0f0f0f 100%)',
+        background: '#0c0c0c',
         position: 'relative',
         fontFamily: 'Geist',
       }}
     >
-      {/* Background texture */}
-      <img
-        src={backgroundImageUrl}
-        alt=''
+      {/* Base gradient layer - very subtle purple tint across the entire image */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          background:
+            'radial-gradient(ellipse 150% 100% at 50% 100%, rgba(88, 28, 135, 0.15) 0%, rgba(88, 28, 135, 0.08) 25%, rgba(88, 28, 135, 0.03) 50%, transparent 80%)',
+          display: 'flex',
+        }}
+      />
+
+      {/* Secondary glow - adds depth without harsh edges */}
+      <div
         style={{
           position: 'absolute',
           top: 0,
           left: 0,
           width: '100%',
           height: '100%',
-          objectFit: 'cover',
-          opacity: 0.04,
+          background:
+            'radial-gradient(ellipse 100% 80% at 80% 90%, rgba(112, 31, 252, 0.12) 0%, rgba(112, 31, 252, 0.04) 40%, transparent 70%)',
+          display: 'flex',
         }}
       />
 
-      {/* Subtle purple glow from bottom right */}
+      {/* Top darkening - creates natural vignette */}
       <div
         style={{
           position: 'absolute',
-          bottom: 0,
-          right: 0,
-          width: '50%',
+          top: 0,
+          left: 0,
+          width: '100%',
           height: '100%',
           background:
-            'radial-gradient(ellipse at bottom right, rgba(112, 31, 252, 0.1) 0%, transparent 50%)',
+            'linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 40%, transparent 100%)',
           display: 'flex',
         }}
       />