v0.5.6: executor fixes, UI improvements, run paths (#2028)

* test(pr): hackathon (#1999)

* test(pr): github trigger (#2000)

* fix(usage-indicator): conditional rendering, upgrade, and ui/ux (#2001)

* fix: usage-limit indicator and render conditonally on is billing enabled

* fix: upgrade render

* fix(notes): fix notes, tighten spacing, update deprecated zustand function, update use mention data to ignore block positon (#2002)

* fix(pdfs): use unpdf instead of pdf-parse (#2004)

* fix(modals): fix z-index for various modals and output selector and variables (#2005)

* fix(condition): treat condition input the same as the code subblock (#2006)

* feat(models): added gpt-5.1 (#2007)

* improvement: runpath edges, blocks, active (#2008)

* feat(i18n): update translations (#2009)

* fix(triggers): check triggermode and consolidate block type (#2011)

* fix(triggers): disabled trigger shouldn't be added to dag (#2012)

* Fix disabled blocks

* Comments

* Fix api/chat trigger not found message

* fix(tags): only show start block upstream if is ancestor (#2013)

* fix(variables): Fix resolution on double < (#2016)

* Fix variable <>

* Ling

* Clean

* feat(billing): add notif for first failed payment, added upgrade email from free, updated providers that supported granular tool control to support them, fixed envvar popover, fixed redirect to wrong workspace after oauth connect (#2015)

* feat(billing): add notif for first failed payment, added upgrade email from free, updated providers that supported granular tool control to support them, fixed envvar popover, fixed redirect to wrong workspace after oauth connect

* fix build

* ack PR comments

* feat(performance): added reactquery hooks for workflow operations, for logs, fixed logs reloading, fix subscription UI (#2017)

* feat(performance): added reactquery hooks for workflow operations, for logs, fixed logs reloading, fix subscription UI

* use useInfiniteQuery for logs fetching

* fix(copilot): run workflow supports input format and fix run id (#2018)

* fix(router): fix error edge in router block + fix source handle problem (#2019)

* Fix router block error port handling

* Remove comment

* Fix edge execution

* improvement: code subblock, action bar, connections (#2024)

* improvement: action bar, connections

* fix: code block draggable resize

* fix(response): fix response block http format (#2027)

* Fix response block

* Lint

* fix(notes): fix notes block spacing, additional logs for billing transfer route (#2029)

---------

Co-authored-by: Vikhyath Mondreti <vikhyathvikku@gmail.com>
Co-authored-by: Emir Karabeg <78010029+emir-karabeg@users.noreply.github.com>
Co-authored-by: Siddharth Ganesan <33737564+Sg312@users.noreply.github.com>

.cursorrules

@@ -0,0 +1,19 @@
+# Role
+
+You are a professional software engineer. All code you write MUST follow best practices, ensuring accuracy, quality, readability, and cleanliness. You MUST make FOCUSED EDITS that are EFFICIENT and ELEGANT.
+
+## Logs
+
+ENSURE that you use the logger.info and logger.warn and logger.error instead of the console.log whenever you want to display logs.
+
+## Comments
+
+You must use TSDOC for comments. Do not use ==== for comments to separate sections.
+
+## Globals styles
+
+You should not update the global styles unless it is absolutely necessary. Keep all styling local to components and files.
+
+## Bun
+
+Use bun and bunx not npm and npx

.devcontainer/.bashrc

@@ -1,69 +0,0 @@
-# Sim Development Environment Bashrc
-# This gets sourced by post-create.sh
-
-# Enhanced prompt with git branch info
-parse_git_branch() {
-  git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
-}
-
-export PS1="\[\033[01;32m\]\u@simstudio\[\033[00m\]:\[\033[01;34m\]\w\[\033[33m\]\$(parse_git_branch)\[\033[00m\]\$ "
-
-# Helpful aliases
-alias ll="ls -la"
-alias ..="cd .."
-alias ...="cd ../.."
-
-# Database aliases
-alias pgc="PGPASSWORD=postgres psql -h db -U postgres -d simstudio"
-alias check-db="PGPASSWORD=postgres psql -h db -U postgres -c '\l'"
-
-# Sim specific aliases
-alias logs="cd /workspace/apps/sim && tail -f logs/*.log 2>/dev/null || echo 'No log files found'"
-alias sim-start="cd /workspace && bun run dev"
-alias sim-migrate="cd /workspace/apps/sim && bunx drizzle-kit push"
-alias sim-generate="cd /workspace/apps/sim && bunx drizzle-kit generate"
-alias sim-rebuild="cd /workspace && bun run build && bun run start"
-alias docs-dev="cd /workspace/apps/docs && bun run dev"
-
-# Turbo related commands
-alias turbo-build="cd /workspace && bunx turbo run build"
-alias turbo-dev="cd /workspace && bunx turbo run dev"
-alias turbo-test="cd /workspace && bunx turbo run test"
-
-# Bun specific commands
-alias bun-update="cd /workspace && bun update"
-alias bun-add="cd /workspace && bun add"
-alias bun-pm="cd /workspace && bun pm"
-alias bun-canary="bun upgrade --canary"
-
-# Default to workspace directory
-cd /workspace 2>/dev/null || true
-
-# Welcome message - only show once per session
-if [ -z "$SIM_WELCOME_SHOWN" ]; then
-  export SIM_WELCOME_SHOWN=1
-  
-  echo ""
-  echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-  echo "🚀 Welcome to Sim development environment!"
-  echo ""
-  echo "Available commands:"
-  echo "  sim-start    - Start all apps in development mode"
-  echo "  sim-migrate  - Push schema changes to the database for sim app"
-  echo "  sim-generate - Generate new migrations for sim app"
-  echo "  sim-rebuild  - Build and start all apps"
-  echo "  docs-dev     - Start only the docs app in development mode"
-  echo ""
-  echo "Turbo commands:"
-  echo "  turbo-build  - Build all apps using Turborepo"
-  echo "  turbo-dev    - Start development mode for all apps"
-  echo "  turbo-test   - Run tests for all packages"
-  echo ""
-  echo "Bun commands:"
-  echo "  bun-update   - Update dependencies"
-  echo "  bun-add      - Add a new dependency"
-  echo "  bun-pm       - Manage dependencies"
-  echo "  bun-canary   - Upgrade to the latest canary version of Bun"
-  echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
-  echo ""
-fi 

.devcontainer/Dockerfile

@@ -1,38 +1,43 @@
-# Use the latest Bun canary image for development
-FROM oven/bun:canary
-
-# Avoid warnings by switching to noninteractive
-ENV DEBIAN_FRONTEND=noninteractive
+FROM oven/bun:1.2.22-alpine
 
 # Install necessary packages for development
-RUN apt-get update \
-    && apt-get -y install --no-install-recommends \
-       git curl wget jq sudo postgresql-client vim nano \
-       bash-completion ca-certificates lsb-release gnupg \
-    && apt-get clean -y \
-    && rm -rf /var/lib/apt/lists/*
+RUN apk add --no-cache \
+    git \
+    curl \
+    wget \
+    jq \
+    sudo \
+    postgresql-client \
+    vim \
+    nano \
+    bash \
+    bash-completion \
+    zsh \
+    zsh-vcs \
+    ca-certificates \
+    shadow
 
-# Create a non-root user
+# Create a non-root user with matching UID/GID
 ARG USERNAME=bun
 ARG USER_UID=1000
 ARG USER_GID=$USER_UID
 
+# Create user group if it doesn't exist
+RUN if ! getent group $USER_GID >/dev/null; then \
+        addgroup -g $USER_GID $USERNAME; \
+    fi
+
+# Create user if it doesn't exist
+RUN if ! getent passwd $USER_UID >/dev/null; then \
+        adduser -D -u $USER_UID -G $(getent group $USER_GID | cut -d: -f1) $USERNAME; \
+    fi
+
 # Add sudo support
 RUN echo "$USERNAME ALL=(ALL) NOPASSWD: ALL" > /etc/sudoers.d/$USERNAME \
     && chmod 0440 /etc/sudoers.d/$USERNAME
 
-# Install global packages for development
-RUN bun install -g turbo drizzle-kit typescript @types/node
-
-# Install bun completions
-RUN bun completions > /etc/bash_completion.d/bun
-
 # Set up shell environment
-RUN echo "export PATH=$PATH:/home/$USERNAME/.bun/bin" >> /etc/profile
-RUN echo "source /etc/profile" >> /etc/bash.bashrc
-
-# Switch back to dialog for any ad-hoc use of apt-get
-ENV DEBIAN_FRONTEND=dialog
+RUN echo "export PATH=\$PATH:/home/$USERNAME/.bun/bin" >> /etc/profile
 
 WORKDIR /workspace
 

.devcontainer/README.md

@@ -1,78 +1,75 @@
 # Sim Development Container
 
-This directory contains configuration files for Visual Studio Code Dev Containers / GitHub Codespaces. Dev containers provide a consistent, isolated development environment for this project.
+Development container configuration for VS Code Dev Containers and GitHub Codespaces.
 
-## Contents
-
-- `devcontainer.json` - The main configuration file that defines the development container settings
-- `Dockerfile` - Defines the container image and development environment
-- `docker-compose.yml` - Sets up the application and database containers
-- `post-create.sh` - Script that runs when the container is created
-- `.bashrc` - Custom shell configuration with helpful aliases
-
-## Usage
-
-### Prerequisites
+## Prerequisites
 
 - Visual Studio Code
-- Docker installation:
-  - Docker Desktop (Windows/macOS)
-  - Docker Engine (Linux)
-- VS Code Remote - Containers extension
+- Docker Desktop or Podman Desktop
+- VS Code Dev Containers extension
 
-### Getting Started
+## Getting Started
 
-1. Open this project in Visual Studio Code
-2. When prompted, click "Reopen in Container"
-   - Alternatively, press `F1` and select "Remote-Containers: Reopen in Container"
+1. Open this project in VS Code
+2. Click "Reopen in Container" when prompted (or press `F1` → "Dev Containers: Reopen in Container")
 3. Wait for the container to build and initialize
-4. The post-creation script will automatically:
+4. Start developing with `sim-start`
 
-   - Install dependencies
-   - Set up environment variables
-   - Run database migrations
-   - Configure helpful aliases
+The setup script will automatically install dependencies and run migrations.
 
-5. Start the application with `sim-start` (alias for `bun run dev`)
+## Development Commands
 
-### Development Commands
+### Running Services
 
-The development environment includes these helpful aliases:
+You have two options for running the development environment:
+
+**Option 1: Run everything together (recommended for most development)**
+```bash
+sim-start  # Runs both app and socket server using concurrently
+```
+
+**Option 2: Run services separately (useful for debugging individual services)**
+- In the **app** container terminal: `sim-app` (starts Next.js app on port 3000)
+- In the **realtime** container terminal: `sim-sockets` (starts socket server on port 3002)
+
+### Other Commands
 
-- `sim-start` - Start the development server
 - `sim-migrate` - Push schema changes to the database
 - `sim-generate` - Generate new migrations
-- `sim-rebuild` - Build and start the production version
-- `pgc` - Connect to the PostgreSQL database
-- `check-db` - List all databases
-
-### Using GitHub Codespaces
-
-This project is also configured for GitHub Codespaces. To use it:
-
-1. Go to the GitHub repository
-2. Click the "Code" button
-3. Select the "Codespaces" tab
-4. Click "Create codespace on main"
-
-This will start a new Codespace with the development environment already set up.
-
-## Customization
-
-You can customize the development environment by:
-
-- Modifying `devcontainer.json` to add VS Code extensions or settings
-- Updating the `Dockerfile` to install additional packages
-- Editing `docker-compose.yml` to add services or change configuration
-- Modifying `.bashrc` to add custom aliases or configurations
+- `build` - Build the application
+- `pgc` - Connect to PostgreSQL database
 
 ## Troubleshooting
 
-If you encounter issues:
+**Build errors**: Rebuild the container with `F1` → "Dev Containers: Rebuild Container"
 
-1. Rebuild the container: `F1` → "Remote-Containers: Rebuild Container"
-2. Check Docker logs for build errors
-3. Verify Docker Desktop is running
-4. Ensure all prerequisites are installed
+**Port conflicts**: Ensure ports 3000, 3002, and 5432 are available
 
-For more information, see the [VS Code Remote Development documentation](https://code.visualstudio.com/docs/remote/containers).
+**Container runtime issues**: Verify Docker Desktop or Podman Desktop is running
+
+## Technical Details
+
+Services:
+- **App container** (8GB memory limit) - Main Next.js application
+- **Realtime container** (4GB memory limit) - Socket.io server for real-time features
+- **Database** - PostgreSQL with pgvector extension
+- **Migrations** - Runs automatically on container creation
+
+You can develop with services running together or independently.
+
+### Personalization
+
+**Project commands** (`sim-start`, `sim-app`, etc.) are automatically available via `/workspace/.devcontainer/sim-commands.sh`.
+
+**Personal shell customization** (aliases, prompts, etc.) should use VS Code's dotfiles feature:
+1. Create a dotfiles repository (e.g., `github.com/youruser/dotfiles`)
+2. Add your `.bashrc`, `.zshrc`, or other configs
+3. Configure in VS Code Settings:
+   ```json
+   {
+     "dotfiles.repository": "youruser/dotfiles",
+     "dotfiles.installCommand": "install.sh"
+   }
+   ```
+
+This separates project-specific commands from personal preferences, following VS Code best practices.

.devcontainer/devcontainer.json

@@ -13,13 +13,6 @@
           "source.fixAll.biome": "explicit",
           "source.organizeImports.biome": "explicit"
         },
-        "terminal.integrated.defaultProfile.linux": "bash",
-        "terminal.integrated.profiles.linux": {
-          "bash": {
-            "path": "/bin/bash",
-            "args": ["--login"]
-          }
-        },
         "terminal.integrated.shellIntegration.enabled": true
       },
       "extensions": [
@@ -36,18 +29,9 @@
     }
   },
 
-  "forwardPorts": [3000, 5432],
+  "forwardPorts": [3000, 3002, 5432],
 
   "postCreateCommand": "bash -c 'bash .devcontainer/post-create.sh || true'",
 
-  "postStartCommand": "bash -c 'if [ ! -f ~/.bashrc ] || ! grep -q \"sim-start\" ~/.bashrc; then cp .devcontainer/.bashrc ~/.bashrc; fi'",
-
-  "remoteUser": "bun",
-
-  "features": {
-    "ghcr.io/devcontainers/features/git:1": {},
-    "ghcr.io/prulloac/devcontainer-features/bun:1": {
-      "version": "latest"
-    }
-  }
+  "remoteUser": "bun"
 }

.devcontainer/docker-compose.yml

@@ -7,53 +7,56 @@ services:
       - ..:/workspace:cached
       - bun-cache:/home/bun/.bun/cache:delegated
     command: sleep infinity
+    deploy:
+      resources:
+        limits:
+          memory: 8G
     environment:
       - NODE_ENV=development
       - DATABASE_URL=postgresql://postgres:postgres@db:5432/simstudio
-      - POSTGRES_URL=postgresql://postgres:postgres@db:5432/simstudio
       - BETTER_AUTH_URL=http://localhost:3000
       - NEXT_PUBLIC_APP_URL=http://localhost:3000
+      - BETTER_AUTH_SECRET=${BETTER_AUTH_SECRET:-your_auth_secret_here}
+      - ENCRYPTION_KEY=${ENCRYPTION_KEY:-your_encryption_key_here}
+      - COPILOT_API_KEY=${COPILOT_API_KEY}
+      - SIM_AGENT_API_URL=${SIM_AGENT_API_URL}
+      - OLLAMA_URL=${OLLAMA_URL:-http://localhost:11434}
+      - NEXT_PUBLIC_SOCKET_URL=${NEXT_PUBLIC_SOCKET_URL:-http://localhost:3002}
       - BUN_INSTALL_CACHE_DIR=/home/bun/.bun/cache
     depends_on:
       db:
         condition: service_healthy
-      realtime:
-        condition: service_healthy
       migrations:
         condition: service_completed_successfully
     ports:
       - "3000:3000"
       - "3001:3001"
     working_dir: /workspace
-    healthcheck:
-      test: ['CMD', 'wget', '--spider', '--quiet', 'http://127.0.0.1:3000']
-      interval: 90s
-      timeout: 5s
-      retries: 3
-      start_period: 10s
 
   realtime:
     build:
       context: ..
       dockerfile: .devcontainer/Dockerfile
+    volumes:
+      - ..:/workspace:cached
+      - bun-cache:/home/bun/.bun/cache:delegated
     command: sleep infinity
+    deploy:
+      resources:
+        limits:
+          memory: 4G
     environment:
       - NODE_ENV=development
       - DATABASE_URL=postgresql://postgres:postgres@db:5432/simstudio
       - BETTER_AUTH_URL=http://localhost:3000
       - NEXT_PUBLIC_APP_URL=http://localhost:3000
+      - BETTER_AUTH_SECRET=${BETTER_AUTH_SECRET:-your_auth_secret_here}
     depends_on:
       db:
         condition: service_healthy
     ports:
       - "3002:3002"
     working_dir: /workspace
-    healthcheck:
-      test: ['CMD', 'wget', '--spider', '--quiet', 'http://127.0.0.1:3002']
-      interval: 90s
-      timeout: 5s
-      retries: 3
-      start_period: 10s
 
   migrations:
     build:

.devcontainer/post-create.sh

@@ -8,11 +8,43 @@ echo "🔧 Setting up Sim development environment..."
 # Change to the workspace root directory
 cd /workspace
 
-# Setup .bashrc
-echo "📄 Setting up .bashrc with aliases..."
-cp /workspace/.devcontainer/.bashrc ~/.bashrc
-# Add to .profile to ensure .bashrc is sourced in non-interactive shells
-echo 'if [ -f ~/.bashrc ]; then . ~/.bashrc; fi' >> ~/.profile
+# Install global packages for development (done at runtime, not build time)
+echo "📦 Installing global development tools..."
+bun install -g turbo drizzle-kit typescript @types/node 2>/dev/null || {
+  echo "⚠️ Some global packages may already be installed, continuing..."
+}
+
+# Set up bun completions (with proper shell detection)
+echo "🔧 Setting up shell completions..."
+if [ -n "$SHELL" ] && [ -f "$SHELL" ]; then
+  SHELL=/bin/bash bun completions 2>/dev/null | sudo tee /etc/bash_completion.d/bun > /dev/null || {
+    echo "⚠️ Could not install bun completions, but continuing..."
+  }
+fi
+
+# Add project commands to shell profile
+echo "📄 Setting up project commands..."
+# Add sourcing of sim-commands.sh to user's shell config files if they exist
+for rcfile in ~/.bashrc ~/.zshrc; do
+  if [ -f "$rcfile" ]; then
+    # Check if already added
+    if ! grep -q "sim-commands.sh" "$rcfile"; then
+      echo "" >> "$rcfile"
+      echo "# Sim project commands" >> "$rcfile"
+      echo "if [ -f /workspace/.devcontainer/sim-commands.sh ]; then" >> "$rcfile"
+      echo "  source /workspace/.devcontainer/sim-commands.sh" >> "$rcfile"
+      echo "fi" >> "$rcfile"
+    fi
+  fi
+done
+
+# If no rc files exist yet, create a minimal one
+if [ ! -f ~/.bashrc ] && [ ! -f ~/.zshrc ]; then
+  echo "# Source Sim project commands" > ~/.bashrc
+  echo "if [ -f /workspace/.devcontainer/sim-commands.sh ]; then" >> ~/.bashrc
+  echo "  source /workspace/.devcontainer/sim-commands.sh" >> ~/.bashrc
+  echo "fi" >> ~/.bashrc
+fi
 
 # Clean and reinstall dependencies to ensure platform compatibility
 echo "📦 Cleaning and reinstalling dependencies..."
@@ -29,18 +61,12 @@ chmod 700 ~/.bun ~/.bun/cache
 
 # Install dependencies with platform-specific binaries
 echo "Installing dependencies with Bun..."
-bun install || {
-  echo "⚠️ bun install had issues but continuing setup..."
-}
+bun install
 
 # Check for native dependencies
 echo "Checking for native dependencies compatibility..."
-NATIVE_DEPS=$(grep '"trustedDependencies"' apps/sim/package.json || echo "")
-if [ ! -z "$NATIVE_DEPS" ]; then
-  echo "⚠️ Native dependencies detected. Ensuring compatibility with Bun..."
-  for pkg in $(echo $NATIVE_DEPS | grep -oP '"[^"]*"' | tr -d '"' | grep -v "trustedDependencies"); do
-    echo "Checking compatibility for $pkg..."
-  done
+if grep -q '"trustedDependencies"' apps/sim/package.json 2>/dev/null; then
+  echo "⚠️ Native dependencies detected. Bun will handle compatibility during install."
 fi
 
 # Set up environment variables if .env doesn't exist for the sim app
@@ -82,23 +108,6 @@ echo "Waiting for database to be ready..."
   fi
 ) || echo "⚠️ Database setup had issues but continuing..."
 
-# Add additional helpful aliases to .bashrc
-cat << EOF >> ~/.bashrc
-
-# Additional Sim Development Aliases
-alias migrate="cd /workspace/apps/sim && DATABASE_URL=postgresql://postgres:postgres@db:5432/simstudio bunx drizzle-kit push"
-alias generate="cd /workspace/apps/sim && bunx drizzle-kit generate"
-alias dev="cd /workspace && bun run dev"
-alias build="cd /workspace && bun run build"
-alias start="cd /workspace && bun run dev"
-alias lint="cd /workspace/apps/sim && bun run lint"
-alias test="cd /workspace && bun run test"
-alias bun-update="cd /workspace && bun update"
-EOF
-
-# Source the .bashrc to make aliases available immediately
-. ~/.bashrc
-
 # Clear the welcome message flag to ensure it shows after setup
 unset SIM_WELCOME_SHOWN
 

.devcontainer/sim-commands.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+# Sim Project Commands
+# Source this file to add project-specific commands to your shell
+# Add to your ~/.bashrc or ~/.zshrc: source /workspace/.devcontainer/sim-commands.sh
+
+# Project-specific aliases for Sim development
+alias sim-start="cd /workspace && bun run dev:full"
+alias sim-app="cd /workspace && bun run dev"
+alias sim-sockets="cd /workspace && bun run dev:sockets"
+alias sim-migrate="cd /workspace/apps/sim && bunx drizzle-kit push"
+alias sim-generate="cd /workspace/apps/sim && bunx drizzle-kit generate"
+alias sim-rebuild="cd /workspace && bun run build && bun run start"
+alias docs-dev="cd /workspace/apps/docs && bun run dev"
+
+# Database connection helpers
+alias pgc="PGPASSWORD=postgres psql -h db -U postgres -d simstudio"
+alias check-db="PGPASSWORD=postgres psql -h db -U postgres -c '\l'"
+
+# Default to workspace directory
+cd /workspace 2>/dev/null || true
+
+# Welcome message - show once per session
+if [ -z "$SIM_WELCOME_SHOWN" ]; then
+  export SIM_WELCOME_SHOWN=1
+
+  echo ""
+  echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+  echo "🚀 Sim Development Environment"
+  echo ""
+  echo "Project commands:"
+  echo "  sim-start      - Start app + socket server"
+  echo "  sim-app        - Start only main app"
+  echo "  sim-sockets    - Start only socket server"
+  echo "  sim-migrate    - Push schema changes"
+  echo "  sim-generate   - Generate migrations"
+  echo ""
+  echo "Database:"
+  echo "  pgc            - Connect to PostgreSQL"
+  echo "  check-db       - List databases"
+  echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+  echo ""
+fi

.gitattributes

@@ -0,0 +1,34 @@
+# Set default behavior to automatically normalize line endings
+* text=auto eol=lf
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout
+*.ts text eol=lf
+*.tsx text eol=lf
+*.js text eol=lf
+*.jsx text eol=lf
+*.json text eol=lf
+*.md text eol=lf
+*.yml text eol=lf
+*.yaml text eol=lf
+*.toml text eol=lf
+*.css text eol=lf
+*.scss text eol=lf
+*.sh text eol=lf
+*.bash text eol=lf
+Dockerfile* text eol=lf
+.dockerignore text eol=lf
+.gitignore text eol=lf
+.gitattributes text eol=lf
+
+# Denote all files that are truly binary and should not be modified
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.ico binary
+*.woff binary
+*.woff2 binary
+*.ttf binary
+*.eot binary
+*.pdf binary

.github/CONTRIBUTING.md

@@ -321,8 +321,7 @@ In addition, you will need to update the registries:
        {
          id: 'operation',
          title: 'Operation',
-         type: 'dropdown',
-         layout: 'full',
+         type: 'dropdown'
          required: true,
          options: [
            { label: 'Generate Embeddings', id: 'generate' },
@@ -333,8 +332,7 @@ In addition, you will need to update the registries:
        {
          id: 'apiKey',
          title: 'API Key',
-         type: 'short-input',
-         layout: 'full',
+         type: 'short-input'
          placeholder: 'Your Pinecone API key',
          password: true,
          required: true,

.github/workflows/build.yml

@@ -1,151 +0,0 @@
-name: Build and Publish Docker Image
-
-on:
-  push:
-    branches: [main, staging]
-
-jobs:
-  build-and-push:
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          # AMD64 builds on x86 runners
-          - dockerfile: ./docker/app.Dockerfile
-            image: ghcr.io/simstudioai/simstudio
-            platform: linux/amd64
-            arch: amd64
-            runner: linux-x64-8-core
-          - dockerfile: ./docker/db.Dockerfile
-            image: ghcr.io/simstudioai/migrations
-            platform: linux/amd64
-            arch: amd64
-            runner: linux-x64-8-core
-          - dockerfile: ./docker/realtime.Dockerfile
-            image: ghcr.io/simstudioai/realtime
-            platform: linux/amd64
-            arch: amd64
-            runner: linux-x64-8-core
-          # ARM64 builds on native ARM64 runners
-          - dockerfile: ./docker/app.Dockerfile
-            image: ghcr.io/simstudioai/simstudio
-            platform: linux/arm64
-            arch: arm64
-            runner: linux-arm64-8-core
-          - dockerfile: ./docker/db.Dockerfile
-            image: ghcr.io/simstudioai/migrations
-            platform: linux/arm64
-            arch: arm64
-            runner: linux-arm64-8-core
-          - dockerfile: ./docker/realtime.Dockerfile
-            image: ghcr.io/simstudioai/realtime
-            platform: linux/arm64
-            arch: arm64
-            runner: linux-arm64-8-core
-    runs-on: ${{ matrix.runner }}
-    permissions:
-      contents: read
-      packages: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to the Container registry
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ matrix.image }}
-          tags: |
-            type=raw,value=latest-${{ matrix.arch }},enable=${{ github.ref == 'refs/heads/main' }}
-            type=raw,value=staging-${{ github.sha }}-${{ matrix.arch }},enable=${{ github.ref == 'refs/heads/staging' }}
-            type=sha,format=long,suffix=-${{ matrix.arch }}
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: ${{ matrix.dockerfile }}
-          platforms: ${{ matrix.platform }}
-          push: ${{ github.event_name != 'pull_request' && github.ref == 'refs/heads/main' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha,scope=build-v3
-          cache-to: type=gha,mode=max,scope=build-v3
-          provenance: false
-          sbom: false
-
-  create-manifests:
-    runs-on: ubuntu-latest
-    needs: build-and-push
-    if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
-    strategy:
-      matrix:
-        include:
-          - image: ghcr.io/simstudioai/simstudio
-          - image: ghcr.io/simstudioai/migrations
-          - image: ghcr.io/simstudioai/realtime
-    permissions:
-      contents: read
-      packages: write
-
-    steps:
-      - name: Log in to the Container registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract metadata for manifest
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ matrix.image }}
-          tags: |
-            type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
-            type=sha,format=long
-
-      - name: Create and push manifest
-        run: |
-          # Extract the tags from metadata (these are the final manifest tags we want)
-          MANIFEST_TAGS="${{ steps.meta.outputs.tags }}"
-
-          # Create manifest for each tag
-          for manifest_tag in $MANIFEST_TAGS; do
-            echo "Creating manifest for $manifest_tag"
-
-            # The architecture-specific images have -amd64 and -arm64 suffixes
-            amd64_image="${manifest_tag}-amd64"
-            arm64_image="${manifest_tag}-arm64"
-
-            echo "Looking for images: $amd64_image and $arm64_image"
-
-            # Check if both architecture images exist
-            if docker manifest inspect "$amd64_image" >/dev/null 2>&1 && docker manifest inspect "$arm64_image" >/dev/null 2>&1; then
-              echo "Both images found, creating manifest..."
-              docker manifest create "$manifest_tag" \
-                "$amd64_image" \
-                "$arm64_image"
-              docker manifest push "$manifest_tag"
-              echo "Successfully created and pushed manifest for $manifest_tag"
-            else
-              echo "Error: One or both architecture images not found"
-              echo "Checking AMD64 image: $amd64_image"
-              docker manifest inspect "$amd64_image" || echo "AMD64 image not found"
-              echo "Checking ARM64 image: $arm64_image"
-              docker manifest inspect "$arm64_image" || echo "ARM64 image not found"
-              exit 1
-            fi
-          done

.github/workflows/ci.yml

@@ -6,72 +6,210 @@ on:
   pull_request:
     branches: [main, staging]
 
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: false
+
 jobs:
-  test:
+  test-build:
     name: Test and Build
-    runs-on: ubuntu-latest
+    uses: ./.github/workflows/test-build.yml
+    secrets: inherit
 
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Bun
-        uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: latest
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: latest
-
-      - name: Install dependencies
-        run: bun install --frozen-lockfile
-
-      - name: Run tests with coverage
-        env:
-          NODE_OPTIONS: '--no-warnings'
-          NEXT_PUBLIC_APP_URL: 'https://www.sim.ai'
-          ENCRYPTION_KEY: '7cf672e460e430c1fba707575c2b0e2ad5a99dddf9b7b7e3b5646e630861db1c' # dummy key for CI only
-        run: bun run test
-
-      - name: Build application
-        env:
-          NODE_OPTIONS: '--no-warnings'
-          NEXT_PUBLIC_APP_URL: 'https://www.sim.ai'
-          STRIPE_SECRET_KEY: 'dummy_key_for_ci_only'
-          STRIPE_WEBHOOK_SECRET: 'dummy_secret_for_ci_only'
-          RESEND_API_KEY: 'dummy_key_for_ci_only'
-          AWS_REGION: 'us-west-2'
-          ENCRYPTION_KEY: '7cf672e460e430c1fba707575c2b0e2ad5a99dddf9b7b7e3b5646e630861db1c' # dummy key for CI only
-        run: bun run build
-
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v5
-        with:
-          directory: ./apps/sim/coverage
-          fail_ci_if_error: false
-          verbose: true
-
-  migrations:
-    name: Apply Database Migrations
-    runs-on: ubuntu-latest
+  # Build AMD64 images and push to ECR immediately (+ GHCR for main)
+  build-amd64:
+    name: Build AMD64
+    needs: test-build
     if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/staging')
-    needs: test
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - dockerfile: ./docker/app.Dockerfile
+            ghcr_image: ghcr.io/simstudioai/simstudio
+            ecr_repo_secret: ECR_APP
+          - dockerfile: ./docker/db.Dockerfile
+            ghcr_image: ghcr.io/simstudioai/migrations
+            ecr_repo_secret: ECR_MIGRATIONS
+          - dockerfile: ./docker/realtime.Dockerfile
+            ghcr_image: ghcr.io/simstudioai/realtime
+            ecr_repo_secret: ECR_REALTIME
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup Bun
-        uses: oven-sh/setup-bun@v2
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v4
         with:
-          bun-version: latest
+          role-to-assume: ${{ github.ref == 'refs/heads/main' && secrets.AWS_ROLE_TO_ASSUME || secrets.STAGING_AWS_ROLE_TO_ASSUME }}
+          aws-region: ${{ github.ref == 'refs/heads/main' && secrets.AWS_REGION || secrets.STAGING_AWS_REGION }}
 
-      - name: Install dependencies
-        run: bun install
+      - name: Login to Amazon ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v2
 
-      - name: Apply migrations
-        working-directory: ./apps/sim
-        env:
-          DATABASE_URL: ${{ github.ref == 'refs/heads/main' && secrets.DATABASE_URL || secrets.STAGING_DATABASE_URL }}
-        run: bunx drizzle-kit migrate
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Login to GHCR
+        if: github.ref == 'refs/heads/main'
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: useblacksmith/setup-docker-builder@v1
+
+      - name: Generate tags
+        id: meta
+        run: |
+          ECR_REGISTRY="${{ steps.login-ecr.outputs.registry }}"
+          ECR_REPO="${{ secrets[matrix.ecr_repo_secret] }}"
+          GHCR_IMAGE="${{ matrix.ghcr_image }}"
+
+          # ECR tags (always build for ECR)
+          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
+            ECR_TAG="latest"
+          else
+            ECR_TAG="staging"
+          fi
+          ECR_IMAGE="${ECR_REGISTRY}/${ECR_REPO}:${ECR_TAG}"
+
+          # Build tags list
+          TAGS="${ECR_IMAGE}"
+
+          # Add GHCR tags only for main branch
+          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
+            GHCR_AMD64="${GHCR_IMAGE}:latest-amd64"
+            GHCR_SHA="${GHCR_IMAGE}:${{ github.sha }}-amd64"
+            TAGS="${TAGS},$GHCR_AMD64,$GHCR_SHA"
+          fi
+
+          echo "tags=${TAGS}" >> $GITHUB_OUTPUT
+
+      - name: Build and push images
+        uses: useblacksmith/build-push-action@v2
+        with:
+          context: .
+          file: ${{ matrix.dockerfile }}
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          provenance: false
+          sbom: false
+
+  # Build ARM64 images for GHCR (main branch only, runs in parallel)
+  build-ghcr-arm64:
+    name: Build ARM64 (GHCR Only)
+    needs: test-build
+    runs-on: blacksmith-8vcpu-ubuntu-2404-arm
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    permissions:
+      contents: read
+      packages: write
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - dockerfile: ./docker/app.Dockerfile
+            image: ghcr.io/simstudioai/simstudio
+          - dockerfile: ./docker/db.Dockerfile
+            image: ghcr.io/simstudioai/migrations
+          - dockerfile: ./docker/realtime.Dockerfile
+            image: ghcr.io/simstudioai/realtime
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Login to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: useblacksmith/setup-docker-builder@v1
+
+      - name: Generate ARM64 tags
+        id: meta
+        run: |
+          IMAGE="${{ matrix.image }}"
+          echo "tags=${IMAGE}:latest-arm64,${IMAGE}:${{ github.sha }}-arm64" >> $GITHUB_OUTPUT
+
+      - name: Build and push ARM64 to GHCR
+        uses: useblacksmith/build-push-action@v2
+        with:
+          context: .
+          file: ${{ matrix.dockerfile }}
+          platforms: linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          provenance: false
+          sbom: false
+
+  # Create GHCR multi-arch manifests (only for main, after both builds)
+  create-ghcr-manifests:
+    name: Create GHCR Manifests
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    needs: [build-amd64, build-ghcr-arm64]
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    permissions:
+      packages: write
+    strategy:
+      matrix:
+        include:
+          - image: ghcr.io/simstudioai/simstudio
+          - image: ghcr.io/simstudioai/migrations
+          - image: ghcr.io/simstudioai/realtime
+
+    steps:
+      - name: Login to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create and push manifests
+        run: |
+          IMAGE_BASE="${{ matrix.image }}"
+
+          # Create latest manifest
+          docker manifest create "${IMAGE_BASE}:latest" \
+            "${IMAGE_BASE}:latest-amd64" \
+            "${IMAGE_BASE}:latest-arm64"
+          docker manifest push "${IMAGE_BASE}:latest"
+
+          # Create SHA manifest
+          docker manifest create "${IMAGE_BASE}:${{ github.sha }}" \
+            "${IMAGE_BASE}:${{ github.sha }}-amd64" \
+            "${IMAGE_BASE}:${{ github.sha }}-arm64"
+          docker manifest push "${IMAGE_BASE}:${{ github.sha }}"
+
+  # Deploy Trigger.dev (after ECR images are pushed, runs in parallel with process-docs)
+  trigger-deploy:
+    name: Deploy Trigger.dev
+    needs: build-amd64
+    if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/staging')
+    uses: ./.github/workflows/trigger-deploy.yml
+    secrets: inherit
+
+  # Process docs embeddings (after ECR images are pushed, runs in parallel with trigger-deploy)
+  process-docs:
+    name: Process Docs
+    needs: build-amd64
+    if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/staging')
+    uses: ./.github/workflows/docs-embeddings.yml
+    secrets: inherit

.github/workflows/docs-embeddings.yml

@@ -1,16 +1,13 @@
 name: Process Docs Embeddings
 
 on:
-  push:
-    branches: [main, staging]
-    paths:
-      - 'apps/docs/**'
+  workflow_call:
   workflow_dispatch: # Allow manual triggering
 
 jobs:
   process-docs-embeddings:
     name: Process Documentation Embeddings
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/staging'
 
     steps:
@@ -20,7 +17,7 @@ jobs:
       - name: Setup Bun
         uses: oven-sh/setup-bun@v2
         with:
-          bun-version: latest
+          bun-version: 1.2.22
 
       - name: Setup Node
         uses: actions/setup-node@v4
@@ -35,4 +32,4 @@ jobs:
         env:
           DATABASE_URL: ${{ github.ref == 'refs/heads/main' && secrets.DATABASE_URL || secrets.STAGING_DATABASE_URL }}
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-        run: bun run scripts/process-docs-embeddings.ts --clear 
+        run: bun run scripts/process-docs.ts --clear 

.github/workflows/i18n.yml

@@ -0,0 +1,158 @@
+name: 'Auto-translate Documentation'
+
+on:
+  push:
+    branches: [ staging ]
+    paths:
+      - 'apps/docs/content/docs/en/**'
+      - 'apps/docs/i18n.json'
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  translate:
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    if: github.actor != 'github-actions[bot]' # Prevent infinite loops
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GH_PAT }}
+          fetch-depth: 0
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.2.22
+
+      - name: Run Lingo.dev translations
+        env:
+          LINGODOTDEV_API_KEY: ${{ secrets.LINGODOTDEV_API_KEY }}
+        run: |
+          cd apps/docs
+          bunx lingo.dev@latest i18n
+      
+      - name: Check for translation changes
+        id: changes
+        run: |
+          cd apps/docs
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          
+          if [ -n "$(git status --porcelain content/docs)" ]; then
+            echo "changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "changes=false" >> $GITHUB_OUTPUT
+          fi
+      
+      - name: Create Pull Request with translations
+        if: steps.changes.outputs.changes == 'true'
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.GH_PAT }}
+          commit-message: "feat(i18n): update translations"
+          title: "feat(i18n): update translations"
+          body: |
+            ## Summary
+            Automated translation updates triggered by changes to documentation.
+            
+            This PR was automatically created after content changes were made, updating translations for all supported languages using Lingo.dev AI translation engine.
+            
+            **Original trigger**: ${{ github.event.head_commit.message }}
+            **Commit**: ${{ github.sha }}
+            **Workflow**: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+            
+            ## Type of Change
+            - [ ] Bug fix
+            - [ ] New feature  
+            - [ ] Breaking change
+            - [x] Documentation
+            - [ ] Other: ___________
+            
+            ## Testing
+            This PR includes automated translations for modified English documentation content:
+            - 🇪🇸 Spanish (es) translations
+            - 🇫🇷 French (fr) translations
+            - 🇨🇳 Chinese (zh) translations
+            - 🇯🇵 Japanese (ja) translations
+            - 🇩🇪 German (de) translations
+            
+            **What reviewers should focus on:**
+            - Verify translated content accuracy and context
+            - Check that all links and references work correctly in translated versions
+            - Ensure formatting, code blocks, and structure are preserved
+            - Validate that technical terms are appropriately translated
+            
+            ## Checklist
+            - [x] Code follows project style guidelines (automated translation)
+            - [x] Self-reviewed my changes (automated process)
+            - [ ] Tests added/updated and passing
+            - [x] No new warnings introduced
+            - [x] I confirm that I have read and agree to the terms outlined in the [Contributor License Agreement (CLA)](./CONTRIBUTING.md#contributor-license-agreement-cla)
+            
+            ## Screenshots/Videos
+            <!-- Translation changes are text-based - no visual changes expected -->
+            <!-- Reviewers should check the documentation site renders correctly for all languages -->
+          branch: auto-translate/staging-merge-${{ github.run_id }}
+          base: staging
+          labels: |
+            i18n
+
+  verify-translations:
+    needs: translate
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    if: always() # Run even if translation fails
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: staging
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.2.22
+
+      - name: Install dependencies
+        run: |
+          cd apps/docs
+          bun install
+
+      - name: Build documentation to verify translations
+        run: |
+          cd apps/docs
+          bun run build
+
+      - name: Report translation status
+        run: |
+          cd apps/docs
+          echo "## Translation Status Report" >> $GITHUB_STEP_SUMMARY
+          echo "**Triggered by merge to staging branch**" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          
+          en_count=$(find content/docs/en -name "*.mdx" | wc -l)
+          es_count=$(find content/docs/es -name "*.mdx" 2>/dev/null | wc -l || echo 0)
+          fr_count=$(find content/docs/fr -name "*.mdx" 2>/dev/null | wc -l || echo 0)
+          zh_count=$(find content/docs/zh -name "*.mdx" 2>/dev/null | wc -l || echo 0)
+          ja_count=$(find content/docs/ja -name "*.mdx" 2>/dev/null | wc -l || echo 0)
+          de_count=$(find content/docs/de -name "*.mdx" 2>/dev/null | wc -l || echo 0)
+          
+          es_percentage=$((es_count * 100 / en_count))
+          fr_percentage=$((fr_count * 100 / en_count))
+          zh_percentage=$((zh_count * 100 / en_count))
+          ja_percentage=$((ja_count * 100 / en_count))
+          de_percentage=$((de_count * 100 / en_count))
+          
+          echo "### Coverage Statistics" >> $GITHUB_STEP_SUMMARY
+          echo "- **🇬🇧 English**: $en_count files (source)" >> $GITHUB_STEP_SUMMARY
+          echo "- **🇪🇸 Spanish**: $es_count/$en_count files ($es_percentage%)" >> $GITHUB_STEP_SUMMARY
+          echo "- **🇫🇷 French**: $fr_count/$en_count files ($fr_percentage%)" >> $GITHUB_STEP_SUMMARY
+          echo "- **🇨🇳 Chinese**: $zh_count/$en_count files ($zh_percentage%)" >> $GITHUB_STEP_SUMMARY
+          echo "- **🇯🇵 Japanese**: $ja_count/$en_count files ($ja_percentage%)" >> $GITHUB_STEP_SUMMARY
+          echo "- **🇩🇪 German**: $de_count/$en_count files ($de_percentage%)" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "🔄 **Auto-translation PR**: Check for new pull request with updated translations" >> $GITHUB_STEP_SUMMARY

.github/workflows/images.yml

@@ -0,0 +1,181 @@
+name: Build and Push Images
+
+on:
+  workflow_call:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  packages: write
+  id-token: write
+
+jobs:
+  build-amd64:
+    name: Build AMD64
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - dockerfile: ./docker/app.Dockerfile
+            ghcr_image: ghcr.io/simstudioai/simstudio
+            ecr_repo_secret: ECR_APP
+          - dockerfile: ./docker/db.Dockerfile
+            ghcr_image: ghcr.io/simstudioai/migrations
+            ecr_repo_secret: ECR_MIGRATIONS
+          - dockerfile: ./docker/realtime.Dockerfile
+            ghcr_image: ghcr.io/simstudioai/realtime
+            ecr_repo_secret: ECR_REALTIME
+    outputs:
+      registry: ${{ steps.login-ecr.outputs.registry }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ github.ref == 'refs/heads/main' && secrets.AWS_ROLE_TO_ASSUME || secrets.STAGING_AWS_ROLE_TO_ASSUME }}
+          aws-region: ${{ github.ref == 'refs/heads/main' && secrets.AWS_REGION || secrets.STAGING_AWS_REGION }}
+
+      - name: Login to Amazon ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v2
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Login to GHCR
+        if: github.ref == 'refs/heads/main'
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: useblacksmith/setup-docker-builder@v1
+
+      - name: Generate tags
+        id: meta
+        run: |
+          ECR_REGISTRY="${{ steps.login-ecr.outputs.registry }}"
+          ECR_REPO="${{ secrets[matrix.ecr_repo_secret] }}"
+          GHCR_IMAGE="${{ matrix.ghcr_image }}"
+
+          # ECR tags (always build for ECR)
+          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
+            ECR_TAG="latest"
+          else
+            ECR_TAG="staging"
+          fi
+          ECR_IMAGE="${ECR_REGISTRY}/${ECR_REPO}:${ECR_TAG}"
+
+          # Build tags list
+          TAGS="${ECR_IMAGE}"
+
+          # Add GHCR tags only for main branch
+          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
+            GHCR_AMD64="${GHCR_IMAGE}:latest-amd64"
+            GHCR_SHA="${GHCR_IMAGE}:${{ github.sha }}-amd64"
+            TAGS="${TAGS},$GHCR_AMD64,$GHCR_SHA"
+          fi
+
+          echo "tags=${TAGS}" >> $GITHUB_OUTPUT
+
+      - name: Build and push images
+        uses: useblacksmith/build-push-action@v2
+        with:
+          context: .
+          file: ${{ matrix.dockerfile }}
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          provenance: false
+          sbom: false
+
+  build-ghcr-arm64:
+    name: Build ARM64 (GHCR Only)
+    runs-on: blacksmith-8vcpu-ubuntu-2404-arm
+    if: github.ref == 'refs/heads/main'
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - dockerfile: ./docker/app.Dockerfile
+            image: ghcr.io/simstudioai/simstudio
+          - dockerfile: ./docker/db.Dockerfile
+            image: ghcr.io/simstudioai/migrations
+          - dockerfile: ./docker/realtime.Dockerfile
+            image: ghcr.io/simstudioai/realtime
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Login to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: useblacksmith/setup-docker-builder@v1
+
+      - name: Generate ARM64 tags
+        id: meta
+        run: |
+          IMAGE="${{ matrix.image }}"
+          echo "tags=${IMAGE}:latest-arm64,${IMAGE}:${{ github.sha }}-arm64" >> $GITHUB_OUTPUT
+
+      - name: Build and push ARM64 to GHCR
+        uses: useblacksmith/build-push-action@v2
+        with:
+          context: .
+          file: ${{ matrix.dockerfile }}
+          platforms: linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          provenance: false
+          sbom: false
+
+  create-ghcr-manifests:
+    name: Create GHCR Manifests
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    needs: [build-amd64, build-ghcr-arm64]
+    if: github.ref == 'refs/heads/main'
+    strategy:
+      matrix:
+        include:
+          - image: ghcr.io/simstudioai/simstudio
+          - image: ghcr.io/simstudioai/migrations
+          - image: ghcr.io/simstudioai/realtime
+
+    steps:
+      - name: Login to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create and push manifests
+        run: |
+          IMAGE_BASE="${{ matrix.image }}"
+
+          # Create latest manifest
+          docker manifest create "${IMAGE_BASE}:latest" \
+            "${IMAGE_BASE}:latest-amd64" \
+            "${IMAGE_BASE}:latest-arm64"
+          docker manifest push "${IMAGE_BASE}:latest"
+
+          # Create SHA manifest
+          docker manifest create "${IMAGE_BASE}:${{ github.sha }}" \
+            "${IMAGE_BASE}:${{ github.sha }}-amd64" \
+            "${IMAGE_BASE}:${{ github.sha }}-arm64"
+          docker manifest push "${IMAGE_BASE}:${{ github.sha }}"

.github/workflows/migrations.yml

@@ -0,0 +1,28 @@
+name: Database Migrations
+
+on:
+  workflow_call:
+  workflow_dispatch:
+
+jobs:
+  migrate:
+    name: Apply Database Migrations
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.2.22
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Apply migrations
+        working-directory: ./packages/db
+        env:
+          DATABASE_URL: ${{ github.ref == 'refs/heads/main' && secrets.DATABASE_URL || secrets.STAGING_DATABASE_URL }}
+        run: bunx drizzle-kit migrate --config=./drizzle.config.ts

.github/workflows/publish-cli.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   publish-npm:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -16,7 +16,7 @@ jobs:
       - name: Setup Bun
         uses: oven-sh/setup-bun@v2
         with:
-          bun-version: latest
+          bun-version: 1.2.22
 
       - name: Setup Node.js for npm publishing
         uses: actions/setup-node@v4

.github/workflows/publish-python-sdk.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   publish-pypi:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -84,6 +84,6 @@ jobs:
             ```
             
             ### Documentation
-            See the [README](https://github.com/simstudio/sim/tree/main/packages/python-sdk) for usage instructions.
+            See the [README](https://github.com/simstudioai/sim/tree/main/packages/python-sdk) or the [docs](https://docs.sim.ai/sdks/python) for more information.
           draft: false
           prerelease: false 

.github/workflows/publish-ts-sdk.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   publish-npm:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -16,16 +16,15 @@ jobs:
       - name: Setup Bun
         uses: oven-sh/setup-bun@v2
         with:
-          bun-version: latest
+          bun-version: 1.2.22
 
       - name: Setup Node.js for npm publishing
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '22'
           registry-url: 'https://registry.npmjs.org/'
 
       - name: Install dependencies
-        working-directory: packages/ts-sdk
         run: bun install
 
       - name: Run tests
@@ -80,6 +79,6 @@ jobs:
             ```
             
             ### Documentation
-            See the [README](https://github.com/simstudio/sim/tree/main/packages/ts-sdk) for usage instructions.
+            See the [README](https://github.com/simstudioai/sim/tree/main/packages/ts-sdk) or the [docs](https://docs.sim.ai/sdks/typescript) for more information.
           draft: false
           prerelease: false 

.github/workflows/test-build.yml

@@ -0,0 +1,57 @@
+name: Test and Build
+
+on:
+  workflow_call:
+  workflow_dispatch:
+
+jobs:
+  test-build:
+    name: Test and Build
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.2.22
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Lint code
+        run: bun run lint:check
+
+      - name: Run tests with coverage
+        env:
+          NODE_OPTIONS: '--no-warnings'
+          NEXT_PUBLIC_APP_URL: 'https://www.sim.ai'
+          DATABASE_URL: 'postgresql://postgres:postgres@localhost:5432/simstudio'
+          ENCRYPTION_KEY: '7cf672e460e430c1fba707575c2b0e2ad5a99dddf9b7b7e3b5646e630861db1c' # dummy key for CI only
+        run: bun run test
+
+      - name: Build application
+        env:
+          NODE_OPTIONS: '--no-warnings'
+          NEXT_PUBLIC_APP_URL: 'https://www.sim.ai'
+          DATABASE_URL: 'postgresql://postgres:postgres@localhost:5432/simstudio'
+          STRIPE_SECRET_KEY: 'dummy_key_for_ci_only'
+          STRIPE_WEBHOOK_SECRET: 'dummy_secret_for_ci_only'
+          RESEND_API_KEY: 'dummy_key_for_ci_only'
+          AWS_REGION: 'us-west-2'
+          ENCRYPTION_KEY: '7cf672e460e430c1fba707575c2b0e2ad5a99dddf9b7b7e3b5646e630861db1c' # dummy key for CI only
+        run: bun run build
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          directory: ./apps/sim/coverage
+          fail_ci_if_error: false
+          verbose: true

.github/workflows/trigger-deploy.yml

@@ -1,44 +1,44 @@
 name: Trigger.dev Deploy
 
 on:
-  push:
-    branches:
-      - main
-      - staging
+  workflow_call:
+  workflow_dispatch:
 
 jobs:
   deploy:
-    name: Trigger.dev Deploy
-    runs-on: ubuntu-latest
+    name: Deploy to Trigger.dev
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     concurrency:
       group: trigger-deploy-${{ github.ref }}
       cancel-in-progress: false
     env:
       TRIGGER_ACCESS_TOKEN: ${{ secrets.TRIGGER_ACCESS_TOKEN }}
+      TRIGGER_PROJECT_ID: ${{ secrets.TRIGGER_PROJECT_ID }}
+
     steps:
-      - name: Checkout repository
+      - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
+      - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 'lts/*'
+          node-version: latest
 
       - name: Setup Bun
         uses: oven-sh/setup-bun@v2
         with:
-          bun-version: latest
+          bun-version: 1.2.22
 
       - name: Install dependencies
         run: bun install
 
-      - name: Deploy to Staging
+      - name: Deploy to Trigger.dev (Staging)
         if: github.ref == 'refs/heads/staging'
         working-directory: ./apps/sim
-        run: npx --yes trigger.dev@4.0.1 deploy -e staging
+        run: npx --yes trigger.dev@4.0.4 deploy -e staging
 
-      - name: Deploy to Production
+      - name: Deploy to Trigger.dev (Production)
         if: github.ref == 'refs/heads/main'
         working-directory: ./apps/sim
-        run: npx --yes trigger.dev@4.0.1 deploy
+        run: npx --yes trigger.dev@4.0.4 deploy
 

.gitignore

@@ -46,7 +46,7 @@ sim-standalone.tar.gz
 next-env.d.ts
 
 # cursorrules
-.cursorrules
+# .cursorrules
 
 # docs
 /apps/docs/.source
@@ -68,4 +68,5 @@ start-collector.sh
 .vscode
 
 ## Helm Chart Tests
-helm/sim/test
+helm/sim/test
+i18n.cache

README.md

@@ -13,8 +13,25 @@
   <a href="https://docs.sim.ai" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/Docs-6F3DFA.svg" alt="Documentation"></a>
 </p>
 
+### Build Workflows with Ease
+Design agent workflows visually on a canvas—connect agents, tools, and blocks, then run them instantly.
+
 <p align="center">
-  <img src="apps/sim/public/static/demo.gif" alt="Sim Demo" width="800"/>
+  <img src="apps/sim/public/static/workflow.gif" alt="Workflow Builder Demo" width="800"/>
+</p>
+
+### Supercharge with Copilot
+Leverage Copilot to generate nodes, fix errors, and iterate on flows directly from natural language.
+
+<p align="center">
+  <img src="apps/sim/public/static/copilot.gif" alt="Copilot Demo" width="800"/>
+</p>
+
+### Integrate Vector Databases
+Upload documents to a vector store and let agents answer questions grounded in your specific content.
+
+<p align="center">
+  <img src="apps/sim/public/static/knowledge.gif" alt="Knowledge Uploads and Retrieval Demo" width="800"/>
 </p>
 
 ## Quickstart
@@ -127,8 +144,20 @@ DATABASE_URL="postgresql://postgres:your_password@localhost:5432/simstudio"
 
 4. Set up the database:
 
+First, configure the database package environment:
 ```bash
-bunx drizzle-kit migrate 
+cd packages/db
+cp .env.example .env 
+```
+
+Update your `packages/db/.env` file with the database URL:
+```bash
+DATABASE_URL="postgresql://postgres:your_password@localhost:5432/simstudio"
+```
+
+Then run the migrations:
+```bash
+bunx drizzle-kit migrate --config=./drizzle.config.ts
 ```
 
 5. Start the development servers:
@@ -159,7 +188,7 @@ bun run dev:sockets
 Copilot is a Sim-managed service. To use Copilot on a self-hosted instance:
 
 - Go to https://sim.ai → Settings → Copilot and generate a Copilot API key
-- Set `COPILOT_API_KEY` in your self-hosted environment to that value
+- Set `COPILOT_API_KEY` environment variable in your self-hosted apps/sim/.env file to that value
 
 ## Tech Stack
 
@@ -174,6 +203,7 @@ Copilot is a Sim-managed service. To use Copilot on a self-hosted instance:
 - **Monorepo**: [Turborepo](https://turborepo.org/)
 - **Realtime**: [Socket.io](https://socket.io/)
 - **Background Jobs**: [Trigger.dev](https://trigger.dev/)
+- **Remote Code Execution**: [E2B](https://www.e2b.dev/)
 
 ## Contributing
 

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

@@ -1,5 +0,0 @@
-import type { ReactNode } from 'react'
-
-export default function SlugLayout({ children }: { children: ReactNode }) {
-  return children
-}

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

@@ -1,58 +0,0 @@
-import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page'
-import { notFound } from 'next/navigation'
-import mdxComponents from '@/components/mdx-components'
-import { source } from '@/lib/source'
-
-export const dynamic = 'force-dynamic'
-
-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}
-      full={page.data.full}
-      tableOfContent={{
-        style: 'clerk',
-        enabled: true,
-        header: <div className='mb-2 font-medium text-sm'>On this page</div>,
-        single: false,
-      }}
-      article={{
-        className: 'scroll-smooth max-sm:pb-16',
-      }}
-      tableOfContentPopover={{
-        style: 'clerk',
-        enabled: true,
-      }}
-      footer={{
-        enabled: false,
-      }}
-    >
-      <DocsTitle>{page.data.title}</DocsTitle>
-      <DocsDescription>{page.data.description}</DocsDescription>
-      <DocsBody>
-        <MDX components={mdxComponents} />
-      </DocsBody>
-    </DocsPage>
-  )
-}
-
-export async function generateStaticParams() {
-  return source.generateParams()
-}
-
-export async function generateMetadata(props: { params: Promise<{ slug?: string[] }> }) {
-  const params = await props.params
-  const page = source.getPage(params.slug)
-  if (!page) notFound()
-
-  return {
-    title: page.data.title,
-    description: page.data.description,
-  }
-}

apps/docs/app/(docs)/layout.tsx

@@ -1,46 +0,0 @@
-import type { ReactNode } from 'react'
-import { DocsLayout } from 'fumadocs-ui/layouts/docs'
-import { ExternalLink, GithubIcon } from 'lucide-react'
-import Link from 'next/link'
-import { source } from '@/lib/source'
-
-const GitHubLink = () => (
-  <div className='fixed right-4 bottom-4 z-50'>
-    <Link
-      href='https://github.com/simstudioai/sim'
-      target='_blank'
-      rel='noopener noreferrer'
-      className='flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background transition-colors hover:bg-muted'
-    >
-      <GithubIcon className='h-4 w-4' />
-    </Link>
-  </div>
-)
-
-export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <>
-      <DocsLayout
-        tree={source.pageTree}
-        nav={{
-          title: <div className='flex items-center font-medium'>Sim</div>,
-        }}
-        links={[
-          {
-            text: 'Visit Sim',
-            url: 'https://sim.ai',
-            icon: <ExternalLink className='h-4 w-4' />,
-          },
-        ]}
-        sidebar={{
-          defaultOpenLevel: 1,
-          collapsible: true,
-          footer: null,
-        }}
-      >
-        {children}
-      </DocsLayout>
-      <GitHubLink />
-    </>
-  )
-}

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

@@ -0,0 +1,303 @@
+import { findNeighbour } from 'fumadocs-core/server'
+import defaultMdxComponents from 'fumadocs-ui/mdx'
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { PageNavigationArrows } from '@/components/docs-layout/page-navigation-arrows'
+import { TOCFooter } from '@/components/docs-layout/toc-footer'
+import { StructuredData } from '@/components/structured-data'
+import { CodeBlock } from '@/components/ui/code-block'
+import { CopyPageButton } from '@/components/ui/copy-page-button'
+import { 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 baseUrl = 'https://docs.sim.ai'
+
+  const pageTreeRecord = source.pageTree as Record<string, any>
+  const pageTree =
+    pageTreeRecord[params.lang] ?? pageTreeRecord.en ?? Object.values(pageTreeRecord)[0]
+  const neighbours = pageTree ? findNeighbour(pageTree, page.url) : null
+
+  const generateBreadcrumbs = () => {
+    const breadcrumbs: Array<{ name: string; url: string }> = [
+      {
+        name: 'Home',
+        url: baseUrl,
+      },
+    ]
+
+    const urlParts = page.url.split('/').filter(Boolean)
+    let currentPath = ''
+
+    urlParts.forEach((part, index) => {
+      if (index === 0 && ['en', 'es', 'fr', 'de', 'ja', 'zh'].includes(part)) {
+        currentPath = `/${part}`
+        return
+      }
+
+      currentPath += `/${part}`
+
+      const name = part
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ')
+
+      if (index === urlParts.length - 1) {
+        breadcrumbs.push({
+          name: page.data.title,
+          url: `${baseUrl}${page.url}`,
+        })
+      } else {
+        breadcrumbs.push({
+          name: name,
+          url: `${baseUrl}${currentPath}`,
+        })
+      }
+    })
+
+    return breadcrumbs
+  }
+
+  const breadcrumbs = generateBreadcrumbs()
+
+  const CustomFooter = () => (
+    <div className='mt-12'>
+      {/* Navigation links */}
+      <div className='flex items-center justify-between py-8'>
+        {neighbours?.previous ? (
+          <Link
+            href={neighbours.previous.url}
+            className='group flex items-center gap-2 text-muted-foreground transition-colors hover:text-foreground'
+          >
+            <ChevronLeft className='group-hover:-translate-x-1 h-4 w-4 transition-transform' />
+            <span className='font-medium'>{neighbours.previous.name}</span>
+          </Link>
+        ) : (
+          <div />
+        )}
+
+        {neighbours?.next ? (
+          <Link
+            href={neighbours.next.url}
+            className='group flex items-center gap-2 text-muted-foreground transition-colors hover:text-foreground'
+          >
+            <span className='font-medium'>{neighbours.next.name}</span>
+            <ChevronRight className='h-4 w-4 transition-transform group-hover:translate-x-1' />
+          </Link>
+        ) : (
+          <div />
+        )}
+      </div>
+
+      {/* Divider line */}
+      <div className='border-border border-t' />
+
+      {/* Social icons */}
+      <div className='flex items-center gap-4 py-6'>
+        <Link
+          href='https://x.com/simdotai'
+          target='_blank'
+          rel='noopener noreferrer'
+          aria-label='X (Twitter)'
+        >
+          <div
+            className='h-5 w-5 bg-gray-400 transition-colors hover:bg-gray-500 dark:bg-gray-500 dark:hover:bg-gray-400'
+            style={{
+              maskImage:
+                "url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z%22/%3E%3C/svg%3E')",
+              maskRepeat: 'no-repeat',
+              maskPosition: 'center center',
+              WebkitMaskImage:
+                "url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z%22/%3E%3C/svg%3E')",
+              WebkitMaskRepeat: 'no-repeat',
+              WebkitMaskPosition: 'center center',
+            }}
+          />
+        </Link>
+        <Link
+          href='https://github.com/simstudioai/sim'
+          target='_blank'
+          rel='noopener noreferrer'
+          aria-label='GitHub'
+        >
+          <div
+            className='h-5 w-5 bg-gray-400 transition-colors hover:bg-gray-500 dark:bg-gray-500 dark:hover:bg-gray-400'
+            style={{
+              maskImage:
+                "url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z%22/%3E%3C/svg%3E')",
+              maskRepeat: 'no-repeat',
+              maskPosition: 'center center',
+              WebkitMaskImage:
+                "url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z%22/%3E%3C/svg%3E')",
+              WebkitMaskRepeat: 'no-repeat',
+              WebkitMaskPosition: 'center center',
+            }}
+          />
+        </Link>
+        <Link
+          href='https://discord.gg/Hr4UWYEcTT'
+          target='_blank'
+          rel='noopener noreferrer'
+          aria-label='Discord'
+        >
+          <div
+            className='h-5 w-5 bg-gray-400 transition-colors hover:bg-gray-500 dark:bg-gray-500 dark:hover:bg-gray-400'
+            style={{
+              maskImage:
+                "url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z%22/%3E%3C/svg%3E')",
+              maskRepeat: 'no-repeat',
+              maskPosition: 'center center',
+              WebkitMaskImage:
+                "url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z%22/%3E%3C/svg%3E')",
+              WebkitMaskRepeat: 'no-repeat',
+              WebkitMaskPosition: 'center center',
+            }}
+          />
+        </Link>
+      </div>
+    </div>
+  )
+
+  return (
+    <>
+      <StructuredData
+        title={page.data.title}
+        description={page.data.description || ''}
+        url={`${baseUrl}${page.url}`}
+        lang={params.lang}
+        breadcrumb={breadcrumbs}
+      />
+      <DocsPage
+        toc={page.data.toc}
+        full={page.data.full}
+        breadcrumb={{
+          enabled: false,
+        }}
+        tableOfContent={{
+          style: 'clerk',
+          enabled: true,
+          header: <div className='mb-2 font-medium text-sm'>On this page</div>,
+          footer: <TOCFooter />,
+          single: false,
+        }}
+        article={{
+          className: 'scroll-smooth max-sm:pb-16',
+        }}
+        tableOfContentPopover={{
+          style: 'clerk',
+          enabled: true,
+        }}
+        footer={{
+          enabled: true,
+          component: <CustomFooter />,
+        }}
+      >
+        <div className='relative'>
+          <div className='absolute top-1 right-0 flex items-center gap-2'>
+            <CopyPageButton
+              content={`# ${page.data.title}
+
+${page.data.description || ''}
+
+${page.data.content || ''}`}
+            />
+            <PageNavigationArrows previous={neighbours?.previous} next={neighbours?.next} />
+          </div>
+          <DocsTitle>{page.data.title}</DocsTitle>
+          <DocsDescription>{page.data.description}</DocsDescription>
+        </div>
+        <DocsBody>
+          <MDX
+            components={{
+              ...defaultMdxComponents,
+              CodeBlock,
+            }}
+          />
+        </DocsBody>
+      </DocsPage>
+    </>
+  )
+}
+
+export async function generateStaticParams() {
+  return source.generateParams()
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[]; lang: string }>
+}) {
+  const params = await props.params
+  const page = source.getPage(params.slug, params.lang)
+  if (!page) notFound()
+
+  const baseUrl = 'https://docs.sim.ai'
+  const fullUrl = `${baseUrl}${page.url}`
+
+  return {
+    title: page.data.title,
+    description:
+      page.data.description || 'Sim visual workflow builder for AI applications documentation',
+    keywords: [
+      'AI workflow builder',
+      'visual workflow editor',
+      'AI automation',
+      'workflow automation',
+      'AI agents',
+      'no-code AI',
+      'drag and drop workflows',
+      page.data.title?.toLowerCase().split(' '),
+    ]
+      .flat()
+      .filter(Boolean),
+    authors: [{ name: 'Sim Team' }],
+    category: 'Developer Tools',
+    openGraph: {
+      title: page.data.title,
+      description:
+        page.data.description || 'Sim visual workflow builder for AI applications documentation',
+      url: fullUrl,
+      siteName: 'Sim Documentation',
+      type: 'article',
+      locale: params.lang === 'en' ? 'en_US' : `${params.lang}_${params.lang.toUpperCase()}`,
+      alternateLocale: ['en', 'es', 'fr', 'de', 'ja', 'zh']
+        .filter((lang) => lang !== params.lang)
+        .map((lang) => (lang === 'en' ? 'en_US' : `${lang}_${lang.toUpperCase()}`)),
+    },
+    twitter: {
+      card: 'summary',
+      title: page.data.title,
+      description:
+        page.data.description || 'Sim visual workflow builder for AI applications documentation',
+    },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
+    canonical: fullUrl,
+    alternates: {
+      canonical: fullUrl,
+      languages: {
+        'x-default': `${baseUrl}${page.url.replace(`/${params.lang}`, '')}`,
+        en: `${baseUrl}${page.url.replace(`/${params.lang}`, '')}`,
+        es: `${baseUrl}/es${page.url.replace(`/${params.lang}`, '')}`,
+        fr: `${baseUrl}/fr${page.url.replace(`/${params.lang}`, '')}`,
+        de: `${baseUrl}/de${page.url.replace(`/${params.lang}`, '')}`,
+        ja: `${baseUrl}/ja${page.url.replace(`/${params.lang}`, '')}`,
+        zh: `${baseUrl}/zh${page.url.replace(`/${params.lang}`, '')}`,
+      },
+    },
+  }
+}

apps/docs/app/[lang]/layout.tsx

@@ -0,0 +1,140 @@
+import type { ReactNode } from 'react'
+import { defineI18nUI } from 'fumadocs-ui/i18n'
+import { DocsLayout } from 'fumadocs-ui/layouts/docs'
+import { RootProvider } from 'fumadocs-ui/provider/next'
+import { Geist_Mono, Inter } from 'next/font/google'
+import Image from 'next/image'
+import {
+  SidebarFolder,
+  SidebarItem,
+  SidebarSeparator,
+} from '@/components/docs-layout/sidebar-components'
+import { Navbar } from '@/components/navbar/navbar'
+import { i18n } from '@/lib/i18n'
+import { source } from '@/lib/source'
+import '../global.css'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-geist-sans',
+})
+
+const geistMono = Geist_Mono({
+  subsets: ['latin'],
+  variable: '--font-geist-mono',
+})
+
+const { provider } = defineI18nUI(i18n, {
+  translations: {
+    en: {
+      displayName: 'English',
+    },
+    es: {
+      displayName: 'Español',
+    },
+    fr: {
+      displayName: 'Français',
+    },
+    de: {
+      displayName: 'Deutsch',
+    },
+    ja: {
+      displayName: '日本語',
+    },
+    zh: {
+      displayName: '简体中文',
+    },
+  },
+})
+
+type LayoutProps = {
+  children: ReactNode
+  params: Promise<{ lang: string }>
+}
+
+export default async function Layout({ children, params }: LayoutProps) {
+  const { lang } = await params
+
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: 'Sim Documentation',
+    description:
+      'Comprehensive documentation for Sim - the visual workflow builder for AI Agent Workflows.',
+    url: 'https://docs.sim.ai',
+    publisher: {
+      '@type': 'Organization',
+      name: 'Sim',
+      url: 'https://sim.ai',
+      logo: {
+        '@type': 'ImageObject',
+        url: 'https://docs.sim.ai/static/logo.png',
+      },
+    },
+    inLanguage: lang,
+    potentialAction: {
+      '@type': 'SearchAction',
+      target: {
+        '@type': 'EntryPoint',
+        urlTemplate: 'https://docs.sim.ai/api/search?q={search_term_string}',
+      },
+      'query-input': 'required name=search_term_string',
+    },
+  }
+
+  return (
+    <html
+      lang={lang}
+      className={`${inter.variable} ${geistMono.variable}`}
+      suppressHydrationWarning
+    >
+      <head>
+        <script
+          type='application/ld+json'
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+        />
+        {/* OneDollarStats Analytics - CDN script handles everything automatically */}
+        <script defer src='https://assets.onedollarstats.com/stonks.js' />
+      </head>
+      <body className='flex min-h-screen flex-col font-sans'>
+        <RootProvider i18n={provider(lang)}>
+          <Navbar />
+          <DocsLayout
+            tree={source.pageTree[lang]}
+            themeSwitch={{
+              enabled: false,
+            }}
+            nav={{
+              title: (
+                <Image
+                  src='/static/logo.png'
+                  alt='Sim'
+                  width={72}
+                  height={28}
+                  className='h-7 w-auto'
+                  priority
+                />
+              ),
+            }}
+            sidebar={{
+              defaultOpenLevel: 0,
+              collapsible: false,
+              footer: null,
+              banner: null,
+              components: {
+                Item: SidebarItem,
+                Folder: SidebarFolder,
+                Separator: SidebarSeparator,
+              },
+            }}
+            containerProps={{
+              className: '!pt-10',
+            }}
+          >
+            {children}
+          </DocsLayout>
+        </RootProvider>
+      </body>
+    </html>
+  )
+}

apps/docs/app/api/search/route.ts

@@ -1,4 +1,16 @@
 import { createFromSource } from 'fumadocs-core/search/server'
 import { source } from '@/lib/source'
 
-export const { GET } = createFromSource(source)
+export const revalidate = 3600 // Revalidate every hour
+
+export const { GET } = createFromSource(source, {
+  localeMap: {
+    en: { language: 'english' },
+    es: { language: 'spanish' },
+    fr: { language: 'french' },
+    de: { language: 'german' },
+    // ja and zh are not supported by the stemmer library, so we'll skip language config for them
+    ja: {},
+    zh: {},
+  },
+})

apps/docs/app/global.css

@@ -4,6 +4,470 @@
 
 @theme {
   --color-fd-primary: #802fff; /* Purple from control-bar component */
+  --font-geist-sans: var(--font-geist-sans);
+  --font-geist-mono: var(--font-geist-mono);
+}
+
+/* Font family utilities */
+.font-sans {
+  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.font-mono {
+  font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+}
+
+/* Target any potential border classes */
+* {
+  --fd-border-sidebar: transparent !important;
+}
+
+/* Override any CSS custom properties for borders */
+:root {
+  --fd-border: transparent !important;
+  --fd-border-sidebar: transparent !important;
+  --fd-nav-height: 64px; /* Custom navbar height (h-16 = 4rem = 64px) */
+  /* Content container width used to center main content */
+  --spacing-fd-container: 1400px;
+  /* Edge gutter = leftover space on each side of centered container */
+  --edge-gutter: max(1rem, calc((100vw - var(--spacing-fd-container)) / 2));
+  /* Shift the sidebar slightly left from the content edge for extra breathing room */
+  --sidebar-shift: 90px;
+  --sidebar-offset: max(0px, calc(var(--edge-gutter) - var(--sidebar-shift)));
+  /* Shift TOC slightly right to match sidebar spacing for symmetry */
+  --toc-shift: 90px;
+  --toc-offset: max(0px, calc(var(--edge-gutter) - var(--toc-shift)));
+  /* Sidebar and TOC have 20px internal padding - navbar accounts for this directly */
+  /* Extra gap between sidebar/TOC and the main text content */
+  --content-gap: 1.75rem;
+}
+
+/* Remove custom layout variable overrides to fallback to fumadocs defaults */
+
+/* ============================================
+   Navbar Light Mode Styling
+   ============================================ */
+
+/* Light mode navbar and search styling */
+:root:not(.dark) nav {
+  background-color: hsla(0, 0%, 96%, 0.85) !important;
+}
+
+:root:not(.dark) nav button[type="button"] {
+  background-color: hsla(0, 0%, 93%, 0.85) !important;
+  backdrop-filter: blur(33px) saturate(180%) !important;
+  -webkit-backdrop-filter: blur(33px) saturate(180%) !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+
+:root:not(.dark) nav button[type="button"] kbd {
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+
+/* Dark mode navbar and search styling */
+:root.dark nav {
+  background-color: hsla(0, 0%, 7.04%, 0.92) !important;
+  backdrop-filter: blur(25px) saturate(180%) brightness(0.6) !important;
+  -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(0.6) !important;
+}
+
+/* ============================================
+   Custom Sidebar Styling (Turborepo-inspired)
+   ============================================ */
+
+/* Floating sidebar appearance - remove background */
+[data-sidebar-container],
+#nd-sidebar {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  --color-fd-muted: transparent !important;
+  --color-fd-card: transparent !important;
+  --color-fd-secondary: transparent !important;
+}
+
+aside[data-sidebar],
+aside#nd-sidebar {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  border-right: none !important;
+}
+
+/* Responsive sidebar positioning */
+/* Mobile: Fumadocs handles drawer */
+@media (min-width: 768px) and (max-width: 1024px) {
+  aside[data-sidebar],
+  aside#nd-sidebar {
+    left: var(--sidebar-offset) !important;
+  }
+}
+
+/* Desktop layout alignment */
+@media (min-width: 1025px) {
+  [data-sidebar-container] {
+    margin-left: var(--sidebar-offset) !important;
+  }
+  aside[data-sidebar],
+  aside#nd-sidebar {
+    left: var(--sidebar-offset) !important;
+  }
+  /* TOC positioning - target all possible selectors */
+  [data-toc],
+  aside[data-toc],
+  div[data-toc],
+  .fd-toc,
+  #nd-toc,
+  nav[data-toc],
+  aside:has([role="complementary"]) {
+    right: var(--toc-offset) !important;
+  }
+
+  /* Alternative TOC container targeting */
+  [data-docs-page] > aside:last-child,
+  main ~ aside {
+    right: var(--toc-offset) !important;
+  }
+}
+
+/* Sidebar spacing - compact like turborepo */
+[data-sidebar-viewport] {
+  padding: 0.5rem 20px 12px;
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Override sidebar item styling to match Raindrop */
+/* Target Link and button elements in sidebar - override Fumadocs itemVariants */
+/* Exclude the small chevron-only toggle buttons */
+#nd-sidebar a,
+#nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {
+  font-size: 0.9375rem !important; /* 15px to match Raindrop */
+  line-height: 1.4 !important;
+  padding: 0.5rem 0.75rem !important; /* More compact like Raindrop */
+  font-weight: 400 !important;
+  border-radius: 0.75rem !important; /* More rounded like Raindrop */
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    sans-serif !important;
+}
+
+/* Dark mode sidebar text */
+.dark #nd-sidebar a,
+.dark #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {
+  color: rgba(255, 255, 255, 0.6) !important;
+}
+
+/* Light mode sidebar text */
+:root:not(.dark) #nd-sidebar a,
+:root:not(.dark) #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+
+/* Make sure chevron icons are visible and properly styled */
+#nd-sidebar svg {
+  display: inline-block !important;
+  opacity: 0.6 !important;
+  flex-shrink: 0 !important;
+  width: 0.75rem !important;
+  height: 0.75rem !important;
+}
+
+/* Ensure the small chevron toggle buttons are visible */
+#nd-sidebar button[aria-label*="ollapse"],
+#nd-sidebar button[aria-label*="xpand"] {
+  display: flex !important;
+  opacity: 1 !important;
+  padding: 0.25rem !important;
+}
+
+/* Root-level spacing now handled by [data-sidebar-viewport] > * rule below */
+
+/* Add tiny gap between nested items */
+#nd-sidebar ul li {
+  margin-bottom: 0.0625rem !important;
+}
+
+#nd-sidebar ul li:last-child {
+  margin-bottom: 0 !important;
+}
+
+/* Section headers should be slightly larger */
+[data-sidebar-viewport] [data-separator] {
+  font-size: 0.75rem !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+}
+
+/* Override active state (NO PURPLE) */
+#nd-sidebar a[data-active="true"],
+#nd-sidebar button[data-active="true"],
+#nd-sidebar a.bg-fd-primary\/10,
+#nd-sidebar a.text-fd-primary,
+#nd-sidebar a[class*="bg-fd-primary"],
+#nd-sidebar a[class*="text-fd-primary"],
+/* Override custom sidebar purple classes */
+  #nd-sidebar
+  a.bg-purple-50\/80,
+#nd-sidebar a.text-purple-600,
+#nd-sidebar a[class*="bg-purple"],
+#nd-sidebar a[class*="text-purple"] {
+  background-image: none !important;
+}
+
+/* Dark mode active state */
+.dark #nd-sidebar a[data-active="true"],
+.dark #nd-sidebar button[data-active="true"],
+.dark #nd-sidebar a.bg-fd-primary\/10,
+.dark #nd-sidebar a.text-fd-primary,
+.dark #nd-sidebar a[class*="bg-fd-primary"],
+.dark #nd-sidebar a[class*="text-fd-primary"],
+.dark #nd-sidebar a.bg-purple-50\/80,
+.dark #nd-sidebar a.text-purple-600,
+.dark #nd-sidebar a[class*="bg-purple"],
+.dark #nd-sidebar a[class*="text-purple"] {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  color: rgba(255, 255, 255, 1) !important;
+}
+
+/* Light mode active state */
+:root:not(.dark) #nd-sidebar a[data-active="true"],
+:root:not(.dark) #nd-sidebar button[data-active="true"],
+:root:not(.dark) #nd-sidebar a.bg-fd-primary\/10,
+:root:not(.dark) #nd-sidebar a.text-fd-primary,
+:root:not(.dark) #nd-sidebar a[class*="bg-fd-primary"],
+:root:not(.dark) #nd-sidebar a[class*="text-fd-primary"],
+:root:not(.dark) #nd-sidebar a.bg-purple-50\/80,
+:root:not(.dark) #nd-sidebar a.text-purple-600,
+:root:not(.dark) #nd-sidebar a[class*="bg-purple"],
+:root:not(.dark) #nd-sidebar a[class*="text-purple"] {
+  background-color: rgba(0, 0, 0, 0.07) !important;
+  color: rgba(0, 0, 0, 0.9) !important;
+}
+
+/* Dark mode hover state */
+.dark #nd-sidebar a:hover:not([data-active="true"]),
+.dark #nd-sidebar button:hover:not([data-active="true"]) {
+  background-color: rgba(255, 255, 255, 0.08) !important;
+}
+
+/* Light mode hover state */
+:root:not(.dark) #nd-sidebar a:hover:not([data-active="true"]),
+:root:not(.dark) #nd-sidebar button:hover:not([data-active="true"]) {
+  background-color: rgba(0, 0, 0, 0.03) !important;
+}
+
+/* Dark mode - ensure active/selected items don't change on hover */
+.dark #nd-sidebar a.bg-purple-50\/80:hover,
+.dark #nd-sidebar a[class*="bg-purple"]:hover,
+.dark #nd-sidebar a[data-active="true"]:hover,
+.dark #nd-sidebar button[data-active="true"]:hover {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  color: rgba(255, 255, 255, 1) !important;
+}
+
+/* Light mode - ensure active/selected items don't change on hover */
+:root:not(.dark) #nd-sidebar a.bg-purple-50\/80:hover,
+:root:not(.dark) #nd-sidebar a[class*="bg-purple"]:hover,
+:root:not(.dark) #nd-sidebar a[data-active="true"]:hover,
+:root:not(.dark) #nd-sidebar button[data-active="true"]:hover {
+  background-color: rgba(0, 0, 0, 0.07) !important;
+  color: rgba(0, 0, 0, 0.9) !important;
+}
+
+/* Hide search, platform, and collapse button from sidebar completely */
+[data-sidebar] [data-search],
+[data-sidebar] .search-toggle,
+#nd-sidebar [data-search],
+#nd-sidebar .search-toggle,
+[data-sidebar-viewport] [data-search],
+[data-sidebar-viewport] button[data-search],
+aside[data-sidebar] [role="button"]:has([data-search]),
+aside[data-sidebar] > div > button:first-child,
+#nd-sidebar > div > button:first-child,
+[data-sidebar] a[href*="sim.ai"],
+#nd-sidebar a[href*="sim.ai"],
+[data-sidebar-viewport] a[href*="sim.ai"],
+/* Hide search buttons (but NOT folder chevron buttons) */
+  aside[data-sidebar] > div:first-child
+  > button:not([aria-label="Collapse"]):not([aria-label="Expand"]),
+#nd-sidebar > div:first-child > button:not([aria-label="Collapse"]):not([aria-label="Expand"]),
+/* Hide sidebar collapse button (panel icon) - direct children only */
+aside[data-sidebar] > button:first-of-type:not([aria-label="Collapse"]):not([aria-label="Expand"]),
+[data-sidebar]
+  > button[type="button"]:first-of-type:not([aria-label="Collapse"]):not([aria-label="Expand"]),
+button[data-collapse]:not([aria-label="Collapse"]):not([aria-label="Expand"]),
+[data-sidebar-header] button,
+/* Hide theme toggle from sidebar footer */
+aside[data-sidebar] [data-theme-toggle],
+[data-sidebar-footer],
+[data-sidebar] footer,
+footer button[aria-label*="heme"],
+aside[data-sidebar] > div:last-child:has(button[aria-label*="heme"]),
+aside[data-sidebar] button[aria-label*="heme"],
+[data-sidebar] button[aria-label*="Theme"],
+/* Additional theme toggle selectors */
+  aside[data-sidebar] > *:last-child
+  button,
+[data-sidebar-viewport] ~ *,
+aside[data-sidebar] > div:not([data-sidebar-viewport]),
+/* Aggressive theme toggle hiding */
+aside[data-sidebar] svg[class*="sun"],
+aside[data-sidebar] svg[class*="moon"],
+aside[data-sidebar] button[type="button"]:last-child,
+aside button:has(svg:only-child),
+[data-sidebar] div:has(> button[type="button"]:only-child:last-child),
+/* Hide theme toggle and other non-content elements */
+aside[data-sidebar] > *:not([data-sidebar-viewport]) {
+  display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  height: 0 !important;
+  max-height: 0 !important;
+  overflow: hidden !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  left: -9999px !important;
+}
+
+/* Desktop only: Hide sidebar toggle buttons and nav title/logo (keep visible on mobile) */
+@media (min-width: 1025px) {
+  [data-sidebar-container] > button,
+  [data-sidebar-container] [data-toggle],
+  aside[data-sidebar] [data-sidebar-toggle],
+  button[data-sidebar-toggle],
+  nav button[data-sidebar-toggle],
+  button[aria-label="Toggle Sidebar"],
+  button[aria-label="Collapse Sidebar"],
+  /* Hide nav title/logo in sidebar on desktop - target all possible locations */
+  aside[data-sidebar] a[href="/"],
+  aside[data-sidebar] a[href="/"] img,
+  aside[data-sidebar] > a:first-child,
+  aside[data-sidebar] > div > a:first-child,
+  aside[data-sidebar] img[alt="Sim"],
+  [data-sidebar-header],
+  [data-sidebar] [data-title],
+  #nd-sidebar > a:first-child,
+  #nd-sidebar > div:first-child > a:first-child,
+  #nd-sidebar img[alt="Sim"] {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    max-height: 0 !important;
+    overflow: hidden !important;
+  }
+}
+
+/* Extra aggressive - hide everything after the viewport */
+aside[data-sidebar] [data-sidebar-viewport] ~ * {
+  display: none !important;
+}
+
+/* Tighter spacing for sidebar content */
+[data-sidebar-viewport] > * {
+  margin-bottom: 0.0625rem;
+}
+
+[data-sidebar-viewport] > *:last-child {
+  margin-bottom: 0;
+}
+
+[data-sidebar-viewport] ul {
+  margin: 0;
+  padding: 0;
+}
+
+/* Ensure sidebar starts with content immediately */
+aside[data-sidebar] > div:first-child {
+  padding-top: 0;
+}
+
+/* Remove all sidebar borders and backgrounds */
+[data-sidebar-container],
+aside[data-sidebar],
+[data-sidebar],
+[data-sidebar] *,
+#nd-sidebar,
+#nd-sidebar * {
+  border: none !important;
+  border-right: none !important;
+  border-left: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+}
+
+/* Override fumadocs background colors for sidebar */
+.dark #nd-sidebar,
+.dark [data-sidebar-container],
+.dark aside[data-sidebar] {
+  --color-fd-muted: transparent !important;
+  --color-fd-secondary: transparent !important;
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Force normal text flow in sidebar */
+[data-sidebar],
+[data-sidebar] *,
+[data-sidebar-viewport],
+[data-sidebar-viewport] * {
+  writing-mode: horizontal-tb !important;
+}
+
+/* ============================================
+   Code Block Styling (Improved)
+   ============================================ */
+
+/* Apply Geist Mono to code elements */
+code,
+pre,
+pre code {
+  font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+}
+
+/* Inline code */
+:not(pre) > code {
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  font-weight: 500;
+}
+
+/* Light mode inline code */
+:root:not(.dark) :not(pre) > code {
+  background-color: rgb(243 244 246);
+  color: rgb(220 38 38);
+  border: 1px solid rgb(229 231 235);
+}
+
+/* Dark mode inline code */
+.dark :not(pre) > code {
+  background-color: rgb(31 41 55);
+  color: rgb(248 113 113);
+  border: 1px solid rgb(55 65 81);
+}
+
+/* Code block container improvements */
+pre {
+  font-size: 0.875rem;
+  line-height: 1.7;
+  tab-size: 2;
+  -webkit-overflow-scrolling: touch;
+}
+
+pre code {
+  display: block;
+  width: fit-content;
+  min-width: 100%;
+}
+
+/* Syntax highlighting adjustments for better readability */
+pre code .line {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 /* Custom text highlighting styles */
@@ -16,6 +480,62 @@
   color: var(--color-fd-primary);
 }
 
+/* Add bottom spacing to prevent abrupt page endings */
+[data-content] {
+  padding-top: 1.5rem !important;
+  padding-bottom: 4rem;
+}
+
+/* Alternative fallback for different Fumadocs versions */
+main article,
+.docs-page main {
+  padding-top: 1.5rem !important;
+  padding-bottom: 4rem;
+}
+
+/* ============================================
+   Center and Constrain Main Content Width
+   ============================================ */
+
+/* Main content area - center and constrain like turborepo/raindrop */
+main[data-main] {
+  max-width: var(--spacing-fd-container, 1400px);
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 1rem;
+  padding-left: calc(var(--sidebar-offset) + var(--content-gap));
+  padding-right: calc(var(--toc-offset) + var(--content-gap));
+  order: 1 !important;
+}
+
+/* Adjust for smaller screens */
+@media (max-width: 768px) {
+  main[data-main] {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+/* Ensure docs page content is properly constrained */
+[data-docs-page] {
+  max-width: 1400px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 1.5rem !important;
+}
+
+/* Override Fumadocs default content padding */
+article[data-content],
+div[data-content] {
+  padding-top: 1.5rem !important;
+}
+
+/* Remove any unwanted borders/outlines from video elements */
+video {
+  outline: none !important;
+  border-style: solid !important;
+}
+
 /* Tailwind v4 content sources */
 @source '../app/**/*.{js,ts,jsx,tsx,mdx}';
 @source '../components/**/*.{js,ts,jsx,tsx,mdx}';

apps/docs/app/layout.tsx

@@ -1,30 +1,38 @@
 import type { ReactNode } from 'react'
-import { RootProvider } from 'fumadocs-ui/provider'
-import { Inter } from 'next/font/google'
-import './global.css'
-import { Analytics } from '@vercel/analytics/next'
 
-const inter = Inter({
-  subsets: ['latin'],
-})
-
-export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <html lang='en' className={inter.className} suppressHydrationWarning>
-      <body className='flex min-h-screen flex-col'>
-        <RootProvider>
-          {children}
-          <Analytics />
-        </RootProvider>
-      </body>
-    </html>
-  )
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return children
 }
 
 export const metadata = {
-  title: 'Sim',
+  metadataBase: new URL('https://docs.sim.ai'),
+  title: {
+    default: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    template: '%s',
+  },
   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.',
+    'Comprehensive documentation for Sim - the visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas—no coding required.',
+  keywords: [
+    'AI workflow builder',
+    'visual workflow editor',
+    'AI automation',
+    'workflow automation',
+    'AI agents',
+    'no-code AI',
+    'drag and drop workflows',
+    'AI integrations',
+    'workflow canvas',
+    'AI Agent Workflow Builder',
+    'workflow orchestration',
+    'agent builder',
+    'AI workflow automation',
+    'visual programming',
+  ],
+  authors: [{ name: 'Sim Team', url: 'https://sim.ai' }],
+  creator: 'Sim',
+  publisher: 'Sim',
+  category: 'Developer Tools',
+  classification: 'Developer Documentation',
   manifest: '/favicon/site.webmanifest',
   icons: {
     icon: [
@@ -39,4 +47,46 @@ export const metadata = {
     statusBarStyle: 'default',
     title: 'Sim Docs',
   },
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    alternateLocale: ['es_ES', 'fr_FR', 'de_DE', 'ja_JP', 'zh_CN'],
+    url: 'https://docs.sim.ai',
+    siteName: 'Sim Documentation',
+    title: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    description:
+      'Comprehensive documentation for Sim - the visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines.',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    description:
+      'Comprehensive documentation for Sim - the visual workflow builder for AI applications.',
+    creator: '@simdotai',
+    site: '@simdotai',
+    images: ['/og-image.png'],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+  alternates: {
+    canonical: 'https://docs.sim.ai',
+    languages: {
+      'x-default': 'https://docs.sim.ai',
+      en: 'https://docs.sim.ai',
+      es: 'https://docs.sim.ai/es',
+      fr: 'https://docs.sim.ai/fr',
+      de: 'https://docs.sim.ai/de',
+      ja: 'https://docs.sim.ai/ja',
+      zh: 'https://docs.sim.ai/zh',
+    },
+  },
 }

apps/docs/app/llms-full.txt/route.ts

@@ -0,0 +1,31 @@
+import { getLLMText } from '@/lib/llms'
+import { source } from '@/lib/source'
+
+export const revalidate = false
+
+export async function GET() {
+  try {
+    const pages = source.getPages().filter((page) => {
+      if (!page || !page.data || !page.url) return false
+
+      const pathParts = page.url.split('/').filter(Boolean)
+      const hasLangPrefix = pathParts[0] && ['es', 'fr', 'de', 'ja', 'zh'].includes(pathParts[0])
+
+      return !hasLangPrefix
+    })
+
+    const scan = pages.map((page) => getLLMText(page))
+    const scanned = await Promise.all(scan)
+
+    const filtered = scanned.filter((text) => text && text.length > 0)
+
+    return new Response(filtered.join('\n\n---\n\n'), {
+      headers: {
+        'Content-Type': 'text/plain; charset=utf-8',
+      },
+    })
+  } catch (error) {
+    console.error('Error generating LLM full text:', error)
+    return new Response('Error generating full documentation text', { status: 500 })
+  }
+}

apps/docs/app/llms.txt/route.ts

@@ -1,12 +1,87 @@
-import { getLLMText } from '@/lib/llms'
 import { source } from '@/lib/source'
 
-// cached forever
 export const revalidate = false
 
 export async function GET() {
-  const scan = source.getPages().map(getLLMText)
-  const scanned = await Promise.all(scan)
+  const baseUrl = 'https://docs.sim.ai'
 
-  return new Response(scanned.join('\n\n'))
+  try {
+    const pages = source.getPages().filter((page) => {
+      if (!page || !page.data || !page.url) return false
+
+      const pathParts = page.url.split('/').filter(Boolean)
+      const hasLangPrefix = pathParts[0] && ['es', 'fr', 'de', 'ja', 'zh'].includes(pathParts[0])
+
+      return !hasLangPrefix
+    })
+
+    const sections: Record<string, Array<{ title: string; url: string; description?: string }>> = {}
+
+    pages.forEach((page) => {
+      const pathParts = page.url.split('/').filter(Boolean)
+      const section =
+        pathParts[0] && ['en', 'es', 'fr', 'de', 'ja', 'zh'].includes(pathParts[0])
+          ? pathParts[1] || 'root'
+          : pathParts[0] || 'root'
+
+      if (!sections[section]) {
+        sections[section] = []
+      }
+
+      sections[section].push({
+        title: page.data.title || 'Untitled',
+        url: `${baseUrl}${page.url}`,
+        description: page.data.description,
+      })
+    })
+
+    const manifest = `# Sim Documentation
+
+> Visual Workflow Builder for AI Applications
+
+Sim is a visual workflow builder for AI applications that lets you build AI agent workflows visually. Create powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas—no coding required.
+
+## Documentation Overview
+
+This file provides an overview of our documentation. For full content of all pages, see ${baseUrl}/llms-full.txt
+
+## Main Sections
+
+${Object.entries(sections)
+  .map(([section, items]) => {
+    const sectionTitle = section
+      .split('-')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+    return `### ${sectionTitle}\n\n${items.map((item) => `- ${item.title}: ${item.url}${item.description ? `\n  ${item.description}` : ''}`).join('\n')}`
+  })
+  .join('\n\n')}
+
+## Additional Resources
+
+- Full documentation content: ${baseUrl}/llms-full.txt
+- Individual page content: ${baseUrl}/llms.mdx/[page-path]
+- API documentation: ${baseUrl}/sdks/
+- Tool integrations: ${baseUrl}/tools/
+
+## Statistics
+
+- Total pages: ${pages.length} (English only)
+- Other languages available at: ${baseUrl}/[lang]/ (es, fr, de, ja, zh)
+
+---
+
+Generated: ${new Date().toISOString()}
+Format: llms.txt v0.1.0
+See: https://llmstxt.org for specification`
+
+    return new Response(manifest, {
+      headers: {
+        'Content-Type': 'text/plain; charset=utf-8',
+      },
+    })
+  } catch (error) {
+    console.error('Error generating LLM manifest:', error)
+    return new Response('Error generating documentation manifest', { status: 500 })
+  }
 }

apps/docs/app/robots.txt/route.ts

@@ -0,0 +1,100 @@
+export const revalidate = false
+
+export async function GET() {
+  const baseUrl = 'https://docs.sim.ai'
+
+  const robotsTxt = `# Robots.txt for Sim Documentation
+# Generated on ${new Date().toISOString()}
+
+User-agent: *
+Allow: /
+
+# Search engine crawlers
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Slurp
+Allow: /
+
+User-agent: DuckDuckBot
+Allow: /
+
+User-agent: Baiduspider
+Allow: /
+
+User-agent: YandexBot
+Allow: /
+
+# AI and LLM crawlers - explicitly allowed for documentation indexing
+User-agent: GPTBot
+Allow: /
+
+User-agent: ChatGPT-User
+Allow: /
+
+User-agent: CCBot
+Allow: /
+
+User-agent: anthropic-ai
+Allow: /
+
+User-agent: Claude-Web
+Allow: /
+
+User-agent: Applebot
+Allow: /
+
+User-agent: PerplexityBot
+Allow: /
+
+User-agent: Diffbot
+Allow: /
+
+User-agent: FacebookBot
+Allow: /
+
+User-agent: cohere-ai
+Allow: /
+
+# Disallow admin and internal paths (if any exist)
+Disallow: /.next/
+Disallow: /api/internal/
+Disallow: /_next/static/
+Disallow: /admin/
+
+# Allow but don't prioritize these
+Allow: /api/search
+Allow: /llms.txt
+Allow: /llms-full.txt
+Allow: /llms.mdx/
+
+# Sitemaps
+Sitemap: ${baseUrl}/sitemap.xml
+
+# Crawl delay for aggressive bots (optional)
+# Crawl-delay: 1
+
+# Additional resources for AI indexing
+# See https://github.com/AnswerDotAI/llms-txt for more info
+# LLM-friendly content:
+#   Manifest: ${baseUrl}/llms.txt
+#   Full content: ${baseUrl}/llms-full.txt
+#   Individual pages: ${baseUrl}/llms.mdx/[page-path]
+
+# Multi-language documentation available at:
+# ${baseUrl}/en - English
+# ${baseUrl}/es - Español
+# ${baseUrl}/fr - Français
+# ${baseUrl}/de - Deutsch
+# ${baseUrl}/ja - 日本語
+# ${baseUrl}/zh - 简体中文`
+
+  return new Response(robotsTxt, {
+    headers: {
+      'Content-Type': 'text/plain',
+    },
+  })
+}

apps/docs/app/sitemap.xml/route.ts

@@ -0,0 +1,63 @@
+import { i18n } from '@/lib/i18n'
+import { source } from '@/lib/source'
+
+export const revalidate = false
+
+export async function GET() {
+  const baseUrl = 'https://docs.sim.ai'
+
+  const allPages = source.getPages()
+
+  const getPriority = (url: string): string => {
+    if (url === '/introduction' || url === '/') return '1.0'
+    if (url === '/getting-started') return '0.9'
+    if (url.match(/^\/[^/]+$/)) return '0.8'
+    if (url.includes('/sdks/') || url.includes('/tools/')) return '0.7'
+    return '0.6'
+  }
+
+  const urls = allPages
+    .flatMap((page) => {
+      const urlWithoutLang = page.url.replace(/^\/[a-z]{2}\//, '/')
+
+      return i18n.languages.map((lang) => {
+        const url =
+          lang === i18n.defaultLanguage
+            ? `${baseUrl}${urlWithoutLang}`
+            : `${baseUrl}/${lang}${urlWithoutLang}`
+
+        return `  <url>
+    <loc>${url}</loc>
+    <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>${getPriority(urlWithoutLang)}</priority>
+    ${i18n.languages.length > 1 ? generateAlternateLinks(baseUrl, urlWithoutLang) : ''}
+  </url>`
+      })
+    })
+    .join('\n')
+
+  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+${urls}
+</urlset>`
+
+  return new Response(sitemap, {
+    headers: {
+      'Content-Type': 'application/xml',
+      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
+    },
+  })
+}
+
+function generateAlternateLinks(baseUrl: string, urlWithoutLang: string): string {
+  return i18n.languages
+    .map((lang) => {
+      const url =
+        lang === i18n.defaultLanguage
+          ? `${baseUrl}${urlWithoutLang}`
+          : `${baseUrl}/${lang}${urlWithoutLang}`
+      return `    <xhtml:link rel="alternate" hreflang="${lang}" href="${url}" />`
+    })
+    .join('\n')
+}

apps/docs/components/docs-layout/page-navigation-arrows.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+
+interface PageNavigationArrowsProps {
+  previous?: {
+    url: string
+  }
+  next?: {
+    url: string
+  }
+}
+
+export function PageNavigationArrows({ previous, next }: PageNavigationArrowsProps) {
+  if (!previous && !next) return null
+
+  return (
+    <div className='flex items-center gap-2'>
+      {previous && (
+        <Link
+          href={previous.url}
+          className='inline-flex items-center justify-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-1.5 text-muted-foreground/60 text-sm transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
+          aria-label='Previous page'
+          title='Previous page'
+        >
+          <ChevronLeft className='h-4 w-4' />
+        </Link>
+      )}
+      {next && (
+        <Link
+          href={next.url}
+          className='inline-flex items-center justify-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-1.5 text-muted-foreground/60 text-sm transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
+          aria-label='Next page'
+          title='Next page'
+        >
+          <ChevronRight className='h-4 w-4' />
+        </Link>
+      )}
+    </div>
+  )
+}

apps/docs/components/docs-layout/sidebar-components.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import { type ReactNode, useEffect, useState } from 'react'
+import type { PageTree } from 'fumadocs-core/server'
+import { ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+
+function isActive(url: string, pathname: string, nested = true): boolean {
+  return url === pathname || (nested && pathname.startsWith(`${url}/`))
+}
+
+export function SidebarItem({ item }: { item: PageTree.Item }) {
+  const pathname = usePathname()
+  const active = isActive(item.url, pathname, false)
+
+  return (
+    <li className='mb-[0.0625rem] list-none'>
+      <Link
+        href={item.url}
+        className={cn(
+          'block rounded-md px-2.5 py-1.5 font-normal text-[13px] leading-tight transition-colors',
+          'text-gray-600 dark:text-gray-400',
+          !active && 'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
+          active &&
+            'bg-purple-50/80 font-medium text-purple-600 dark:bg-purple-900/15 dark:text-purple-400'
+        )}
+      >
+        {item.name}
+      </Link>
+    </li>
+  )
+}
+
+export function SidebarFolder({
+  item,
+  level,
+  children,
+}: {
+  item: PageTree.Folder
+  level: number
+  children: ReactNode
+}) {
+  const pathname = usePathname()
+  const hasActiveChild = checkHasActiveChild(item, pathname)
+  const [open, setOpen] = useState(hasActiveChild)
+
+  useEffect(() => {
+    setOpen(hasActiveChild)
+  }, [hasActiveChild])
+
+  return (
+    <li className='mb-[0.0625rem] list-none'>
+      {item.index ? (
+        <div className='flex items-center gap-0.5'>
+          <Link
+            href={item.index.url}
+            className={cn(
+              'block flex-1 rounded-md px-2.5 py-1.5 font-medium text-[13px] leading-tight transition-colors',
+              'text-gray-800 dark:text-gray-200',
+              !isActive(item.index.url, pathname, false) &&
+                'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
+              isActive(item.index.url, pathname, false) &&
+                'bg-purple-50/80 text-purple-600 dark:bg-purple-900/15 dark:text-purple-400'
+            )}
+          >
+            {item.name}
+          </Link>
+          <button
+            onClick={() => setOpen(!open)}
+            className='rounded p-1 transition-colors hover:bg-gray-100/60 dark:hover:bg-gray-800/40'
+            aria-label={open ? 'Collapse' : 'Expand'}
+          >
+            <ChevronRight
+              className={cn(
+                'h-3 w-3 text-gray-400 transition-transform duration-200 ease-in-out dark:text-gray-500',
+                open && 'rotate-90'
+              )}
+            />
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={() => setOpen(!open)}
+          className={cn(
+            'flex w-full items-center justify-between rounded-md px-2.5 py-1.5 text-left font-medium text-[13px] leading-tight transition-colors',
+            'hover:bg-gray-100/60 dark:hover:bg-gray-800/40',
+            'text-gray-800 dark:text-gray-200'
+          )}
+        >
+          <span>{item.name}</span>
+          <ChevronRight
+            className={cn(
+              'ml-auto h-3 w-3 flex-shrink-0 text-gray-400 transition-transform duration-200 ease-in-out dark:text-gray-500',
+              open && 'rotate-90'
+            )}
+          />
+        </button>
+      )}
+      <div
+        className={cn(
+          'overflow-hidden transition-all duration-200 ease-in-out',
+          open ? 'max-h-[10000px] opacity-100' : 'max-h-0 opacity-0'
+        )}
+      >
+        <ul className='mt-0.5 ml-2 space-y-[0.0625rem] border-gray-200/60 border-l pl-2.5 dark:border-gray-700/60'>
+          {children}
+        </ul>
+      </div>
+    </li>
+  )
+}
+
+export function SidebarSeparator({ item }: { item: PageTree.Separator }) {
+  return (
+    <p className='mt-4 mb-1.5 px-2.5 font-semibold text-[10px] text-gray-500/80 uppercase tracking-wide dark:text-gray-500'>
+      {item.name}
+    </p>
+  )
+}
+
+function checkHasActiveChild(node: PageTree.Folder, pathname: string): boolean {
+  if (node.index && isActive(node.index.url, pathname)) {
+    return true
+  }
+
+  for (const child of node.children) {
+    if (child.type === 'page' && isActive(child.url, pathname)) {
+      return true
+    }
+    if (child.type === 'folder' && checkHasActiveChild(child, pathname)) {
+      return true
+    }
+  }
+
+  return false
+}

apps/docs/components/docs-layout/toc-footer.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowRight, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+
+export function TOCFooter() {
+  const [isHovered, setIsHovered] = useState(false)
+
+  return (
+    <div className='sticky bottom-0 mt-6'>
+      <div className='flex flex-col gap-2 rounded-lg border border-border bg-secondary p-6 text-sm'>
+        <div className='text-balance font-semibold text-base leading-tight'>
+          Start building today
+        </div>
+        <div className='text-muted-foreground'>Trusted by over 60,000 builders.</div>
+        <div className='text-muted-foreground'>
+          Build Agentic workflows visually on a drag-and-drop canvas or with natural language.
+        </div>
+        <Link
+          href='https://sim.ai/signup'
+          target='_blank'
+          rel='noopener noreferrer'
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          className='group mt-2 inline-flex h-8 w-fit items-center justify-center gap-1 whitespace-nowrap rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] px-3 pr-[10px] pl-[12px] font-medium text-sm text-white shadow-[inset_0_2px_4px_0_#9B77FF] outline-none transition-all hover:shadow-lg focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50'
+          aria-label='Get started with Sim - Sign up for free'
+        >
+          <span>Get started</span>
+          <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
+            {isHovered ? (
+              <ArrowRight className='h-4 w-4' aria-hidden='true' />
+            ) : (
+              <ChevronRight className='h-4 w-4' aria-hidden='true' />
+            )}
+          </span>
+        </Link>
+      </div>
+    </div>
+  )
+}

apps/docs/components/mdx-components.tsx

@@ -1,10 +0,0 @@
-import defaultMdxComponents from 'fumadocs-ui/mdx'
-import { ThemeImage } from './ui/theme-image'
-
-// Extend the default MDX components with our custom components
-const mdxComponents = {
-  ...defaultMdxComponents,
-  ThemeImage,
-}
-
-export default mdxComponents

apps/docs/components/navbar/navbar.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { LanguageDropdown } from '@/components/ui/language-dropdown'
+import { SearchTrigger } from '@/components/ui/search-trigger'
+import { ThemeToggle } from '@/components/ui/theme-toggle'
+
+export function Navbar() {
+  return (
+    <nav
+      className='sticky top-0 z-50 border-border/50 border-b'
+      style={{
+        backdropFilter: 'blur(25px) saturate(180%)',
+        WebkitBackdropFilter: 'blur(25px) saturate(180%)',
+      }}
+    >
+      {/* Desktop: Single row layout */}
+      <div className='hidden h-16 w-full items-center lg:flex'>
+        <div
+          className='relative flex w-full items-center justify-between'
+          style={{
+            paddingLeft: 'calc(var(--sidebar-offset) + 20px)',
+            paddingRight: 'calc(var(--toc-offset) + 60px)',
+          }}
+        >
+          {/* Left cluster: logo */}
+          <div className='flex items-center'>
+            <Link href='/' className='flex min-w-[100px] items-center'>
+              <Image
+                src='/static/logo.png'
+                alt='Sim'
+                width={72}
+                height={28}
+                className='h-7 w-auto'
+              />
+            </Link>
+          </div>
+
+          {/* Center cluster: search - absolutely positioned to center */}
+          <div className='-translate-x-1/2 absolute left-1/2 flex items-center justify-center'>
+            <SearchTrigger />
+          </div>
+
+          {/* Right cluster aligns with TOC edge */}
+          <div className='flex items-center gap-4'>
+            <Link
+              href='https://sim.ai'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='rounded-xl px-3 py-2 font-normal text-[0.9375rem] text-foreground/60 leading-[1.4] transition-colors hover:bg-foreground/8 hover:text-foreground'
+              style={{
+                fontFamily:
+                  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+              }}
+            >
+              Platform
+            </Link>
+            <LanguageDropdown />
+            <ThemeToggle />
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}

apps/docs/components/structured-data.tsx

@@ -0,0 +1,174 @@
+import Script from 'next/script'
+
+interface StructuredDataProps {
+  title: string
+  description: string
+  url: string
+  lang: string
+  dateModified?: string
+  breadcrumb?: Array<{ name: string; url: string }>
+}
+
+export function StructuredData({
+  title,
+  description,
+  url,
+  lang,
+  dateModified,
+  breadcrumb,
+}: StructuredDataProps) {
+  const baseUrl = 'https://docs.sim.ai'
+
+  const articleStructuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'TechArticle',
+    headline: title,
+    description: description,
+    url: url,
+    datePublished: dateModified || new Date().toISOString(),
+    dateModified: dateModified || new Date().toISOString(),
+    author: {
+      '@type': 'Organization',
+      name: 'Sim Team',
+      url: baseUrl,
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'Sim',
+      url: baseUrl,
+      logo: {
+        '@type': 'ImageObject',
+        url: `${baseUrl}/static/logo.png`,
+      },
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': url,
+    },
+    inLanguage: lang,
+    isPartOf: {
+      '@type': 'WebSite',
+      name: 'Sim Documentation',
+      url: baseUrl,
+    },
+    potentialAction: {
+      '@type': 'ReadAction',
+      target: url,
+    },
+  }
+
+  const breadcrumbStructuredData = breadcrumb && {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: breadcrumb.map((item, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name: item.name,
+      item: item.url,
+    })),
+  }
+
+  const websiteStructuredData = url === baseUrl && {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: 'Sim Documentation',
+    url: baseUrl,
+    description:
+      'Comprehensive documentation for Sim visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines.',
+    publisher: {
+      '@type': 'Organization',
+      name: 'Sim',
+      url: baseUrl,
+    },
+    potentialAction: {
+      '@type': 'SearchAction',
+      target: {
+        '@type': 'EntryPoint',
+        urlTemplate: `${baseUrl}/search?q={search_term_string}`,
+      },
+      'query-input': 'required name=search_term_string',
+    },
+    inLanguage: ['en', 'es', 'fr', 'de', 'ja', 'zh'],
+  }
+
+  const faqStructuredData = title.toLowerCase().includes('faq') && {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: [],
+  }
+
+  const softwareStructuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: 'Sim',
+    applicationCategory: 'DeveloperApplication',
+    operatingSystem: 'Any',
+    description:
+      'Visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas—no coding required.',
+    url: baseUrl,
+    author: {
+      '@type': 'Organization',
+      name: 'Sim Team',
+    },
+    offers: {
+      '@type': 'Offer',
+      category: 'Developer Tools',
+    },
+    featureList: [
+      'Visual workflow builder with drag-and-drop interface',
+      'AI agent creation and automation',
+      '80+ built-in integrations',
+      'Real-time team collaboration',
+      'Multiple deployment options',
+      'Custom integrations via MCP protocol',
+    ],
+  }
+
+  return (
+    <>
+      <Script
+        id='article-structured-data'
+        type='application/ld+json'
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(articleStructuredData),
+        }}
+      />
+      {breadcrumbStructuredData && (
+        <Script
+          id='breadcrumb-structured-data'
+          type='application/ld+json'
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(breadcrumbStructuredData),
+          }}
+        />
+      )}
+      {websiteStructuredData && (
+        <Script
+          id='website-structured-data'
+          type='application/ld+json'
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(websiteStructuredData),
+          }}
+        />
+      )}
+      {faqStructuredData && (
+        <Script
+          id='faq-structured-data'
+          type='application/ld+json'
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(faqStructuredData),
+          }}
+        />
+      )}
+      {url === baseUrl && (
+        <Script
+          id='software-structured-data'
+          type='application/ld+json'
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(softwareStructuredData),
+          }}
+        />
+      )}
+    </>
+  )
+}

apps/docs/components/ui/block-info-card.tsx

@@ -1,20 +1,24 @@
 'use client'
 
 import type * as React from 'react'
+import { blockTypeToIconMap } from './icon-mapping'
 
 interface BlockInfoCardProps {
   type: string
   color: string
-  icon?: boolean
-  iconSvg?: string
+  icon?: React.ComponentType<{ className?: string }>
+  iconSvg?: string // Deprecated: Use automatic icon resolution instead
 }
 
 export function BlockInfoCard({
   type,
   color,
-  icon = false,
+  icon: IconComponent,
   iconSvg,
 }: BlockInfoCardProps): React.ReactNode {
+  // Auto-resolve icon component from block type if not explicitly provided
+  const ResolvedIcon = IconComponent || blockTypeToIconMap[type] || null
+
   return (
     <div className='mb-6 overflow-hidden rounded-lg border border-border'>
       <div className='flex items-center justify-center p-6'>
@@ -22,23 +26,15 @@ export function BlockInfoCard({
           className='flex h-20 w-20 items-center justify-center rounded-lg'
           style={{ backgroundColor: color }}
         >
-          {iconSvg ? (
+          {ResolvedIcon ? (
+            <ResolvedIcon className='h-10 w-10 text-white' />
+          ) : iconSvg ? (
             <div className='h-10 w-10 text-white' dangerouslySetInnerHTML={{ __html: iconSvg }} />
           ) : (
             <div className='font-mono text-xl opacity-70'>{type.substring(0, 2)}</div>
           )}
         </div>
       </div>
-      {icon && (
-        <style jsx global>{`
-          .block-icon {
-            width: 80px;
-            height: 80px;
-            margin: 1rem auto;
-            display: block;
-          }
-        `}</style>
-      )}
     </div>
   )
 }

apps/docs/components/ui/block-types.tsx

@@ -1,163 +0,0 @@
-import {
-  AgentIcon,
-  ApiIcon,
-  ChartBarIcon,
-  CodeIcon,
-  ConditionalIcon,
-  ConnectIcon,
-  ResponseIcon,
-} from '@/components/icons'
-import { cn } from '@/lib/utils'
-
-// Custom Feature component specifically for BlockTypes to handle the 6-item layout
-const BlockFeature = ({
-  title,
-  description,
-  icon,
-  href,
-  index,
-  totalItems,
-  itemsPerRow,
-}: {
-  title: string
-  description: string
-  icon: React.ReactNode
-  href?: string
-  index: number
-  totalItems: number
-  itemsPerRow: number
-}) => {
-  const blockColor = {
-    '--block-color':
-      title === 'Agent'
-        ? '#8b5cf6'
-        : title === 'API'
-          ? '#3b82f6'
-          : title === 'Condition'
-            ? '#f59e0b'
-            : title === 'Function'
-              ? '#10b981'
-              : title === 'Router'
-                ? '#6366f1'
-                : title === 'Evaluator'
-                  ? '#ef4444'
-                  : '#8b5cf6',
-  } as React.CSSProperties
-
-  const content = (
-    <>
-      {index < itemsPerRow && (
-        <div className='pointer-events-none absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 to-transparent opacity-0 transition duration-200 group-hover/feature:opacity-100 dark:from-neutral-800' />
-      )}
-      {index >= itemsPerRow && (
-        <div className='pointer-events-none absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 to-transparent opacity-0 transition duration-200 group-hover/feature:opacity-100 dark:from-neutral-800' />
-      )}
-      <div
-        className='relative z-10 mb-4 px-10 text-neutral-500 transition-colors duration-200 group-hover/feature:text-[color:var(--block-color,#8b5cf6)] dark:text-neutral-400 dark:group-hover/feature:text-[color:var(--block-color,#a78bfa)]'
-        style={blockColor}
-      >
-        {icon}
-      </div>
-      <div className='relative z-10 mb-2 px-10 font-bold text-lg'>
-        <div
-          className='absolute inset-y-0 left-0 h-6 w-1 origin-center rounded-tr-full rounded-br-full bg-neutral-300 transition-all duration-200 group-hover/feature:h-8 group-hover/feature:bg-[color:var(--block-color,#8b5cf6)] dark:bg-neutral-700'
-          style={blockColor}
-        />
-        <span className='inline-block text-neutral-800 transition duration-200 group-hover/feature:translate-x-2 dark:text-neutral-100'>
-          {title}
-        </span>
-      </div>
-      <p className='relative z-10 max-w-xs px-10 text-neutral-600 text-sm dark:text-neutral-300'>
-        {description}
-      </p>
-    </>
-  )
-
-  const containerClasses = cn(
-    'flex flex-col lg:border-r py-5 relative group/feature dark:border-neutral-800',
-    (index === 0 || index === itemsPerRow) && 'lg:border-l dark:border-neutral-800',
-    index < itemsPerRow && 'lg:border-b dark:border-neutral-800',
-    href && 'cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-900/50 transition-colors'
-  )
-
-  if (href) {
-    return (
-      <a href={href} className={containerClasses} style={{ textDecoration: 'none' }}>
-        {content}
-      </a>
-    )
-  }
-
-  return <div className={containerClasses}>{content}</div>
-}
-
-export function BlockTypes() {
-  const features = [
-    {
-      title: 'Agent',
-      description:
-        'Create powerful AI agents using any LLM provider with customizable system prompts and tool integrations.',
-      icon: <AgentIcon className='h-6 w-6' />,
-      href: '/blocks/agent',
-    },
-    {
-      title: 'API',
-      description:
-        'Connect to any external API with support for all standard HTTP methods and customizable request parameters.',
-      icon: <ApiIcon className='h-6 w-6' />,
-      href: '/blocks/api',
-    },
-    {
-      title: 'Condition',
-      description:
-        'Add a condition to the workflow to branch the execution path based on a boolean expression.',
-      icon: <ConditionalIcon className='h-6 w-6' />,
-      href: '/blocks/condition',
-    },
-    {
-      title: 'Function',
-      description:
-        'Execute custom JavaScript or TypeScript code within your workflow to transform data or implement complex logic.',
-      icon: <CodeIcon className='h-6 w-6' />,
-      href: '/blocks/function',
-    },
-    {
-      title: 'Router',
-      description:
-        'Intelligently direct workflow execution to different paths based on input analysis.',
-      icon: <ConnectIcon className='h-6 w-6' />,
-      href: '/blocks/router',
-    },
-    {
-      title: 'Evaluator',
-      description:
-        'Assess content using customizable evaluation metrics and scoring criteria across multiple dimensions.',
-      icon: <ChartBarIcon className='h-6 w-6' />,
-      href: '/blocks/evaluator',
-    },
-    {
-      title: 'Response',
-      description:
-        'Send a response back to the caller with customizable data, status, and headers.',
-      icon: <ResponseIcon className='h-6 w-6' />,
-      href: '/blocks/response',
-    },
-  ]
-
-  const totalItems = features.length
-  const itemsPerRow = 3 // For large screens
-
-  return (
-    <div className='relative z-10 mx-auto grid max-w-7xl grid-cols-1 py-10 md:grid-cols-2 lg:grid-cols-3'>
-      {features.map((feature, index) => (
-        <BlockFeature
-          key={feature.title}
-          {...feature}
-          index={index}
-          totalItems={totalItems}
-          itemsPerRow={itemsPerRow}
-        />
-      ))}
-    </div>
-  )
-}

apps/docs/components/ui/code-block.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { useState } from 'react'
+import { CodeBlock as FumadocsCodeBlock } from 'fumadocs-ui/components/codeblock'
+import { Check, Copy } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export function CodeBlock(props: React.ComponentProps<typeof FumadocsCodeBlock>) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async (text: string) => {
+    await navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <FumadocsCodeBlock
+      {...props}
+      Actions={({ children, className }) => (
+        <div className={cn('empty:hidden', className)}>
+          {/* Custom copy button */}
+          <button
+            type='button'
+            aria-label={copied ? 'Copied Text' : 'Copy Text'}
+            onClick={(e) => {
+              const pre = (e.currentTarget as HTMLElement)
+                .closest('.nd-codeblock')
+                ?.querySelector('pre')
+              if (pre) handleCopy(pre.textContent || '')
+            }}
+            className={cn(
+              'rounded-md p-2 transition-all',
+              'border border-border bg-background/80 hover:bg-muted',
+              'backdrop-blur-sm'
+            )}
+          >
+            <span className='flex items-center justify-center'>
+              {copied ? (
+                <Check size={16} className='text-green-600 dark:text-green-400' />
+              ) : (
+                <Copy size={16} className='text-muted-foreground' />
+              )}
+            </span>
+          </button>
+        </div>
+      )}
+    />
+  )
+}

apps/docs/components/ui/copy-page-button.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+
+interface CopyPageButtonProps {
+  content: string
+}
+
+export function CopyPageButton({ content }: CopyPageButtonProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      className='flex items-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-2 text-muted-foreground/60 text-sm leading-none transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
+      aria-label={copied ? 'Copied to clipboard' : 'Copy page content'}
+    >
+      {copied ? (
+        <>
+          <Check className='h-3.5 w-3.5' />
+          <span>Copied</span>
+        </>
+      ) : (
+        <>
+          <Copy className='h-3.5 w-3.5' />
+          <span>Copy page</span>
+        </>
+      )}
+    </button>
+  )
+}

apps/docs/components/ui/features.tsx

@@ -1,102 +0,0 @@
-import {
-  IconAdjustmentsBolt,
-  IconCloud,
-  IconEaseInOut,
-  IconHeart,
-  IconHelp,
-  IconHistory,
-  IconRouteAltLeft,
-  IconTerminal2,
-} from '@tabler/icons-react'
-import { cn } from '@/lib/utils'
-
-export function Features() {
-  const features = [
-    {
-      title: 'Multi-LLM Support',
-      description: 'Connect to any LLM provider including OpenAI, Anthropic, and more',
-      icon: <IconCloud />,
-    },
-    {
-      title: 'API Deployment',
-      description: 'Deploy your workflows as secure, scalable APIs',
-      icon: <IconTerminal2 />,
-    },
-    {
-      title: 'Webhook Integration',
-      description: 'Trigger workflows via webhooks from external services',
-      icon: <IconRouteAltLeft />,
-    },
-    {
-      title: 'Scheduled Execution',
-      description: 'Schedule workflows to run at specific times or intervals',
-      icon: <IconEaseInOut />,
-    },
-    {
-      title: '40+ Integrations',
-      description: 'Connect to hundreds of external services and data sources',
-      icon: <IconAdjustmentsBolt />,
-    },
-    {
-      title: 'Visual Debugging',
-      description: 'Debug workflows visually with detailed execution logs',
-      icon: <IconHelp />,
-    },
-    {
-      title: 'Version Control',
-      description: 'Track changes and roll back to previous versions',
-      icon: <IconHistory />,
-    },
-    {
-      title: 'Team Collaboration',
-      description: 'Collaborate with team members on workflow development',
-      icon: <IconHeart />,
-    },
-  ]
-  return (
-    <div className='relative z-20 mx-auto grid max-w-7xl grid-cols-1 py-10 md:grid-cols-2 lg:grid-cols-4'>
-      {features.map((feature, index) => (
-        <Feature key={feature.title} {...feature} index={index} />
-      ))}
-    </div>
-  )
-}
-
-export const Feature = ({
-  title,
-  description,
-  icon,
-  index,
-}: {
-  title: string
-  description: string
-  icon: React.ReactNode
-  index: number
-}) => {
-  return (
-    <div
-      className={cn(
-        'group/feature relative flex flex-col py-5 lg:border-r dark:border-neutral-800',
-        (index === 0 || index === 4) && 'lg:border-l dark:border-neutral-800',
-        index < 4 && 'lg:border-b dark:border-neutral-800'
-      )}
-    >
-      {index < 4 && (
-        <div className='pointer-events-none absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 to-transparent opacity-0 transition duration-200 group-hover/feature:opacity-100 dark:from-neutral-800' />
-      )}
-      {index >= 4 && (
-        <div className='pointer-events-none absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 to-transparent opacity-0 transition duration-200 group-hover/feature:opacity-100 dark:from-neutral-800' />
-      )}
-      <div className='relative z-10 mb-4 px-10 text-neutral-600 dark:text-neutral-400'>{icon}</div>
-      <div className='relative z-10 mb-2 px-10 font-bold text-lg'>
-        <div className='absolute inset-y-0 left-0 h-6 w-1 origin-center rounded-tr-full rounded-br-full bg-neutral-300 transition-all duration-200 group-hover/feature:h-8 group-hover/feature:bg-purple-500 dark:bg-neutral-700' />
-        <span className='inline-block text-neutral-800 transition duration-200 group-hover/feature:translate-x-2 dark:text-neutral-100'>
-          {title}
-        </span>
-      </div>
-      <p className='relative z-10 max-w-xs px-10 text-neutral-600 text-sm dark:text-neutral-300'>
-        {description}
-      </p>
-    </div>
-  )
-}

apps/docs/components/ui/icon-mapping.ts

@@ -0,0 +1,159 @@
+// Auto-generated file - do not edit manually
+// Generated by scripts/generate-docs.ts
+// Maps block types to their icon component references
+
+import type { ComponentType, SVGProps } from 'react'
+import {
+  AirtableIcon,
+  ApolloIcon,
+  ArxivIcon,
+  AsanaIcon,
+  BrainIcon,
+  BrowserUseIcon,
+  ClayIcon,
+  ConfluenceIcon,
+  DiscordIcon,
+  DocumentIcon,
+  ElevenLabsIcon,
+  ExaAIIcon,
+  EyeIcon,
+  FirecrawlIcon,
+  GithubIcon,
+  GmailIcon,
+  GoogleCalendarIcon,
+  GoogleDocsIcon,
+  GoogleDriveIcon,
+  GoogleFormsIcon,
+  GoogleIcon,
+  GoogleSheetsIcon,
+  GoogleVaultIcon,
+  HubspotIcon,
+  HuggingFaceIcon,
+  HunterIOIcon,
+  ImageIcon,
+  JinaAIIcon,
+  JiraIcon,
+  LinearIcon,
+  LinkupIcon,
+  Mem0Icon,
+  MicrosoftExcelIcon,
+  MicrosoftOneDriveIcon,
+  MicrosoftPlannerIcon,
+  MicrosoftSharepointIcon,
+  MicrosoftTeamsIcon,
+  MistralIcon,
+  MongoDBIcon,
+  MySQLIcon,
+  NotionIcon,
+  OpenAIIcon,
+  OutlookIcon,
+  PackageSearchIcon,
+  ParallelIcon,
+  PerplexityIcon,
+  PineconeIcon,
+  PipedriveIcon,
+  PostgresIcon,
+  QdrantIcon,
+  RedditIcon,
+  ResendIcon,
+  S3Icon,
+  SalesforceIcon,
+  SerperIcon,
+  SlackIcon,
+  StagehandIcon,
+  StripeIcon,
+  SupabaseIcon,
+  TavilyIcon,
+  TelegramIcon,
+  TranslateIcon,
+  TrelloIcon,
+  TwilioIcon,
+  TypeformIcon,
+  WealthboxIcon,
+  WebflowIcon,
+  WhatsAppIcon,
+  WikipediaIcon,
+  xIcon,
+  YouTubeIcon,
+  ZepIcon,
+} from '@/components/icons'
+
+type IconComponent = ComponentType<SVGProps<SVGSVGElement>>
+
+export const blockTypeToIconMap: Record<string, IconComponent> = {
+  zep: ZepIcon,
+  youtube: YouTubeIcon,
+  x: xIcon,
+  wikipedia: WikipediaIcon,
+  whatsapp: WhatsAppIcon,
+  webflow: WebflowIcon,
+  wealthbox: WealthboxIcon,
+  vision: EyeIcon,
+  typeform: TypeformIcon,
+  twilio_voice: TwilioIcon,
+  twilio_sms: TwilioIcon,
+  trello: TrelloIcon,
+  translate: TranslateIcon,
+  thinking: BrainIcon,
+  telegram: TelegramIcon,
+  tavily: TavilyIcon,
+  supabase: SupabaseIcon,
+  stripe: StripeIcon,
+  stagehand_agent: StagehandIcon,
+  stagehand: StagehandIcon,
+  slack: SlackIcon,
+  sharepoint: MicrosoftSharepointIcon,
+  serper: SerperIcon,
+  salesforce: SalesforceIcon,
+  s3: S3Icon,
+  resend: ResendIcon,
+  reddit: RedditIcon,
+  qdrant: QdrantIcon,
+  postgresql: PostgresIcon,
+  pipedrive: PipedriveIcon,
+  pinecone: PineconeIcon,
+  perplexity: PerplexityIcon,
+  parallel_ai: ParallelIcon,
+  outlook: OutlookIcon,
+  openai: OpenAIIcon,
+  onedrive: MicrosoftOneDriveIcon,
+  notion: NotionIcon,
+  mysql: MySQLIcon,
+  mongodb: MongoDBIcon,
+  mistral_parse: MistralIcon,
+  microsoft_teams: MicrosoftTeamsIcon,
+  microsoft_planner: MicrosoftPlannerIcon,
+  microsoft_excel: MicrosoftExcelIcon,
+  memory: BrainIcon,
+  mem0: Mem0Icon,
+  linkup: LinkupIcon,
+  linear: LinearIcon,
+  knowledge: PackageSearchIcon,
+  jira: JiraIcon,
+  jina: JinaAIIcon,
+  image_generator: ImageIcon,
+  hunter: HunterIOIcon,
+  huggingface: HuggingFaceIcon,
+  hubspot: HubspotIcon,
+  google_vault: GoogleVaultIcon,
+  google_sheets: GoogleSheetsIcon,
+  google_forms: GoogleFormsIcon,
+  google_drive: GoogleDriveIcon,
+  google_docs: GoogleDocsIcon,
+  google_calendar: GoogleCalendarIcon,
+  google_search: GoogleIcon,
+  gmail: GmailIcon,
+  github: GithubIcon,
+  firecrawl: FirecrawlIcon,
+  file: DocumentIcon,
+  exa: ExaAIIcon,
+  elevenlabs: ElevenLabsIcon,
+  discord: DiscordIcon,
+  confluence: ConfluenceIcon,
+  clay: ClayIcon,
+  browser_use: BrowserUseIcon,
+  asana: AsanaIcon,
+  arxiv: ArxivIcon,
+  apollo: ApolloIcon,
+  airtable: AirtableIcon,
+}

apps/docs/components/ui/image.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useState } from 'react'
+import NextImage, { type ImageProps as NextImageProps } from 'next/image'
+import { cn } from '@/lib/utils'
+import { Lightbox } from './lightbox'
+
+interface ImageProps extends Omit<NextImageProps, 'className'> {
+  className?: string
+  enableLightbox?: boolean
+}
+
+export function Image({
+  className = 'w-full',
+  enableLightbox = true,
+  alt = '',
+  src,
+  ...props
+}: ImageProps) {
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
+
+  const handleImageClick = () => {
+    if (enableLightbox) {
+      setIsLightboxOpen(true)
+    }
+  }
+
+  return (
+    <>
+      <NextImage
+        className={cn(
+          'overflow-hidden rounded-xl border border-border object-cover shadow-sm',
+          enableLightbox && 'cursor-pointer transition-opacity hover:opacity-90',
+          className
+        )}
+        alt={alt}
+        src={src}
+        onClick={handleImageClick}
+        {...props}
+      />
+
+      {enableLightbox && (
+        <Lightbox
+          isOpen={isLightboxOpen}
+          onClose={() => setIsLightboxOpen(false)}
+          src={typeof src === 'string' ? src : String(src)}
+          alt={alt}
+          type='image'
+        />
+      )}
+    </>
+  )
+}

apps/docs/components/ui/language-dropdown.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Check, ChevronRight } from 'lucide-react'
+import { useParams, usePathname, useRouter } from 'next/navigation'
+
+const languages = {
+  en: { name: 'English', flag: '🇺🇸' },
+  es: { name: 'Español', flag: '🇪🇸' },
+  fr: { name: 'Français', flag: '🇫🇷' },
+  de: { name: 'Deutsch', flag: '🇩🇪' },
+  ja: { name: '日本語', flag: '🇯🇵' },
+  zh: { name: '简体中文', flag: '🇨🇳' },
+}
+
+export function LanguageDropdown() {
+  const [isOpen, setIsOpen] = useState(false)
+  const pathname = usePathname()
+  const params = useParams()
+  const router = useRouter()
+
+  const [currentLang, setCurrentLang] = useState(() => {
+    const langFromParams = params?.lang as string
+    return langFromParams && Object.keys(languages).includes(langFromParams) ? langFromParams : 'en'
+  })
+
+  useEffect(() => {
+    const langFromParams = params?.lang as string
+
+    if (langFromParams && Object.keys(languages).includes(langFromParams)) {
+      if (langFromParams !== currentLang) {
+        setCurrentLang(langFromParams)
+      }
+    } else {
+      if (currentLang !== 'en') {
+        setCurrentLang('en')
+      }
+    }
+  }, [params, currentLang])
+
+  const handleLanguageChange = (locale: string) => {
+    if (locale === currentLang) {
+      setIsOpen(false)
+      return
+    }
+
+    setIsOpen(false)
+
+    const segments = pathname.split('/').filter(Boolean)
+
+    if (segments[0] && Object.keys(languages).includes(segments[0])) {
+      segments.shift()
+    }
+
+    let newPath = ''
+    if (locale === 'en') {
+      newPath = segments.length > 0 ? `/${segments.join('/')}` : '/introduction'
+    } else {
+      newPath = `/${locale}${segments.length > 0 ? `/${segments.join('/')}` : '/introduction'}`
+    }
+
+    router.push(newPath)
+  }
+
+  useEffect(() => {
+    if (!isOpen) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [isOpen])
+
+  return (
+    <div className='relative'>
+      <button
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          setIsOpen(!isOpen)
+        }}
+        aria-haspopup='listbox'
+        aria-expanded={isOpen}
+        aria-controls='language-menu'
+        className='flex items-center gap-1.5 rounded-xl px-3 py-2 font-normal text-[0.9375rem] text-foreground/60 leading-[1.4] transition-colors hover:bg-foreground/8 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+        style={{
+          fontFamily:
+            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        }}
+      >
+        <span>{languages[currentLang as keyof typeof languages]?.name}</span>
+        <ChevronRight className='h-3.5 w-3.5' />
+      </button>
+
+      {isOpen && (
+        <>
+          <div className='fixed inset-0 z-[1000]' aria-hidden onClick={() => setIsOpen(false)} />
+          <div
+            id='language-menu'
+            role='listbox'
+            className='absolute top-full right-0 z-[1001] mt-1 max-h-[75vh] w-56 overflow-auto rounded-xl border border-border/50 bg-white shadow-2xl md:w-44 md:bg-background/95 md:backdrop-blur-md dark:bg-neutral-950 md:dark:bg-background/95'
+          >
+            {Object.entries(languages).map(([code, lang]) => (
+              <button
+                key={code}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  handleLanguageChange(code)
+                }}
+                role='option'
+                aria-selected={currentLang === code}
+                className={`flex w-full items-center gap-3 px-3 py-3 text-base transition-colors first:rounded-t-xl last:rounded-b-xl hover:bg-muted/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring md:gap-2 md:px-2.5 md:py-2 md:text-sm ${
+                  currentLang === code ? 'bg-muted/60 font-medium text-primary' : 'text-foreground'
+                }`}
+              >
+                <span className='text-base md:text-sm'>{lang.flag}</span>
+                <span className='leading-none'>{lang.name}</span>
+                {currentLang === code && (
+                  <Check className='ml-auto h-4 w-4 text-primary md:h-3.5 md:w-3.5' />
+                )}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

apps/docs/components/ui/lightbox.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { getAssetUrl } from '@/lib/utils'
+
+interface LightboxProps {
+  isOpen: boolean
+  onClose: () => void
+  src: string
+  alt: string
+  type: 'image' | 'video'
+}
+
+export function Lightbox({ isOpen, onClose, src, alt, type }: LightboxProps) {
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (overlayRef.current && event.target === overlayRef.current) {
+        onClose()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown)
+      document.addEventListener('click', handleClickOutside)
+      document.body.style.overflow = 'hidden'
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('click', handleClickOutside)
+      document.body.style.overflow = 'unset'
+    }
+  }, [isOpen, onClose])
+
+  if (!isOpen) return null
+
+  return (
+    <div
+      ref={overlayRef}
+      className='fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-12 backdrop-blur-sm'
+      role='dialog'
+      aria-modal='true'
+      aria-label='Media viewer'
+    >
+      <div className='relative max-h-full max-w-full overflow-hidden rounded-xl shadow-2xl'>
+        {type === 'image' ? (
+          <img
+            src={src}
+            alt={alt}
+            className='max-h-[calc(100vh-6rem)] max-w-[calc(100vw-6rem)] rounded-xl object-contain'
+            loading='lazy'
+          />
+        ) : (
+          <video
+            src={getAssetUrl(src)}
+            autoPlay
+            loop
+            muted
+            playsInline
+            className='max-h-[calc(100vh-6rem)] max-w-[calc(100vw-6rem)] rounded-xl outline-none focus:outline-none'
+          />
+        )}
+      </div>
+    </div>
+  )
+}

apps/docs/components/ui/search-trigger.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { Search } from 'lucide-react'
+
+export function SearchTrigger() {
+  const handleClick = () => {
+    const event = new KeyboardEvent('keydown', {
+      key: 'k',
+      metaKey: true,
+      bubbles: true,
+    })
+    document.dispatchEvent(event)
+  }
+
+  return (
+    <button
+      type='button'
+      className='flex h-10 w-[460px] items-center gap-2 rounded-xl border border-border/50 px-3 py-2 text-sm backdrop-blur-xl transition-colors hover:border-border'
+      style={{
+        backgroundColor: 'hsla(0, 0%, 5%, 0.85)',
+        backdropFilter: 'blur(33px) saturate(180%)',
+        WebkitBackdropFilter: 'blur(33px) saturate(180%)',
+        color: 'rgba(255, 255, 255, 0.6)',
+      }}
+      onClick={handleClick}
+    >
+      <Search className='h-4 w-4' />
+      <span>Search...</span>
+      <kbd
+        className='ml-auto flex items-center gap-0.5 font-medium'
+        style={{ color: 'rgba(255, 255, 255, 0.6)' }}
+      >
+        <span style={{ fontSize: '15px', lineHeight: '1' }}>⌘</span>
+        <span style={{ fontSize: '13px', lineHeight: '1' }}>K</span>
+      </kbd>
+    </button>
+  )
+}

apps/docs/components/ui/theme-image.tsx

@@ -1,48 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import Image from 'next/image'
-import { useTheme } from 'next-themes'
-
-interface ThemeImageProps {
-  lightSrc: string
-  darkSrc: string
-  alt: string
-  width?: number
-  height?: number
-  className?: string
-}
-
-export function ThemeImage({
-  lightSrc,
-  darkSrc,
-  alt,
-  width = 600,
-  height = 400,
-  className = 'rounded-lg border border-border my-6',
-}: ThemeImageProps) {
-  const { resolvedTheme } = useTheme()
-  const [imageSrc, setImageSrc] = useState(lightSrc)
-  const [mounted, setMounted] = useState(false)
-
-  // Wait until component is mounted to avoid hydration mismatch
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  useEffect(() => {
-    if (mounted) {
-      setImageSrc(resolvedTheme === 'dark' ? darkSrc : lightSrc)
-    }
-  }, [resolvedTheme, lightSrc, darkSrc, mounted])
-
-  if (!mounted) {
-    return null
-  }
-
-  return (
-    <div className='flex justify-center'>
-      <Image src={imageSrc} alt={alt} width={width} height={height} className={className} />
-    </div>
-  )
-}

apps/docs/components/ui/theme-toggle.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <button className='flex items-center justify-center rounded-md p-1 text-muted-foreground'>
+        <Moon className='h-4 w-4' />
+      </button>
+    )
+  }
+
+  return (
+    <button
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className='flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground'
+      aria-label='Toggle theme'
+    >
+      {theme === 'dark' ? <Moon className='h-4 w-4' /> : <Sun className='h-4 w-4' />}
+    </button>
+  )
+}

apps/docs/components/ui/video.tsx

@@ -1,4 +1,8 @@
-import { getVideoUrl } from '@/lib/utils'
+'use client'
+
+import { useState } from 'react'
+import { getAssetUrl } from '@/lib/utils'
+import { Lightbox } from './lightbox'
 
 interface VideoProps {
   src: string
@@ -7,24 +11,47 @@ interface VideoProps {
   loop?: boolean
   muted?: boolean
   playsInline?: boolean
+  enableLightbox?: boolean
 }
 
 export function Video({
   src,
-  className = 'w-full -mb-2 rounded-lg',
+  className = 'w-full rounded-xl border border-border shadow-sm overflow-hidden outline-none focus:outline-none',
   autoPlay = true,
   loop = true,
   muted = true,
   playsInline = true,
+  enableLightbox = true,
 }: VideoProps) {
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
+
+  const handleVideoClick = () => {
+    if (enableLightbox) {
+      setIsLightboxOpen(true)
+    }
+  }
+
   return (
-    <video
-      autoPlay={autoPlay}
-      loop={loop}
-      muted={muted}
-      playsInline={playsInline}
-      className={className}
-      src={getVideoUrl(src)}
-    />
+    <>
+      <video
+        autoPlay={autoPlay}
+        loop={loop}
+        muted={muted}
+        playsInline={playsInline}
+        className={`${className} ${enableLightbox ? 'cursor-pointer transition-opacity hover:opacity-90' : ''}`}
+        src={getAssetUrl(src)}
+        onClick={handleVideoClick}
+      />
+
+      {enableLightbox && (
+        <Lightbox
+          isOpen={isLightboxOpen}
+          onClose={() => setIsLightboxOpen(false)}
+          src={src}
+          alt={`Video: ${src}`}
+          type='video'
+        />
+      )}
+    </>
   )
 }

apps/docs/content/docs/blocks/agent.mdx

@@ -1,303 +0,0 @@
----
-title: Agent
-description: Create powerful AI agents using any LLM provider
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Step, Steps } from 'fumadocs-ui/components/steps'
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
-import { ThemeImage } from '@/components/ui/theme-image'
-
-The Agent block serves as the interface between your workflow and Large Language Models (LLMs). It executes inference requests against various AI providers, processes natural language inputs according to defined instructions, and generates structured or unstructured outputs for downstream consumption.
-
-<ThemeImage
-  lightSrc="/static/light/agent-light.png"
-  darkSrc="/static/dark/agent-dark.png"
-  alt="Agent Block Configuration"
-  width={350}
-  height={175}
-/>
-
-## Overview
-
-The Agent block enables you to:
-
-<Steps>
-  <Step>
-    <strong>Process natural language</strong>: Analyze user input and generate contextual responses
-  </Step>
-  <Step>
-    <strong>Execute AI-powered tasks</strong>: Perform content analysis, generation, and decision-making
-  </Step>
-  <Step>
-    <strong>Call external tools</strong>: Access APIs, databases, and services during processing
-  </Step>
-  <Step>
-    <strong>Generate structured output</strong>: Return JSON data that matches your schema requirements
-  </Step>
-</Steps> 
-
-## Configuration Options
-
-### System Prompt
-
-The system prompt establishes the agent's operational parameters and behavioral constraints. This configuration defines the agent's role, response methodology, and processing boundaries for all incoming requests.
-
-```markdown
-You are a helpful assistant that specializes in financial analysis.
-Always provide clear explanations and cite sources when possible.
-When responding to questions about investments, include risk disclaimers.
-```
-
-### User Prompt
-
-The user prompt represents the primary input data for inference processing. This parameter accepts natural language text or structured data that the agent will analyze and respond to. Input sources include:
-
-- **Static Configuration**: Direct text input specified in the block configuration
-- **Dynamic Input**: Data passed from upstream blocks through connection interfaces
-- **Runtime Generation**: Programmatically generated content during workflow execution
-
-### Model Selection
-
-The Agent block supports multiple LLM providers through a unified inference interface. Available models include:
-
-**OpenAI Models**: GPT-5, GPT-4o, o1, o3, o4-mini, gpt-4.1 (API-based inference)
-**Anthropic Models**: Claude 3.7 Sonnet (API-based inference)
-**Google Models**: Gemini 2.5 Pro, Gemini 2.0 Flash (API-based inference)
-**Alternative Providers**: Groq, Cerebras, xAI, DeepSeek (API-based inference)
-**Local Deployment**: Ollama-compatible models (self-hosted inference)
-
-<div className="mx-auto w-3/5 overflow-hidden rounded-lg">
-  <video autoPlay loop muted playsInline className="w-full -mb-2 rounded-lg" src="/models.mp4"></video>
-</div>
-
-### Temperature
-
-Control the creativity and randomness of responses:
-
-<Tabs items={['Low (0-0.3)', 'Medium (0.3-0.7)', 'High (0.7-2.0)']}>
-  <Tab>
-    More deterministic, focused responses. Best for factual tasks, customer support, and
-    situations where accuracy is critical.
-  </Tab>
-  <Tab>
-    Balanced creativity and focus. Suitable for general purpose applications that require both
-    accuracy and some creativity.
-  </Tab>
-  <Tab>
-    More creative, varied responses. Ideal for creative writing, brainstorming, and generating
-    diverse ideas.
-  </Tab>
-</Tabs>
-
-<p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
-  The temperature range (0-1 or 0-2) varies depending on the selected model.
-</p>
-
-### API Key
-
-Your API key for the selected LLM provider. This is securely stored and used for authentication.
-
-### Tools
-
-Tools extend the agent's capabilities through external API integrations and service connections. The tool system enables function calling, allowing the agent to execute operations beyond text generation.
-
-**Tool Integration Process**:
-1. Access the Tools configuration section within the Agent block
-2. Select from 60+ pre-built integrations or define custom functions
-3. Configure authentication parameters and operational constraints
-
-<div className="mx-auto w-3/5 overflow-hidden rounded-lg">
-  <video autoPlay loop muted playsInline className="w-full -mb-2 rounded-lg" src="/tools.mp4"></video>
-</div>
-
-**Available Tool Categories**:
-- **Communication**: Gmail, Slack, Telegram, WhatsApp, Microsoft Teams
-- **Data Sources**: Notion, Google Sheets, Airtable, Supabase, Pinecone
-- **Web Services**: Firecrawl, Google Search, Exa AI, browser automation
-- **Development**: GitHub, Jira, Linear repository and issue management
-- **AI Services**: OpenAI, Perplexity, Hugging Face, ElevenLabs
-
-**Tool Execution Control**:
-- **Auto**: Model determines tool invocation based on context and necessity
-- **Required**: Tool must be called during every inference request
-- **None**: Tool definition available but excluded from model context
-
-<div className="mx-auto w-3/5 overflow-hidden rounded-lg">
-  <video autoPlay loop muted playsInline className="w-full -mb-2 rounded-lg" src="/granular-tool-control.mp4"></video>
-</div>
-
-### Response Format
-
-The Response Format parameter enforces structured output generation through JSON Schema validation. This ensures consistent, machine-readable responses that conform to predefined data structures:
-
-```json
-{
-  "name": "user_analysis",
-  "schema": {
-    "type": "object",
-    "properties": {
-      "sentiment": {
-        "type": "string",
-        "enum": ["positive", "negative", "neutral"]
-      },
-      "confidence": {
-        "type": "number",
-        "minimum": 0,
-        "maximum": 1
-      }
-    },
-    "required": ["sentiment", "confidence"]
-  }
-}
-```
-
-This configuration constrains the model's output to comply with the specified schema, preventing free-form text responses and ensuring structured data generation.
-
-### Accessing Results
-
-After an agent completes, you can access its outputs:
-
-- **`<agent.content>`**: The agent's response text or structured data
-- **`<agent.tokens>`**: Token usage statistics (prompt, completion, total)
-- **`<agent.tool_calls>`**: Details of any tools the agent used during execution
-- **`<agent.cost>`**: Estimated cost of the API call (if available)
-
-## Advanced Features
-
-### Memory Integration
-
-Agents can maintain context across interactions using the memory system:
-
-```javascript
-// In a Function block before the agent
-const memory = {
-  conversation_history: previousMessages,
-  user_preferences: userProfile,
-  session_data: currentSession
-};
-```
-
-### Structured Output Validation
-
-Use JSON Schema to ensure consistent, machine-readable responses:
-
-```json
-{
-  "type": "object",
-  "properties": {
-    "analysis": {"type": "string"},
-    "confidence": {"type": "number", "minimum": 0, "maximum": 1},
-    "categories": {"type": "array", "items": {"type": "string"}}
-  },
-  "required": ["analysis", "confidence"]
-}
-```
-
-### Error Handling
-
-Agents automatically handle common errors:
-- API rate limits with exponential backoff
-- Invalid tool calls with retry logic
-- Network failures with connection recovery
-- Schema validation errors with fallback responses
-
-## Inputs and Outputs
-
-<Tabs items={['Configuration', 'Variables', 'Results']}>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>System Prompt</strong>: Instructions defining agent behavior and role
-      </li>
-      <li>
-        <strong>User Prompt</strong>: Input text or data to process
-      </li>
-      <li>
-        <strong>Model</strong>: AI model selection (OpenAI, Anthropic, Google, etc.)
-      </li>
-      <li>
-        <strong>Temperature</strong>: Response randomness control (0-2)
-      </li>
-      <li>
-        <strong>Tools</strong>: Array of available tools for function calling
-      </li>
-      <li>
-        <strong>Response Format</strong>: JSON Schema for structured output
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>agent.content</strong>: Agent's response text or structured data
-      </li>
-      <li>
-        <strong>agent.tokens</strong>: Token usage statistics object
-      </li>
-      <li>
-        <strong>agent.tool_calls</strong>: Array of tool execution details
-      </li>
-      <li>
-        <strong>agent.cost</strong>: Estimated API call cost (if available)
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>Content</strong>: Primary response output from the agent
-      </li>
-      <li>
-        <strong>Metadata</strong>: Usage statistics and execution details
-      </li>
-      <li>
-        <strong>Access</strong>: Available in blocks after the agent
-      </li>
-    </ul>
-  </Tab>
-</Tabs>
-
-## Example Use Cases
-
-### Customer Support Automation
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Handle customer inquiries with database access</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>User submits support ticket via API block</li>
-    <li>Agent processes inquiry with product database tools</li>
-    <li>Agent generates response and creates follow-up ticket</li>
-    <li>Response block sends reply to customer</li>
-  </ol>
-</div>
-
-### Multi-Model Content Analysis
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Analyze content with different AI models</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Function block processes uploaded document</li>
-    <li>Agent with GPT-4o performs technical analysis</li>
-    <li>Agent with Claude analyzes sentiment and tone</li>
-    <li>Function block combines results for final report</li>
-  </ol>
-</div>
-
-### Tool-Powered Research Assistant
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Research assistant with web search and document access</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>User query received via input</li>
-    <li>Agent searches web using Google Search tool</li>
-    <li>Agent accesses Notion database for internal docs</li>
-    <li>Agent compiles comprehensive research report</li>
-  </ol>
-</div>
-
-## Best Practices
-
-- **Be specific in system prompts**: Clearly define the agent's role, tone, and limitations. The more specific your instructions are, the better the agent will be able to fulfill its intended purpose.
-- **Choose the right temperature setting**: Use lower temperature settings (0-0.3) when accuracy is important, or increase temperature (0.7-2.0) for more creative or varied responses
-- **Leverage tools effectively**: Integrate tools that complement the agent's purpose and enhance its capabilities. Be selective about which tools you provide to avoid overwhelming the agent. For tasks with little overlap, use another Agent block for the best results.

apps/docs/content/docs/blocks/api.mdx

@@ -1,234 +0,0 @@
----
-title: API
-description: Connect to external services through API endpoints
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Step, Steps } from 'fumadocs-ui/components/steps'
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
-import { ThemeImage } from '@/components/ui/theme-image'
-
-The API block enables you to connect your workflow to external services through HTTP requests. It supports various methods like GET, POST, PUT, DELETE, and PATCH, allowing you to interact with virtually any API endpoint.
-
-<ThemeImage
-  lightSrc="/static/light/api-light.png"
-  darkSrc="/static/dark/api-dark.png"
-  alt="API Block"
-  width={350}
-  height={175}
-/>
-
-## Overview
-
-The API block enables you to:
-
-<Steps>
-  <Step>
-    <strong>Connect to external services</strong>: Make HTTP requests to REST APIs and web services
-  </Step>
-  <Step>
-    <strong>Send and receive data</strong>: Process responses and transform data from external sources
-  </Step>
-  <Step>
-    <strong>Integrate third-party platforms</strong>: Connect with services like Stripe, Slack, or custom APIs
-  </Step>
-  <Step>
-    <strong>Handle authentication</strong>: Support various auth methods including Bearer tokens and API keys
-  </Step>
-</Steps>
-
-## Configuration Options
-
-### URL
-
-The endpoint URL for the API request. This can be:
-
-- A static URL entered directly in the block
-- A dynamic URL connected from another block's output
-- A URL with path parameters
-
-### Method
-
-Select the HTTP method for your request:
-
-- **GET**: Retrieve data from the server
-- **POST**: Send data to the server to create a resource
-- **PUT**: Update an existing resource on the server
-- **DELETE**: Remove a resource from the server
-- **PATCH**: Partially update an existing resource
-
-### Query Parameters
-
-Define key-value pairs that will be appended to the URL as query parameters. For example:
-
-```
-Key: apiKey
-Value: your_api_key_here
-
-Key: limit
-Value: 10
-```
-
-These would be added to the URL as `?apiKey=your_api_key_here&limit=10`.
-
-### Headers
-
-Configure HTTP headers for your request. Common headers include:
-
-```
-Key: Content-Type
-Value: application/json
-
-Key: Authorization
-Value: Bearer your_token_here
-```
-
-### Request Body
-
-For methods that support a request body (POST, PUT, PATCH), you can define the data to send. The body can be:
-
-- JSON data entered directly in the block
-- Data connected from another block's output
-- Dynamically generated during workflow execution
-
-### Accessing Results
-
-After an API request completes, you can access its outputs:
-
-- **`<api.data>`**: The response body data from the API
-- **`<api.status>`**: HTTP status code (200, 404, 500, etc.)
-- **`<api.headers>`**: Response headers from the server
-- **`<api.error>`**: Error details if the request failed
-
-## Advanced Features
-
-### Dynamic URL Construction
-
-Build URLs dynamically using variables from previous blocks:
-
-```javascript
-// In a Function block before the API
-const userId = <start.userId>;
-const apiUrl = `https://api.example.com/users/${userId}/profile`;
-```
-
-### Request Retries
-
-The API block automatically handles:
-- Network timeouts with exponential backoff
-- Rate limit responses (429 status codes)
-- Server errors (5xx status codes) with retry logic
-- Connection failures with reconnection attempts
-
-### Response Validation
-
-Validate API responses before processing:
-
-```javascript
-// In a Function block after the API
-if (<api.status> === 200) {
-  const data = <api.data>;
-  // Process successful response
-} else {
-  // Handle error response
-  console.error(`API Error: ${<api.status>}`);
-}
-```
-
-## Inputs and Outputs
-
-<Tabs items={['Configuration', 'Variables', 'Results']}>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>URL</strong>: The endpoint to send the request to
-      </li>
-      <li>
-        <strong>Method</strong>: HTTP method (GET, POST, PUT, DELETE, PATCH)
-      </li>
-      <li>
-        <strong>Query Parameters</strong>: Key-value pairs for URL parameters
-      </li>
-      <li>
-        <strong>Headers</strong>: HTTP headers for authentication and content type
-      </li>
-      <li>
-        <strong>Body</strong>: Request payload for POST/PUT/PATCH methods
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>api.data</strong>: Response body data from the API call
-      </li>
-      <li>
-        <strong>api.status</strong>: HTTP status code returned by server
-      </li>
-      <li>
-        <strong>api.headers</strong>: Response headers from the server
-      </li>
-      <li>
-        <strong>api.error</strong>: Error details if request failed
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>Response Data</strong>: Primary API response content
-      </li>
-      <li>
-        <strong>Status Information</strong>: HTTP status and error details
-      </li>
-      <li>
-        <strong>Access</strong>: Available in blocks after the API call
-      </li>
-    </ul>
-  </Tab>
-</Tabs>
-
-## Example Use Cases
-
-### Fetch User Profile Data
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Retrieve user information from external service</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Function block constructs user ID from input</li>
-    <li>API block calls GET /users/&#123;id&#125; endpoint</li>
-    <li>Function block processes and formats user data</li>
-    <li>Response block returns formatted profile</li>
-  </ol>
-</div>
-
-### Create Support Ticket
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Submit support request to ticketing system</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Agent analyzes user issue and generates ticket data</li>
-    <li>API block POSTs ticket to support system</li>
-    <li>Condition block checks if ticket was created successfully</li>
-    <li>Response block confirms ticket creation with ID</li>
-  </ol>
-</div>
-
-### Payment Processing
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Process payment through Stripe API</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Function block validates payment data</li>
-    <li>API block creates payment intent via Stripe</li>
-    <li>Condition block handles payment success/failure</li>
-    <li>Function block updates order status in database</li>
-  </ol>
-</div>
-
-## Best Practices
-
-- **Use environment variables for sensitive data**: Don't hardcode API keys or credentials
-- **Handle errors gracefully**: Connect error handling logic for failed requests
-- **Validate responses**: Check status codes and response formats before processing data
-- **Respect rate limits**: Be mindful of API rate limits and implement appropriate throttling

apps/docs/content/docs/blocks/condition.mdx

@@ -1,236 +0,0 @@
----
-title: Condition
-description: Create conditional logic and branching in your workflows
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Step, Steps } from 'fumadocs-ui/components/steps'
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion'
-import { ThemeImage } from '@/components/ui/theme-image'
-
-The Condition block allows you to branch your workflow execution path based on boolean expressions. It evaluates conditions and routes the workflow accordingly, enabling you to create dynamic, responsive workflows with different execution paths.
-
-<ThemeImage
-  lightSrc="/static/light/condition-light.png"
-  darkSrc="/static/dark/condition-dark.png"
-  alt="Condition Block"
-  width={350}
-  height={175}
-/>
-
-<Callout>
-  Condition blocks enable deterministic decision-making without requiring an LLM, making them ideal
-  for straightforward branching logic.
-</Callout>
-
-## Overview
-
-The Condition block enables you to:
-
-<Steps>
-  <Step>
-    <strong>Create branching logic</strong>: Route workflows based on boolean expressions
-  </Step>
-  <Step>
-    <strong>Make data-driven decisions</strong>: Evaluate conditions using previous block outputs
-  </Step>
-  <Step>
-    <strong>Handle multiple scenarios</strong>: Define multiple conditions with different paths
-  </Step>
-  <Step>
-    <strong>Provide deterministic routing</strong>: Make decisions without requiring an LLM
-  </Step>
-</Steps>
-
-## How It Works
-
-The Condition block operates through a sequential evaluation process:
-
-1. **Evaluate Expression** - Processes the JavaScript/TypeScript boolean expression using current workflow data
-2. **Determine Result** - Returns true or false based on the expression evaluation
-3. **Route Workflow** - Directs execution to the appropriate destination block based on the result  
-4. **Provide Context** - Generates metadata about the decision for debugging and monitoring
-
-## Configuration Options
-
-### Conditions
-
-Define one or more conditions that will be evaluated. Each condition includes:
-
-- **Expression**: A JavaScript/TypeScript expression that evaluates to true or false
-- **Path**: The destination block to route to if the condition is true
-- **Description**: Optional explanation of what the condition checks
-
-You can create multiple conditions that are evaluated in order, with the first matching condition determining the execution path.
-
-### Condition Expression Format
-
-Conditions use JavaScript syntax and can reference input values from previous blocks.
-
-<Tabs items={['Score Threshold', 'Text Analysis', 'Multiple Conditions']}>
-  <Tab>
-    ```javascript
-    // Check if a score is above a threshold
-    <agent.score> > 75
-    ```
-  </Tab>
-  <Tab>
-    ```javascript
-    // Check if a text contains specific keywords
-    <agent.text>.includes('urgent') || <agent.text>.includes('emergency')
-    ```
-  </Tab>
-  <Tab>
-    ```javascript
-    // Check multiple conditions
-    <agent.age> >= 18 && <agent.country> === 'US'
-    ```
-  </Tab>
-</Tabs>
-
-
-### Accessing Results
-
-After a condition evaluates, you can access its outputs:
-
-- **`<condition.result>`**: Boolean result of the condition evaluation
-- **`<condition.matched_condition>`**: ID of the condition that was matched
-- **`<condition.content>`**: Description of the evaluation result
-- **`<condition.path>`**: Details of the chosen routing destination
-
-## Advanced Features
-
-### Complex Expressions
-
-Use JavaScript operators and functions in conditions:
-
-```javascript
-// String operations
-<user.email>.endsWith('@company.com')
-
-// Array operations
-<api.tags>.includes('urgent')
-
-// Mathematical operations
-<agent.confidence> * 100 > 85
-
-// Date comparisons
-new Date(<api.created_at>) > new Date('2024-01-01')
-```
-
-### Multiple Condition Evaluation
-
-Conditions are evaluated in order until one matches:
-
-```javascript
-// Condition 1: Check for high priority
-<ticket.priority> === 'high'
-
-// Condition 2: Check for urgent keywords
-<ticket.subject>.toLowerCase().includes('urgent')
-
-// Condition 3: Default fallback
-true
-```
-
-### Error Handling
-
-Conditions automatically handle:
-- Undefined or null values with safe evaluation
-- Type mismatches with appropriate fallbacks
-- Invalid expressions with error logging
-- Missing variables with default values
-
-## Inputs and Outputs
-
-<Tabs items={['Configuration', 'Variables', 'Results']}>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>Conditions</strong>: Array of boolean expressions to evaluate
-      </li>
-      <li>
-        <strong>Expressions</strong>: JavaScript/TypeScript conditions using block outputs
-      </li>
-      <li>
-        <strong>Routing Paths</strong>: Destination blocks for each condition result
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>condition.result</strong>: Boolean result of condition evaluation
-      </li>
-      <li>
-        <strong>condition.matched_condition</strong>: ID of the matched condition
-      </li>
-      <li>
-        <strong>condition.content</strong>: Description of evaluation result
-      </li>
-      <li>
-        <strong>condition.path</strong>: Details of chosen routing destination
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>Boolean Result</strong>: Primary condition evaluation outcome
-      </li>
-      <li>
-        <strong>Routing Information</strong>: Path selection and condition details
-      </li>
-      <li>
-        <strong>Access</strong>: Available in blocks after the condition
-      </li>
-    </ul>
-  </Tab>
-</Tabs>
-
-## Example Use Cases
-
-### Customer Support Routing
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Route support tickets based on priority</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>API block fetches support ticket data</li>
-    <li>Condition checks if `<api.priority>` equals 'high'</li>
-    <li>High priority tickets → Agent with escalation tools</li>
-    <li>Normal priority tickets → Standard support agent</li>
-  </ol>
-</div>
-
-### Content Moderation
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Filter content based on analysis results</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Agent analyzes user-generated content</li>
-    <li>Condition checks if `<agent.toxicity_score>` > 0.7</li>
-    <li>Toxic content → Moderation workflow</li>
-    <li>Clean content → Publishing workflow</li>
-  </ol>
-</div>
-
-### User Onboarding Flow
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Personalize onboarding based on user type</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Function block processes user registration data</li>
-    <li>Condition checks if `<user.account_type>` === 'enterprise'</li>
-    <li>Enterprise users → Advanced setup workflow</li>
-    <li>Individual users → Simple onboarding workflow</li>
-  </ol>
-</div>
-
-## Best Practices
-
-- **Order conditions correctly**: Place more specific conditions before general ones to ensure specific logic takes precedence over fallbacks
-- **Include a default condition**: Add a catch-all condition (`true`) as the last condition to handle unmatched cases and prevent workflow execution from getting stuck
-- **Keep expressions simple**: Use clear, straightforward boolean expressions for better readability and easier debugging
-- **Document your conditions**: Add descriptions to explain the purpose of each condition for better team collaboration and maintenance
-- **Test edge cases**: Verify conditions handle boundary values correctly by testing with values at the edges of your condition ranges

apps/docs/content/docs/blocks/evaluator.mdx

@@ -1,131 +0,0 @@
----
-title: Evaluator
-description: Assess content quality using customizable evaluation metrics
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Step, Steps } from 'fumadocs-ui/components/steps'
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
-import { ThemeImage } from '@/components/ui/theme-image'
-import { Video } from '@/components/ui/video'
-
-The Evaluator block uses AI to score and assess content quality based on metrics you define. Perfect for quality control, A/B testing, and ensuring your AI outputs meet specific standards.
-
-<ThemeImage
-  lightSrc="/static/light/evaluator-light.png"
-  darkSrc="/static/dark/evaluator-dark.png"
-  alt="Evaluator Block Configuration"
-  width={350}
-  height={175}
-/>
-
-## What You Can Evaluate
-
-**AI-Generated Content**: Score chatbot responses, generated articles, or marketing copy
-**User Input**: Evaluate customer feedback, survey responses, or form submissions  
-**Content Quality**: Assess clarity, accuracy, relevance, and tone
-**Performance Metrics**: Track improvements over time with consistent scoring
-**A/B Testing**: Compare different approaches with objective metrics
-
-## Configuration Options
-
-### Evaluation Metrics
-
-Define custom metrics to evaluate content against. Each metric includes:
-
-- **Name**: A short identifier for the metric
-- **Description**: A detailed explanation of what the metric measures
-- **Range**: The numeric range for scoring (e.g., 1-5, 0-10)
-
-Example metrics:
-
-```
-Accuracy (1-5): How factually accurate is the content?
-Clarity (1-5): How clear and understandable is the content?
-Relevance (1-5): How relevant is the content to the original query?
-```
-
-### Content
-
-The content to be evaluated. This can be:
-
-- Directly provided in the block configuration
-- Connected from another block's output (typically an Agent block)
-- Dynamically generated during workflow execution
-
-### Model Selection
-
-Choose an AI model to perform the evaluation:
-
-**OpenAI**: GPT-4o, o1, o3, o4-mini, gpt-4.1
-**Anthropic**: Claude 3.7 Sonnet
-**Google**: Gemini 2.5 Pro, Gemini 2.0 Flash
-**Other Providers**: Groq, Cerebras, xAI, DeepSeek
-**Local Models**: Any model running on Ollama
-
-<div className="w-full max-w-2xl mx-auto overflow-hidden rounded-lg">
-  <Video src="models.mp4" />
-</div>
-
-**Recommendation**: Use models with strong reasoning capabilities like GPT-4o or Claude 3.7 Sonnet for more accurate evaluations.
-
-### API Key
-
-Your API key for the selected LLM provider. This is securely stored and used for authentication.
-
-## How It Works
-
-1. The Evaluator block takes the provided content and your custom metrics
-2. It generates a specialized prompt that instructs the LLM to evaluate the content
-3. The prompt includes clear guidelines on how to score each metric
-4. The LLM evaluates the content and returns numeric scores for each metric
-5. The Evaluator block formats these scores as structured output for use in your workflow
-
-## Inputs and Outputs
-
-### Inputs
-
-- **Content**: The text or structured data to evaluate
-- **Metrics**: Custom evaluation criteria with scoring ranges
-- **Model Settings**: LLM provider and parameters
-
-### Outputs
-
-- **Content**: A summary of the evaluation
-- **Model**: The model used for evaluation
-- **Tokens**: Usage statistics
-- **Metric Scores**: Numeric scores for each defined metric
-
-## Example Usage
-
-Here's an example of how an Evaluator block might be configured for assessing customer service responses:
-
-```yaml
-# Example Evaluator Configuration
-metrics:
-  - name: Empathy
-    description: How well does the response acknowledge and address the customer's emotional state?
-    range:
-      min: 1
-      max: 5
-  - name: Solution
-    description: How effectively does the response solve the customer's problem?
-    range:
-      min: 1
-      max: 5
-  - name: Clarity
-    description: How clear and easy to understand is the response?
-    range:
-      min: 1
-      max: 5
-
-model: Anthropic/claude-3-opus
-```
-
-## Best Practices
-
-- **Use specific metric descriptions**: Clearly define what each metric measures to get more accurate evaluations
-- **Choose appropriate ranges**: Select scoring ranges that provide enough granularity without being overly complex
-- **Connect with Agent blocks**: Use Evaluator blocks to assess Agent block outputs and create feedback loops
-- **Use consistent metrics**: For comparative analysis, maintain consistent metrics across similar evaluations
-- **Combine multiple metrics**: Use several metrics to get a comprehensive evaluation

apps/docs/content/docs/blocks/function.mdx

@@ -1,313 +0,0 @@
----
-title: Function
-description: Execute custom JavaScript or TypeScript code in your workflows
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Step, Steps } from 'fumadocs-ui/components/steps'
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
-import { ThemeImage } from '@/components/ui/theme-image'
-
-The Function block lets you run custom JavaScript or TypeScript code in your workflow. Use it to transform data, perform calculations, or implement custom logic that isn't available in other blocks.
-
-<ThemeImage
-  lightSrc="/static/light/function-light.png"
-  darkSrc="/static/dark/function-dark.png"
-  alt="Function Block with Code Editor"
-  width={350}
-  height={175}
-/>
-
-## Overview
-
-The Function block enables you to:
-
-<Steps>
-  <Step>
-    <strong>Transform data</strong>: Convert formats, parse text, manipulate arrays and objects
-  </Step>
-  <Step>
-    <strong>Perform calculations</strong>: Math operations, statistics, financial calculations
-  </Step>
-  <Step>
-    <strong>Implement custom logic</strong>: Complex conditionals, loops, and algorithms
-  </Step>
-  <Step>
-    <strong>Process external data</strong>: Parse responses, format requests, handle authentication
-  </Step>
-</Steps>
-
-## How It Works
-
-The Function block runs your code in a secure, isolated environment:
-
-1. **Receive Input**: Access data from previous blocks via the `input` object
-2. **Execute Code**: Run your JavaScript/TypeScript code 
-3. **Return Results**: Use `return` to pass data to the next block
-4. **Handle Errors**: Built-in error handling and logging
-
-## Configuration Options
-
-### Code Editor
-
-Write your JavaScript/TypeScript code in a full-featured editor with:
-- Syntax highlighting and error checking
-- Line numbers and bracket matching
-- Support for modern JavaScript features
-- Native support for `fetch` 
-
-### Accessing Input Data
-
-Use the `input` object to access data from previous blocks:
-
-```javascript
-// Access data from connected blocks
-const userData = <agent.userData>;
-const orderData = <agent.orderData>;
-
-// Access specific fields
-const customerName = <agent.customer.name>;
-const total = <agent.order.total>;
-```
-
-### Common Examples
-
-**Data Transformation**:
-```javascript
-// Convert and format data
-const formatted = {
-  name: <agent.user.firstName> + ' ' + <agent.user.lastName>,
-  email: <agent.user.email>.toLowerCase(),
-  joinDate: new Date(<agent.user.created>).toLocaleDateString()
-};
-return formatted;
-```
-
-**Calculations**:
-```javascript
-// Calculate discounts and totals
-const subtotal = <agent.items>.reduce((sum, item) => sum + item.price, 0);
-const discount = subtotal > 100 ? 0.1 : 0;
-const total = subtotal * (1 - discount);
-
-return { subtotal, discount, total };
-```
-
-**Data Validation**:
-```javascript
-// Validate email format
-const email = <agent.email>;
-const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-
-if (!isValid) {
-  throw new Error('Invalid email format');
-}
-return { email, isValid };
-```
-
-### Accessing Results
-
-After a function executes, you can access its outputs:
-
-- **`<function.result>`**: The value returned from your function
-- **`<function.stdout>`**: Any console.log() output from your code
-
-## Advanced Features
-
-### Async/Await Support
-
-Use async functions for complex operations:
-
-```javascript
-// Async function example
-const processData = async () => {
-  const data = <api.response>;
-  
-  // Process data with async operations
-  const processed = await Promise.all(
-    data.map(async (item) => {
-      return {
-        id: item.id,
-        processed: true,
-        timestamp: new Date().toISOString()
-      };
-    })
-  );
-  
-  return processed;
-};
-
-return await processData();
-```
-
-### Error Handling
-
-Implement robust error handling:
-
-```javascript
-try {
-  const result = <api.data>;
-  
-  if (!result || !result.length) {
-    throw new Error('No data received');
-  }
-  
-  return result.map(item => ({
-    id: item.id,
-    name: item.name.trim(),
-    valid: true
-  }));
-} catch (error) {
-  console.error('Processing failed:', error.message);
-  return { error: error.message, valid: false };
-}
-```
-
-### Performance Optimization
-
-Optimize for large datasets:
-
-```javascript
-// Efficient data processing
-const data = <api.large_dataset>;
-
-// Use efficient array methods
-const processed = data
-  .filter(item => item.status === 'active')
-  .map(item => ({
-    id: item.id,
-    summary: item.description.substring(0, 100)
-  }))
-  .slice(0, 1000); // Limit results
-
-return processed;
-```
-
-## Security and Limitations
-
-<Callout type="warning">
-  Functions run in a secure environment with these restrictions:
-  - **Execution timeout**: 30 seconds maximum to prevent infinite loops
-  - **Memory limits**: Limited memory to prevent resource exhaustion
-  - **No network access**: Cannot make HTTP requests (use API blocks instead)
-  - **Limited APIs**: Only safe JavaScript APIs are available
-</Callout>
-
-## Inputs and Outputs
-
-<Tabs items={['Configuration', 'Variables', 'Results']}>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>Code</strong>: Your JavaScript/TypeScript code to execute
-      </li>
-      <li>
-        <strong>Timeout</strong>: Maximum execution time (defaults to 30 seconds)
-      </li>
-      <li>
-        <strong>Input Data</strong>: All connected block outputs available via variables
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>function.result</strong>: The value returned from your function
-      </li>
-      <li>
-        <strong>function.stdout</strong>: Console.log() output from your code
-      </li>
-      <li>
-        <strong>function.error</strong>: Error details if function failed
-      </li>
-      <li>
-        <strong>function.execution_time</strong>: Time taken to execute
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>Function Result</strong>: Primary output from your code
-      </li>
-      <li>
-        <strong>Debug Information</strong>: Logs and execution details
-      </li>
-      <li>
-        <strong>Access</strong>: Available in blocks after the function
-      </li>
-    </ul>
-  </Tab>
-</Tabs>
-
-## Example Use Cases
-
-### Data Processing Pipeline
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Transform API response into structured data</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>API block fetches raw customer data</li>
-    <li>Function block processes and validates data</li>
-    <li>Function block calculates derived metrics</li>
-    <li>Response block returns formatted results</li>
-  </ol>
-</div>
-
-### Business Logic Implementation
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Calculate loyalty scores and tiers</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Agent retrieves customer purchase history</li>
-    <li>Function block calculates loyalty metrics</li>
-    <li>Function block determines customer tier</li>
-    <li>Condition block routes based on tier level</li>
-  </ol>
-</div>
-
-### Data Validation and Sanitization
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Validate and clean user input</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>User input received from form submission</li>
-    <li>Function block validates email format and phone numbers</li>
-    <li>Function block sanitizes and normalizes data</li>
-    <li>API block saves validated data to database</li>
-  </ol>
-</div>
-
-### Example: Loyalty Score Calculator
-
-```javascript title="loyalty-calculator.js"
-// Process customer data and calculate loyalty score
-const { purchaseHistory, accountAge, supportTickets } = <agent>;
-
-// Calculate metrics
-const totalSpent = purchaseHistory.reduce((sum, purchase) => sum + purchase.amount, 0);
-const purchaseFrequency = purchaseHistory.length / (accountAge / 365);
-const ticketRatio = supportTickets.resolved / supportTickets.total;
-
-// Calculate loyalty score (0-100)
-const spendScore = Math.min(totalSpent / 1000 * 30, 30);
-const frequencyScore = Math.min(purchaseFrequency * 20, 40);
-const supportScore = ticketRatio * 30;
-
-const loyaltyScore = Math.round(spendScore + frequencyScore + supportScore);
-
-return {
-  customer: <agent.name>,
-  loyaltyScore,
-  loyaltyTier: loyaltyScore >= 80 ? "Platinum" : loyaltyScore >= 60 ? "Gold" : "Silver",
-  metrics: { spendScore, frequencyScore, supportScore }
-};
-```
-
-## Best Practices
-
-- **Keep functions focused**: Write functions that do one thing well to improve maintainability and debugging
-- **Handle errors gracefully**: Use try/catch blocks to handle potential errors and provide meaningful error messages
-- **Test edge cases**: Ensure your code handles unusual inputs, null values, and boundary conditions correctly
-- **Optimize for performance**: Be mindful of computational complexity and memory usage for large datasets
-- **Use console.log() for debugging**: Leverage stdout output to debug and monitor function execution

apps/docs/content/docs/blocks/loop.mdx

@@ -1,175 +0,0 @@
----
-title: Loop
-description: Create iterative workflows with loops that execute blocks repeatedly
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Step, Steps } from 'fumadocs-ui/components/steps'
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
-import { ThemeImage } from '@/components/ui/theme-image'
-
-The Loop block is a container block in Sim that allows you to execute a group of blocks repeatedly. Loops enable iterative processing in your workflows.
-
-<ThemeImage
-  lightSrc="/static/light/loop-light.png"
-  darkSrc="/static/dark/loop-dark.png"
-  alt="Loop Block"
-  width={500}
-  height={300}
-/>
-
-<Callout type="info">
-  Loop blocks are container nodes that can hold other blocks inside them. The blocks inside a loop will execute multiple times based on your configuration.
-</Callout>
-
-## Overview
-
-The Loop block enables you to:
-
-<Steps>
-  <Step>
-    <strong>Iterate over collections</strong>: Process arrays or objects one item at a time
-  </Step>
-  <Step>
-    <strong>Repeat operations</strong>: Execute blocks a fixed number of times
-  </Step>
-</Steps>
-
-## Configuration Options
-
-### Loop Type
-
-Choose between two types of loops:
-
-<Tabs items={['For Loop', 'ForEach Loop']}>
-  <Tab>
-    A numeric loop that executes a fixed number of times. Use this when you need to repeat an operation a specific number of times.
-    
-    ```
-    Example: Run 5 times
-    - Iteration 1
-    - Iteration 2
-    - Iteration 3
-    - Iteration 4
-    - Iteration 5
-    ```
-  </Tab>
-  <Tab>
-    A collection-based loop that iterates over each item in an array or object. Use this when you need to process a collection of items.
-    
-    ```
-    Example: Process ["apple", "banana", "orange"]
-    - Iteration 1: Process "apple"
-    - Iteration 2: Process "banana"
-    - Iteration 3: Process "orange"
-    ```
-  </Tab>
-</Tabs>
-
-## How to Use Loops
-
-### Creating a Loop
-
-1. Drag a Loop block from the toolbar onto your canvas
-2. Configure the loop type and parameters
-3. Drag other blocks inside the loop container
-4. Connect the blocks as needed
-
-### Accessing Results
-
-After a loop completes, you can access aggregated results:
-
-- **`<loop.results>`**: Array of results from all loop iterations
-
-## Example Use Cases
-
-### Processing API Results
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Process multiple customer records</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>API block fetches customer list</li>
-    <li>ForEach loop iterates over each customer</li>
-    <li>Inside loop: Agent analyzes customer data</li>
-    <li>Inside loop: Function stores analysis results</li>
-  </ol>
-</div>
-
-### Iterative Content Generation
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Generate multiple variations</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Set For loop to 5 iterations</li>
-    <li>Inside loop: Agent generates content variation</li>
-    <li>Inside loop: Evaluator scores the content</li>
-    <li>After loop: Function selects best variation</li>
-  </ol>
-</div>
-
-## Advanced Features
-
-### Limitations
-
-<Callout type="warning">
-  Container blocks (Loops and Parallels) cannot be nested inside each other. This means:
-  - You cannot place a Loop block inside another Loop block
-  - You cannot place a Parallel block inside a Loop block
-  - You cannot place any container block inside another container block
-  
-  If you need multi-dimensional iteration, consider restructuring your workflow to use sequential loops or process data in stages.
-</Callout>
-
-<Callout type="info">
-  Loops execute sequentially, not in parallel. If you need concurrent execution, use the Parallel block instead.
-</Callout>
-
-## Inputs and Outputs
-
-<Tabs items={['Configuration', 'Variables', 'Results']}>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>Loop Type</strong>: Choose between 'for' or 'forEach'
-      </li>
-      <li>
-        <strong>Iterations</strong>: Number of times to execute (for loops)
-      </li>
-      <li>
-        <strong>Collection</strong>: Array or object to iterate over (forEach loops)
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>loop.currentItem</strong>: Current item being processed
-      </li>
-      <li>
-        <strong>loop.index</strong>: Current iteration number (0-based)
-      </li>
-      <li>
-        <strong>loop.items</strong>: Full collection (forEach loops)
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>loop.results</strong>: Array of all iteration results
-      </li>
-      <li>
-        <strong>Structure</strong>: Results maintain iteration order
-      </li>
-      <li>
-        <strong>Access</strong>: Available in blocks after the loop
-      </li>
-    </ul>
-  </Tab>
-</Tabs>
-
-## Best Practices
-
-- **Set reasonable limits**: Keep iteration counts reasonable to avoid long execution times
-- **Use ForEach for collections**: When processing arrays or objects, use ForEach instead of For loops
-- **Handle errors gracefully**: Consider adding error handling inside loops for robust workflows

apps/docs/content/docs/blocks/meta.json

@@ -1,15 +0,0 @@
-{
-  "title": "Blocks",
-  "pages": [
-    "agent",
-    "api",
-    "condition",
-    "evaluator",
-    "function",
-    "loop",
-    "parallel",
-    "response",
-    "router",
-    "workflow"
-  ]
-}

apps/docs/content/docs/blocks/response.mdx

@@ -1,186 +0,0 @@
----
-title: Response
-description: Send a structured response back to API calls
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Step, Steps } from 'fumadocs-ui/components/steps'
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
-import { ThemeImage } from '@/components/ui/theme-image'
-
-The Response block is the final step in your workflow that formats and returns data to whoever called your workflow. It's like the "return" statement for your entire workflow—it packages up results and sends them back.
-
-<ThemeImage
-  lightSrc="/static/light/response-light.png"
-  darkSrc="/static/dark/response-dark.png"
-  alt="Response Block Configuration"
-  width={350}
-  height={175}
-/>
-
-<Callout type="info">
-  Response blocks are terminal blocks - they end the workflow execution and cannot connect to other blocks.
-</Callout>
-
-## When You Need Response Blocks
-
-**API Endpoints**: When your workflow is called via API, Response blocks format the return data
-**Webhooks**: Return confirmation or data back to the calling system
-**Testing**: See formatted results when testing your workflow
-**Data Export**: Structure data for external systems or reports
-
-## Two Ways to Build Responses
-
-### Builder Mode (Recommended)
-Visual interface for building response structure:
-- Drag and drop fields
-- Reference workflow variables easily
-- Visual preview of response structure
-
-### Editor Mode (Advanced)
-Write JSON directly:
-- Full control over response format
-- Support for complex nested structures
-- Use `<variable.name>` syntax for dynamic values
-
-## Configuration Options
-
-### Response Data
-
-The response data is the main content that will be sent back to the API caller. This should be formatted as JSON and can include:
-
-- Static values
-- Dynamic references to workflow variables using the `<variable.name>` syntax
-- Nested objects and arrays
-- Any valid JSON structure
-
-### Status Code
-
-Set the HTTP status code for the response. Common status codes include:
-
-<Tabs items={['Success (2xx)', 'Client Error (4xx)', 'Server Error (5xx)']}>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li><strong>200</strong>: OK - Standard success response</li>
-      <li><strong>201</strong>: Created - Resource successfully created</li>
-      <li><strong>204</strong>: No Content - Success with no response body</li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li><strong>400</strong>: Bad Request - Invalid request parameters</li>
-      <li><strong>401</strong>: Unauthorized - Authentication required</li>
-      <li><strong>404</strong>: Not Found - Resource doesn't exist</li>
-      <li><strong>422</strong>: Unprocessable Entity - Validation errors</li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li><strong>500</strong>: Internal Server Error - Server-side error</li>
-      <li><strong>502</strong>: Bad Gateway - External service error</li>
-      <li><strong>503</strong>: Service Unavailable - Service temporarily down</li>
-    </ul>
-  </Tab>
-</Tabs>
-
-<p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
-  Default status code is 200 if not specified.
-</p>
-
-### Response Headers
-
-Configure additional HTTP headers to include in the response.
-
-Headers are configured as key-value pairs:
-
-| Key | Value |
-|-----|-------|
-| Content-Type | application/json |
-| Cache-Control | no-cache |
-| X-API-Version | 1.0 |
-
-## Inputs and Outputs
-
-<Tabs items={['Inputs', 'Outputs']}>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>data</strong> (JSON, optional): The JSON data to send in the response body
-      </li>
-      <li>
-        <strong>status</strong> (number, optional): HTTP status code (default: 200)
-      </li>
-      <li>
-        <strong>headers</strong> (JSON, optional): Additional response headers
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li><strong>data</strong>: The response body data</li>
-      <li><strong>status</strong>: HTTP status code</li>
-      <li><strong>headers</strong>: Response headers</li>
-    </ul>
-  </Tab>
-</Tabs>
-
-## Variable References
-
-Use the `<variable.name>` syntax to dynamically insert workflow variables into your response:
-
-```json
-{
-  "user": {
-    "id": "<variable.userId>",
-    "name": "<variable.userName>",
-    "email": "<variable.userEmail>"
-  },
-  "query": "<variable.searchQuery>",
-  "results": "<variable.searchResults>",
-  "totalFound": "<variable.resultCount>",
-  "processingTime": "<variable.executionTime>ms"
-}
-```
-
-<Callout type="warning">
-  Variable names are case-sensitive and must match exactly with the variables available in your workflow.
-</Callout>
-
-## Example Usage
-
-Here's an example of how a Response block might be configured for a user search API:
-
-```yaml
-data: |
-  {
-    "success": true,
-    "data": {
-      "users": "<variable.searchResults>",
-      "pagination": {
-        "page": "<variable.currentPage>",
-        "limit": "<variable.pageSize>",
-        "total": "<variable.totalUsers>"
-      }
-    },
-    "query": {
-      "searchTerm": "<variable.searchTerm>",
-      "filters": "<variable.appliedFilters>"
-    },
-    "timestamp": "<variable.timestamp>"
-  }
-status: 200
-headers:
-  - key: X-Total-Count
-    value: <variable.totalUsers>
-  - key: Cache-Control
-    value: public, max-age=300
-```
-
-## Best Practices
-
-- **Use meaningful status codes**: Choose appropriate HTTP status codes that accurately reflect the outcome of the workflow
-- **Structure your responses consistently**: Maintain a consistent JSON structure across all your API endpoints for better developer experience
-- **Include relevant metadata**: Add timestamps and version information to help with debugging and monitoring
-- **Handle errors gracefully**: Use conditional logic in your workflow to set appropriate error responses with descriptive messages
-- **Validate variable references**: Ensure all referenced variables exist and contain the expected data types before the Response block executes
-

apps/docs/content/docs/blocks/router.mdx

@@ -1,259 +0,0 @@
----
-title: Router
-description: Route workflow execution based on specific conditions or logic
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Step, Steps } from 'fumadocs-ui/components/steps'
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion'
-import { ThemeImage } from '@/components/ui/theme-image'
-import { Video } from '@/components/ui/video'
-
-The Router block uses AI to intelligently decide which path your workflow should take next. Unlike Condition blocks that use simple rules, Router blocks can understand context and make smart routing decisions based on content analysis.
-
-<ThemeImage
-  lightSrc="/static/light/router-light.png"
-  darkSrc="/static/dark/router-dark.png"
-  alt="Router Block with Multiple Paths"
-  width={350}
-  height={175}
-/>
-
-## Overview
-
-The Router block enables you to:
-
-<Steps>
-  <Step>
-    <strong>Intelligent content routing</strong>: Use AI to understand intent and context
-  </Step>
-  <Step>
-    <strong>Dynamic path selection</strong>: Route workflows based on unstructured content analysis
-  </Step>
-  <Step>
-    <strong>Context-aware decisions</strong>: Make smart routing choices beyond simple rules
-  </Step>
-  <Step>
-    <strong>Multi-path management</strong>: Handle complex workflows with multiple potential destinations
-  </Step>
-</Steps>
-
-## Router vs Condition Blocks
-
-<Accordions>
-  <Accordion title="When to Use Router">
-    - AI-powered content analysis needed
-    - Unstructured or varying content types
-    - Intent-based routing (e.g., "route support tickets to departments")
-    - Context-aware decision making required
-  </Accordion>
-  <Accordion title="When to Use Condition">
-    - Simple, rule-based decisions
-    - Structured data or numeric comparisons
-    - Fast, deterministic routing needed
-    - Boolean logic sufficient
-  </Accordion>
-</Accordions>
-
-## How It Works
-
-The Router block:
-
-<Steps>
-  <Step>
-    <strong>Analyze content</strong>: Uses an LLM to understand input content and context
-  </Step>
-  <Step>
-    <strong>Evaluate targets</strong>: Compares content against available destination blocks
-  </Step>
-  <Step>
-    <strong>Select destination</strong>: Identifies the most appropriate path based on intent
-  </Step>
-  <Step>
-    <strong>Route execution</strong>: Directs workflow to the selected block
-  </Step>
-</Steps>
-
-## Configuration Options
-
-### Content/Prompt
-
-The content or prompt that the Router will analyze to make routing decisions. This can be:
-
-- A direct user query or input
-- Output from a previous block
-- A system-generated message
-
-### Target Blocks
-
-The possible destination blocks that the Router can select from. The Router will automatically detect connected blocks, but you can also:
-
-- Customize the descriptions of target blocks to improve routing accuracy
-- Specify routing criteria for each target block
-- Exclude certain blocks from being considered as routing targets
-
-### Model Selection
-
-Choose an AI model to power the routing decision:
-
-**OpenAI**: GPT-4o, o1, o3, o4-mini, gpt-4.1  \
-**Anthropic**: Claude 3.7 Sonnet \
-**Google**: Gemini 2.5 Pro, Gemini 2.0 Flash \
-**Other Providers**: Groq, Cerebras, xAI, DeepSeek \
-**Local Models**: Any model running on Ollama 
-
-<div className="w-full max-w-2xl mx-auto overflow-hidden rounded-lg">
-  <Video src="router-model-dropdown.mp4" />
-</div>
-
-**Recommendation**: Use models with strong reasoning capabilities like GPT-4o or Claude 3.7 Sonnet for more accurate routing decisions.
-
-### API Key
-
-Your API key for the selected LLM provider. This is securely stored and used for authentication.
-
-### Accessing Results
-
-After a router makes a decision, you can access its outputs:
-
-- **`<router.content>`**: Summary of the routing decision made
-- **`<router.selected_path>`**: Details of the chosen destination block
-- **`<router.tokens>`**: Token usage statistics from the LLM
-- **`<router.model>`**: The model used for decision-making
-
-## Advanced Features
-
-### Custom Routing Criteria
-
-Define specific criteria for each target block:
-
-```javascript
-// Example routing descriptions
-Target Block 1: "Technical support issues, API problems, integration questions"
-Target Block 2: "Billing inquiries, subscription changes, payment issues"
-Target Block 3: "General questions, feedback, feature requests"
-```
-
-### Multi-Model Routing
-
-Use different models for different routing scenarios:
-
-```javascript
-// Fast routing for simple cases
-Model: GPT-4o-mini
-Criteria: Simple, common routing patterns
-
-// Complex routing for nuanced decisions
-Model: Claude 3.7 Sonnet
-Criteria: Complex content analysis required
-```
-
-### Fallback Handling
-
-Implement robust fallback mechanisms:
-
-```javascript
-// Router configuration
-Primary Targets: ["Support", "Sales", "Technical"]
-Fallback Target: "General" // Default when no specific match
-Confidence Threshold: 0.7 // Minimum confidence for routing
-```
-
-## Inputs and Outputs
-
-<Tabs items={['Configuration', 'Variables', 'Results']}>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>Content/Prompt</strong>: Text to analyze for routing decisions
-      </li>
-      <li>
-        <strong>Target Blocks</strong>: Connected blocks as potential destinations
-      </li>
-      <li>
-        <strong>Model</strong>: AI model for routing analysis
-      </li>
-      <li>
-        <strong>API Key</strong>: Authentication for selected LLM provider
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>router.content</strong>: Summary of routing decision
-      </li>
-      <li>
-        <strong>router.selected_path</strong>: Details of chosen destination
-      </li>
-      <li>
-        <strong>router.tokens</strong>: Token usage statistics
-      </li>
-      <li>
-        <strong>router.model</strong>: Model used for decision-making
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>Routing Decision</strong>: Primary path selection result
-      </li>
-      <li>
-        <strong>Decision Context</strong>: Analysis summary and reasoning
-      </li>
-      <li>
-        <strong>Access</strong>: Available in blocks after the router
-      </li>
-    </ul>
-  </Tab>
-</Tabs>
-
-## Example Use Cases
-
-### Customer Support Triage
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Route support tickets to specialized departments</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>User submits support request via form</li>
-    <li>Router analyzes ticket content and context</li>
-    <li>Technical issues → Engineering support agent</li>
-    <li>Billing questions → Finance support agent</li>
-  </ol>
-</div>
-
-### Content Classification
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Classify and route user-generated content</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>User submits content or feedback</li>
-    <li>Router analyzes content type and sentiment</li>
-    <li>Feature requests → Product team workflow</li>
-    <li>Bug reports → Technical support workflow</li>
-  </ol>
-</div>
-
-### Lead Qualification
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Route leads based on qualification criteria</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Lead information captured from form</li>
-    <li>Router analyzes company size, industry, and needs</li>
-    <li>Enterprise leads → Sales team with custom pricing</li>
-    <li>SMB leads → Self-service onboarding flow</li>
-  </ol>
-</div>
-
-
-## Best Practices
-
-- **Provide clear target descriptions**: Help the Router understand when to select each destination with specific, detailed descriptions
-- **Use specific routing criteria**: Define clear conditions and examples for each path to improve accuracy
-- **Implement fallback paths**: Connect a default destination for when no specific path is appropriate
-- **Test with diverse inputs**: Ensure the Router handles various input types, edge cases, and unexpected content
-- **Monitor routing performance**: Review routing decisions regularly and refine criteria based on actual usage patterns
-- **Choose appropriate models**: Use models with strong reasoning capabilities for complex routing decisions

apps/docs/content/docs/blocks/workflow.mdx

@@ -1,259 +0,0 @@
----
-title: Workflow
-description: Execute other workflows as reusable components within your current workflow
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Step, Steps } from 'fumadocs-ui/components/steps'
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
-import { ThemeImage } from '@/components/ui/theme-image'
-
-The Workflow block allows you to execute other workflows as reusable components within your current workflow. This powerful feature enables modular design, code reuse, and the creation of complex nested workflows that can be composed from smaller, focused workflows.
-
-<ThemeImage
-  lightSrc="/static/light/workflow-light.png"
-  darkSrc="/static/dark/workflow-dark.png"
-  alt="Workflow Block"
-  width={300}
-  height={175}
-/>
-
-<Callout type="info">
-  Workflow blocks enable modular design by allowing you to compose complex workflows from smaller, reusable components.
-</Callout>
-
-## Overview
-
-The Workflow block serves as a bridge between workflows, enabling you to:
-
-<Steps>
-  <Step>
-    <strong>Reuse existing workflows</strong>: Execute previously created workflows as components within new workflows
-  </Step>
-  <Step>
-    <strong>Create modular designs</strong>: Break down complex processes into smaller, manageable workflows
-  </Step>
-  <Step>
-    <strong>Maintain separation of concerns</strong>: Keep different business logic isolated in separate workflows
-  </Step>
-  <Step>
-    <strong>Enable team collaboration</strong>: Share and reuse workflows across different projects and team members
-  </Step>
-</Steps>
-
-## How It Works
-
-The Workflow block:
-
-1. Takes a reference to another workflow in your workspace
-2. Passes input data from the current workflow to the child workflow
-3. Executes the child workflow in an isolated context
-4. Returns the results back to the parent workflow for further processing
-
-## Configuration Options
-
-### Workflow Selection
-
-Choose which workflow to execute from a dropdown list of available workflows in your workspace. The list includes:
-
-- All workflows you have access to in the current workspace
-- Workflows shared with you by other team members
-- Both enabled and disabled workflows (though only enabled workflows can be executed)
-
-### Input Data
-
-Define the data to pass to the child workflow:
-
-- **Single Variable Input**: Select a variable or block output to pass to the child workflow
-- **Variable References**: Use `<variable.name>` to reference workflow variables
-- **Block References**: Use `<blockName.field>` to reference outputs from previous blocks
-- **Automatic Mapping**: The selected data is automatically available as `start.input` in the child workflow
-- **Optional**: The input field is optional - child workflows can run without input data
-- **Type Preservation**: Variable types (strings, numbers, objects, etc.) are preserved when passed to the child workflow
-
-### Accessing Results
-
-After a workflow executes, you can access its outputs:
-
-- **`<workflow.response>`**: The complete output from the child workflow
-- **`<workflow.name>`**: The name of the executed child workflow
-- **`<workflow.success>`**: Boolean indicating successful completion
-- **`<workflow.error>`**: Error details if the workflow failed
-- **`<workflow.execution_time>`**: Time taken to execute the workflow
-
-### Execution Context
-
-The child workflow executes with:
-
-- Its own isolated execution context
-- Access to the same workspace resources (API keys, environment variables)
-- Proper workspace membership and permission checks
-- Independent logging and monitoring
-
-## Safety and Limitations
-
-To prevent infinite recursion and ensure system stability, the Workflow block includes several safety mechanisms:
-
-<Callout type="warning">
-  **Cycle Detection**: The system automatically detects and prevents circular dependencies between workflows to avoid infinite loops.
-</Callout>
-
-- **Maximum Depth Limit**: Nested workflows are limited to a maximum depth of 10 levels
-- **Cycle Detection**: Automatic detection and prevention of circular workflow dependencies
-- **Timeout Protection**: Child workflows inherit timeout settings to prevent indefinite execution
-- **Resource Limits**: Memory and execution time limits apply to prevent resource exhaustion
-
-## Advanced Features
-
-### Dynamic Workflow Selection
-
-Select workflows dynamically based on runtime conditions:
-
-```javascript
-// In a Function block before the Workflow block
-const workflowId = <condition.result> ? 'premium-workflow' : 'standard-workflow';
-return { selectedWorkflow: workflowId };
-```
-
-### Error Handling and Fallbacks
-
-Implement robust error handling for child workflows:
-
-```javascript
-// In a Function block after the Workflow block
-if (!<workflow.success>) {
-  console.error('Child workflow failed:', <workflow.error>);
-  // Implement fallback logic
-  return { fallback: true, error: <workflow.error> };
-}
-return <workflow.response>;
-```
-
-### Workflow Chaining
-
-Chain multiple workflows together:
-
-```javascript
-// Pass output from one workflow to another
-Workflow 1 Input: <start.input>
-Workflow 2 Input: <workflow1.response>
-Workflow 3 Input: <workflow2.response>
-```
-
-## Inputs and Outputs
-
-<Tabs items={['Configuration', 'Variables', 'Results']}>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>Workflow Selection</strong>: Choose which workflow to execute
-      </li>
-      <li>
-        <strong>Input Data</strong>: Variable or block reference to pass to child workflow
-      </li>
-      <li>
-        <strong>Execution Context</strong>: Isolated environment with workspace resources
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>workflow.response</strong>: Complete output from child workflow
-      </li>
-      <li>
-        <strong>workflow.name</strong>: Name of executed child workflow
-      </li>
-      <li>
-        <strong>workflow.success</strong>: Boolean indicating completion status
-      </li>
-      <li>
-        <strong>workflow.error</strong>: Error details if workflow failed
-      </li>
-      <li>
-        <strong>workflow.execution_time</strong>: Time taken to execute
-      </li>
-    </ul>
-  </Tab>
-  <Tab>
-    <ul className="list-disc space-y-2 pl-6">
-      <li>
-        <strong>Workflow Response</strong>: Primary output from child workflow
-      </li>
-      <li>
-        <strong>Execution Status</strong>: Success status and error information
-      </li>
-      <li>
-        <strong>Access</strong>: Available in blocks after the workflow
-      </li>
-    </ul>
-  </Tab>
-</Tabs>
-
-## Example Use Cases
-
-### Modular Customer Onboarding
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Break down complex onboarding into reusable components</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Main workflow receives customer data</li>
-    <li>Workflow block executes validation workflow</li>
-    <li>Workflow block executes account setup workflow</li>
-    <li>Workflow block executes welcome email workflow</li>
-  </ol>
-</div>
-
-### Microservice Architecture
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Create independent service workflows</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Payment processing workflow handles transactions</li>
-    <li>Inventory management workflow updates stock</li>
-    <li>Notification workflow sends confirmations</li>
-    <li>Main workflow orchestrates all services</li>
-  </ol>
-</div>
-
-### Conditional Processing
-
-<div className="mb-4 rounded-md border p-4">
-  <h4 className="font-medium">Scenario: Execute different workflows based on conditions</h4>
-  <ol className="list-decimal pl-5 text-sm">
-    <li>Condition block evaluates user type</li>
-    <li>Enterprise users → Complex approval workflow</li>
-    <li>Standard users → Simple approval workflow</li>
-    <li>Free users → Basic processing workflow</li>
-  </ol>
-</div>
-
-### Example: Customer Validation Workflow
-
-```javascript title="validation-workflow.js"
-// Main workflow passes customer data to validation workflow
-const customerData = <start.input>;
-
-// Validation workflow processes the data
-const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(customerData.email);
-const phoneValid = /^\+?[1-9]\d{1,14}$/.test(customerData.phone);
-
-return {
-  customer: customerData,
-  validation: {
-    email: emailValid,
-    phone: phoneValid,
-    overall: emailValid && phoneValid
-  }
-};
-```
-
-## Best Practices
-
-- **Keep workflows focused**: Design child workflows to handle specific, well-defined tasks with clear inputs and outputs
-- **Minimize nesting depth**: Avoid deeply nested workflow hierarchies for better maintainability and performance
-- **Handle errors gracefully**: Implement proper error handling for child workflow failures and provide fallback mechanisms
-- **Document dependencies**: Clearly document which workflows depend on others and maintain dependency maps
-- **Test independently**: Ensure child workflows can be tested and validated independently from parent workflows
-- **Monitor performance**: Be aware that nested workflows can impact overall execution time and resource usage
-- **Use semantic naming**: Give workflows descriptive names that clearly indicate their purpose and functionality

apps/docs/content/docs/connections/accessing-data.mdx

@@ -1,190 +0,0 @@
----
-title: Accessing Connected Data
-description: Techniques for accessing and manipulating data from connected blocks
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { File, Files, Folder } from 'fumadocs-ui/components/files'
-
-Once blocks are connected, you can access data from source blocks in destination blocks using connection tags and various data access techniques.
-
-## Basic Data Access
-
-The simplest way to access data is through direct references using connection tags:
-
-<Files>
-  <File name="Simple Property" annotation="<block.content>" />
-  <File name="Nested Property" annotation="<block.tokens.total>" />
-  <File name="Array Element" annotation="<block.items[0].name>" />
-  <File name="Complex Path" annotation="<block.data.users[2].profile.email>" />
-</Files>
-
-## Advanced Data Access Techniques
-
-### Array Access
-
-You can access array elements using square bracket notation:
-
-```javascript
-// Access the first item in an array
-<block.items[0]>
-
-// Access a specific property of an array item
-<block.items[2].name>
-
-// Access the last item in an array (in Function blocks)
-const items = input.block.items;
-const lastItem = items[items.length - 1];
-```
-
-### Object Property Access
-
-Access object properties using dot notation:
-
-```javascript
-// Access a simple property
-<block.content>
-
-// Access a nested property
-<block.data.user.profile.name>
-
-// Access a property with special characters (in Function blocks)
-const data = input.block.data;
-const specialProp = data['property-with-dashes'];
-```
-
-### Dynamic References
-
-Connection references are evaluated at runtime, allowing for dynamic data flow through your workflow:
-
-```javascript
-// In a Function block, you can access connected data
-const userName = input.userBlock.name;
-const orderTotal = input.apiBlock.body.order.total;
-
-// Process the data
-const discount = orderTotal > 100 ? 0.1 : 0;
-const finalPrice = orderTotal * (1 - discount);
-
-// Return the result
-return {
-  userName,
-  originalTotal: orderTotal,
-  discount: discount * 100 + '%',
-  finalPrice
-};
-```
-
-## Data Transformation
-
-### Using Function Blocks
-
-Function blocks are the most powerful way to transform data between connections:
-
-```javascript
-// Example: Transform API response data
-const apiResponse = input.apiBlock.data;
-const transformedData = {
-  users: apiResponse.results.map(user => ({
-    id: user.id,
-    fullName: `${user.firstName} ${user.lastName}`,
-    email: user.email.toLowerCase(),
-    isActive: user.status === 'active'
-  })),
-  totalCount: apiResponse.count,
-  timestamp: new Date().toISOString()
-};
-
-return transformedData;
-```
-
-### String Interpolation
-
-You can combine connection tags with static text:
-
-```
-Hello, <userBlock.name>! Your order #<orderBlock.id> has been processed.
-```
-
-### Conditional Content
-
-In Function blocks, you can create conditional content based on connected data:
-
-```javascript
-const user = input.userBlock;
-const orderTotal = input.orderBlock.total;
-
-let message = `Thank you for your order, ${user.name}!`;
-
-if (orderTotal > 100) {
-  message += " You've qualified for free shipping!";
-} else {
-  message += ` Add $${(100 - orderTotal).toFixed(2)} more to qualify for free shipping.`;
-}
-
-return { message };
-```
-
-## Handling Missing Data
-
-It's important to handle cases where connected data might be missing or null:
-
-<Callout type="warning">
-  Always validate connected data before using it, especially when accessing nested properties or
-  array elements.
-</Callout>
-
-### Default Values
-
-In Function blocks, you can provide default values for missing data:
-
-```javascript
-const userName = input.userBlock?.name || 'Guest'
-const items = input.orderBlock?.items || []
-const total = input.orderBlock?.total ?? 0
-```
-
-### Conditional Checks
-
-Check if data exists before accessing nested properties:
-
-```javascript
-let userEmail = 'No email provided'
-if (input.userBlock && input.userBlock.contact && input.userBlock.contact.email) {
-  userEmail = input.userBlock.contact.email
-}
-```
-
-### Optional Chaining
-
-In Function blocks, use optional chaining to safely access nested properties:
-
-```javascript
-const userCity = input.userBlock?.address?.city
-const firstItemName = input.orderBlock?.items?.[0]?.name
-```
-
-## Debugging Connection Data
-
-When troubleshooting connection issues, these techniques can help:
-
-1. **Log Data**: In Function blocks, use `console.log()` to inspect connected data
-2. **Return Full Objects**: Return the full input object to see all available data
-3. **Check Types**: Verify the data types of connected values
-4. **Validate Paths**: Ensure you're using the correct path to access nested data
-
-```javascript
-// Example debugging function
-function debugConnections() {
-  console.log('All inputs:', input)
-  console.log('User data type:', typeof input.userBlock)
-  console.log('Order items:', input.orderBlock?.items)
-
-  return {
-    debug: true,
-    allInputs: input,
-    userExists: !!input.userBlock,
-    orderItemCount: input.orderBlock?.items?.length || 0,
-  }
-}
-```

apps/docs/content/docs/connections/basics.mdx

@@ -1,76 +0,0 @@
----
-title: Connection Basics
-description: Learn how connections work in Sim
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Step, Steps } from 'fumadocs-ui/components/steps'
-
-## How Connections Work
-
-Connections are the pathways that allow data to flow between blocks in your workflow. When you connect two blocks in Sim, you're establishing a data flow relationship that defines how information passes from one block to another.
-
-<Callout type="info">
-  Each connection represents a directed relationship where data flows from a source block's output
-  to a destination block's input.
-</Callout>
-
-### Creating Connections
-
-<Steps>
-  <Step>
-    <strong>Select Source Block</strong>: Click on the output port of the block you want to connect
-    from
-  </Step>
-  <Step>
-    <strong>Draw Connection</strong>: Drag to the input port of the destination block
-  </Step>
-  <Step>
-    <strong>Confirm Connection</strong>: Release to create the connection
-  </Step>
-  <Step>
-    <strong>Configure (Optional)</strong>: Some connections may require additional configuration
-  </Step>
-</Steps>
-
-### Connection Flow
-
-The flow of data through connections follows these principles:
-
-1. **Directional Flow**: Data always flows from outputs to inputs
-2. **Execution Order**: Blocks execute in order based on their connections
-3. **Data Transformation**: Data may be transformed as it passes between blocks
-4. **Conditional Paths**: Some blocks (like Router and Condition) can direct flow to different paths
-
-### Connection Visualization
-
-Connections are visually represented in the workflow editor:
-
-- **Solid Lines**: Active connections that will pass data
-- **Animated Flow**: During execution, data flow is visualized along connections
-- **Color Coding**: Different connection types may have different colors
-- **Connection Tags**: Visual indicators showing what data is available
-
-### Managing Connections
-
-You can manage your connections in several ways:
-
-- **Delete**: Click on a connection and press Delete or use the context menu
-- **Reroute**: Drag a connection to change its path
-- **Inspect**: Click on a connection to see details about the data being passed
-- **Disable**: Temporarily disable a connection without deleting it
-
-<Callout type="warning">
-  Deleting a connection will immediately stop data flow between the blocks. Make sure this is
-  intended before removing connections.
-</Callout>
-
-## Connection Compatibility
-
-Not all blocks can be connected to each other. Compatibility depends on:
-
-1. **Data Type Compatibility**: The output type must be compatible with the input type
-2. **Block Restrictions**: Some blocks may have restrictions on what they can connect to
-3. **Workflow Logic**: Connections must make logical sense in the context of your workflow
-
-The editor will indicate when connections are invalid or incompatible.

apps/docs/content/docs/connections/best-practices.mdx

@@ -1,208 +0,0 @@
----
-title: Connection Best Practices
-description: Recommended patterns for effective connection management
----
-
-import { Callout } from 'fumadocs-ui/components/callout'
-import { Step, Steps } from 'fumadocs-ui/components/steps'
-
-## Workflow Organization
-
-### Organize Your Connections
-
-Keep your workflow clean and understandable by organizing connections logically:
-
-- **Minimize crossing connections** when possible to reduce visual complexity
-- **Group related blocks together** to make data flow more intuitive
-- **Use consistent flow direction** (typically left-to-right or top-to-bottom)
-- **Label complex connections** with descriptive names
-
-<Callout type="info">
-  A well-organized workflow is easier to understand, debug, and maintain. Take time to arrange your
-  blocks and connections in a logical manner.
-</Callout>
-
-### Connection Naming Conventions
-
-When working with multiple connections, consistent naming helps maintain clarity:
-
-<Steps>
-  <Step>
-    <strong>Use descriptive block names</strong>: Name blocks based on their function (e.g.,
-    "UserDataFetcher", "ResponseGenerator")
-  </Step>
-  <Step>
-    <strong>Be specific with connection references</strong>: Use clear variable names when
-    referencing connections in code
-  </Step>
-  <Step>
-    <strong>Document complex connections</strong>: Add comments explaining non-obvious data
-    transformations
-  </Step>
-</Steps>
-
-## Data Validation
-
-### Validate Data Flow
-
-Ensure that the data being passed between blocks is compatible:
-
-- **Check that required fields are available** in the source block
-- **Verify data types match expectations** before using them
-- **Use Function blocks to transform data** when necessary
-- **Handle missing or null values** with default values or conditional logic
-
-```javascript
-// Example: Validating and transforming data in a Function block
-function processUserData() {
-  // Validate required fields
-  if (!input.userBlock || !input.userBlock.id) {
-    return { error: 'Missing user data', valid: false }
-  }
-
-  // Transform and validate data types
-  const userId = String(input.userBlock.id)
-  const userName = input.userBlock.name || 'Unknown User'
-  const userScore = Number(input.userBlock.score) || 0
-
-  return {
-    valid: true,
-    user: {
-      id: userId,
-      name: userName,
-      score: userScore,
-      isHighScore: userScore > 100,
-    },
-  }
-}
-```
-
-## Documentation
-
-### Document Connection Purpose
-
-Add comments or descriptions to clarify the purpose of connections, especially in complex workflows:
-
-- **What data is being passed**: Document the key fields and their purpose
-- **Why this connection exists**: Explain the relationship between blocks
-- **Any transformations or conditions applied**: Note any data processing that occurs
-
-```javascript
-// Example: Documenting connection purpose in a Function block
-/*
- * This function processes user data from the UserFetcher block
- * and order history from the OrderHistory block to generate
- * personalized product recommendations.
- *
- * Input:
- * - userBlock: User profile data (id, preferences, history)
- * - orderBlock: Recent order history (items, dates, amounts)
- *
- * Output:
- * - recommendations: Array of recommended product IDs
- * - userSegment: Calculated user segment for marketing
- * - conversionProbability: Estimated likelihood of purchase
- */
-function generateRecommendations() {
-  // Implementation...
-}
-```
-
-## Testing and Debugging
-
-### Test Connection References
-
-Verify that connection references work as expected:
-
-- **Test with different input values** to ensure robustness
-- **Check edge cases** (empty values, large datasets, special characters)
-- **Ensure error handling for missing or invalid data**
-- **Use console logging in Function blocks** to debug connection issues
-
-```javascript
-// Example: Testing connection references with edge cases
-function testConnections() {
-  console.log('Testing connections...')
-
-  // Log all inputs for debugging
-  console.log('All inputs:', JSON.stringify(input, null, 2))
-
-  // Test for missing data
-  const hasUserData = !!input.userBlock
-  console.log('Has user data:', hasUserData)
-
-  // Test edge cases
-  const items = input.orderBlock?.items || []
-  console.log('Item count:', items.length)
-  console.log('Empty items test:', items.length === 0 ? 'Passed' : 'Failed')
-
-  // Return test results
-  return {
-    tests: {
-      hasUserData,
-      hasItems: items.length > 0,
-      hasLargeOrder: items.length > 10,
-    },
-  }
-}
-```
-
-## Performance Considerations
-
-### Optimize Data Flow
-
-Keep your workflows efficient by optimizing how data flows through connections:
-
-- **Pass only necessary data** between blocks to reduce memory usage
-- **Use Function blocks to filter large datasets** before passing them on
-- **Consider caching results** for expensive operations
-- **Break complex workflows into smaller, reusable components**
-
-```javascript
-// Example: Optimizing data flow by filtering
-function optimizeUserData() {
-  const userData = input.userBlock
-
-  // Only pass necessary fields to downstream blocks
-  return {
-    id: userData.id,
-    name: userData.name,
-    email: userData.email,
-    // Filter out unnecessary profile data, history, etc.
-  }
-}
-```
-
-## Security Best Practices
-
-### Secure Sensitive Data
-
-Protect sensitive information when using connections:
-
-- **Never expose API keys or credentials** in connection data
-- **Sanitize user input** before processing it
-- **Redact sensitive information** when logging connection data
-- **Use secure connections** for external API calls
-
-<Callout type="warning">
-  Be careful when logging connection data that might contain sensitive information. Always redact or
-  mask sensitive fields like passwords, API keys, or personal information.
-</Callout>
-
-## Advanced Patterns
-
-### Conditional Connections
-
-Use Condition blocks to create dynamic workflows:
-
-- **Route data based on content** to different processing paths
-- **Implement fallback paths** for error handling
-- **Create decision trees** for complex business logic
-
-### Feedback Loops
-
-Create more sophisticated workflows with feedback connections:
-
-- **Implement iterative processing** by connecting later blocks back to earlier ones
-- **Use Memory blocks** to store state between iterations
-- **Set termination conditions** to prevent infinite loops

apps/docs/content/docs/connections/meta.json

@@ -1,4 +0,0 @@
-{
-  "title": "Connections",
-  "pages": ["basics", "tags", "data-structure", "accessing-data", "best-practices"]
-}

apps/docs/content/docs/copilot/meta.json

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

apps/docs/content/docs/de/blocks/agent.mdx

@@ -0,0 +1,154 @@
+---
+title: Agent
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Image } from '@/components/ui/image'
+
+Der Agent-Block verbindet deinen Workflow mit Large Language Models (LLMs). Er verarbeitet natürlichsprachliche Eingaben, ruft externe Tools auf und generiert strukturierte oder unstrukturierte Ausgaben.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/agent.png"
+    alt="Agent-Block-Konfiguration"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div> 
+
+## Konfigurationsoptionen
+
+### System-Prompt
+
+Der System-Prompt legt die Betriebsparameter und Verhaltenseinschränkungen des Agenten fest. Diese Konfiguration definiert die Rolle des Agenten, die Antwortmethodik und die Verarbeitungsgrenzen für alle eingehenden Anfragen.
+
+```markdown
+You are a helpful assistant that specializes in financial analysis.
+Always provide clear explanations and cite sources when possible.
+When responding to questions about investments, include risk disclaimers.
+```
+
+### Benutzer-Prompt
+
+Der Benutzer-Prompt stellt die primären Eingabedaten für die Inferenzverarbeitung dar. Dieser Parameter akzeptiert natürlichsprachlichen Text oder strukturierte Daten, die der Agent analysieren und auf die er reagieren wird. Zu den Eingabequellen gehören:
+
+- **Statische Konfiguration**: Direkte Texteingabe, die in der Block-Konfiguration angegeben ist
+- **Dynamische Eingabe**: Daten, die von vorgelagerten Blöcken über Verbindungsschnittstellen übergeben werden
+- **Laufzeitgenerierung**: Programmatisch generierte Inhalte während der Workflow-Ausführung
+
+### Modellauswahl
+
+Der Agent-Block unterstützt mehrere LLM-Anbieter über eine einheitliche Inferenzschnittstelle. Verfügbare Modelle umfassen:
+
+- **OpenAI**: GPT-5.1, GPT-5, GPT-4o, o1, o3, o4-mini, gpt-4.1
+- **Anthropic**: Claude 4.5 Sonnet, Claude Opus 4.1
+- **Google**: Gemini 2.5 Pro, Gemini 2.0 Flash
+- **Andere Anbieter**: Groq, Cerebras, xAI, Azure OpenAI, OpenRouter
+- **Lokale Modelle**: Ollama-kompatible Modelle
+
+### Temperatur
+
+Steuert die Zufälligkeit und Kreativität der Antworten:
+
+- **Niedrig (0-0,3)**: Deterministisch und fokussiert. Am besten für faktische Aufgaben und Genauigkeit.
+- **Mittel (0,3-0,7)**: Ausgewogene Kreativität und Fokus. Gut für allgemeine Verwendung.
+- **Hoch (0,7-2,0)**: Kreativ und abwechslungsreich. Ideal für Brainstorming und Content-Generierung.
+
+### API-Schlüssel
+
+Ihr API-Schlüssel für den ausgewählten LLM-Anbieter. Dieser wird sicher gespeichert und für die Authentifizierung verwendet.
+
+### Tools
+
+Erweitern Sie die Fähigkeiten des Agenten mit externen Integrationen. Wählen Sie aus über 60 vorgefertigten Tools oder definieren Sie benutzerdefinierte Funktionen.
+
+**Verfügbare Kategorien:**
+- **Kommunikation**: Gmail, Slack, Telegram, WhatsApp, Microsoft Teams
+- **Datenquellen**: Notion, Google Sheets, Airtable, Supabase, Pinecone
+- **Webdienste**: Firecrawl, Google Search, Exa AI, Browser-Automatisierung
+- **Entwicklung**: GitHub, Jira, Linear
+- **KI-Dienste**: OpenAI, Perplexity, Hugging Face, ElevenLabs
+
+**Ausführungsmodi:**
+- **Auto**: Modell entscheidet kontextbasiert, wann Tools verwendet werden
+- **Erforderlich**: Tool muss bei jeder Anfrage aufgerufen werden
+- **Keine**: Tool verfügbar, aber dem Modell nicht vorgeschlagen
+
+### Antwortformat
+
+Der Parameter für das Antwortformat erzwingt die Generierung strukturierter Ausgaben durch JSON-Schema-Validierung. Dies gewährleistet konsistente, maschinenlesbare Antworten, die vordefinierten Datenstrukturen entsprechen:
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "sentiment": {
+      "type": "string",
+      "enum": ["positive", "neutral", "negative"]
+    },
+    "summary": {
+      "type": "string",
+      "description": "Brief summary of the content"
+    }
+  },
+  "required": ["sentiment", "summary"]
+}
+```
+
+Diese Konfiguration beschränkt die Ausgabe des Modells auf die Einhaltung des angegebenen Schemas, verhindert Freitextantworten und stellt die Generierung strukturierter Daten sicher.
+
+### Zugriff auf Ergebnisse
+
+Nach Abschluss eines Agenten können Sie auf seine Ausgaben zugreifen:
+
+- **response**: Der Antworttext oder die strukturierten Daten des Agenten
+- **usage**: Token-Nutzungsstatistiken (Prompt, Completion, Gesamt)
+- **toolExecutions**: Details zu allen Tools, die der Agent während der Ausführung verwendet hat
+- **estimatedCost**: Geschätzte Kosten des API-Aufrufs (falls verfügbar)
+
+## Erweiterte Funktionen
+
+### Memory + Agent: Gesprächsverlauf
+
+Verwenden Sie einen memory Block mit einer konsistenten memoryId (zum Beispiel, conversationHistory), um Nachrichten zwischen Durchläufen zu speichern und diesen Verlauf in den Prompt des Agenten einzubeziehen.
+
+- Fügen Sie die Nachricht des Benutzers vor dem Agenten hinzu
+- Lesen Sie den Gesprächsverlauf für den Kontext
+- Hängen Sie die Antwort des Agenten nach dessen Ausführung an
+
+Siehe den [`Memory`](/tools/memory) Blockverweis für Details.
+
+## Ausgaben
+
+- **`<agent.content>`**: Antworttext des Agenten
+- **`<agent.tokens>`**: Token-Nutzungsstatistiken
+- **`<agent.tool_calls>`**: Details zur Tool-Ausführung
+- **`<agent.cost>`**: Geschätzte Kosten des API-Aufrufs
+
+## Beispielanwendungsfälle
+
+**Automatisierung des Kundenservice** - Bearbeitung von Anfragen mit Datenbank- und Tool-Zugriff
+
+```
+API (Ticket) → Agent (Postgres, KB, Linear) → Gmail (Reply) → Memory (Save)
+```
+
+**Multi-Modell-Inhaltsanalyse** - Analyse von Inhalten mit verschiedenen KI-Modellen
+
+```
+Function (Process) → Agent (GPT-4o Technical) → Agent (Claude Sentiment) → Function (Report)
+```
+
+**Tool-gestützter Rechercheassistent** - Recherche mit Websuche und Dokumentenzugriff
+
+```
+Input → Agent (Google Search, Notion) → Function (Compile Report)
+```
+
+## Bewährte Praktiken
+
+- **Sei spezifisch in System-Prompts**: Definiere die Rolle, den Ton und die Einschränkungen des Agenten klar. Je spezifischer deine Anweisungen sind, desto besser kann der Agent seinen vorgesehenen Zweck erfüllen.
+- **Wähle die richtige Temperatureinstellung**: Verwende niedrigere Temperatureinstellungen (0-0,3), wenn Genauigkeit wichtig ist, oder erhöhe die Temperatur (0,7-2,0) für kreativere oder vielfältigere Antworten
+- **Nutze Tools effektiv**: Integriere Tools, die den Zweck des Agenten ergänzen und seine Fähigkeiten erweitern. Sei selektiv bei der Auswahl der Tools, um den Agenten nicht zu überfordern. Für Aufgaben mit wenig Überschneidung verwende einen anderen Agent-Block für die besten Ergebnisse.

apps/docs/content/docs/de/blocks/api.mdx

@@ -0,0 +1,145 @@
+---
+title: API
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Image } from '@/components/ui/image'
+
+Der API-Block verbindet Ihren Workflow mit externen Diensten durch HTTP-Anfragen. Unterstützt GET, POST, PUT, DELETE und PATCH Methoden für die Interaktion mit REST-APIs.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/api.png"
+    alt="API-Block"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+## Konfigurationsoptionen
+
+### URL
+
+Die Endpunkt-URL für die API-Anfrage. Diese kann sein:
+
+- Eine statische URL, die direkt im Block eingegeben wird
+- Eine dynamische URL, die mit der Ausgabe eines anderen Blocks verbunden ist
+- Eine URL mit Pfadparametern
+
+### Methode
+
+Wählen Sie die HTTP-Methode für Ihre Anfrage:
+
+- **GET**: Daten vom Server abrufen
+- **POST**: Daten an den Server senden, um eine Ressource zu erstellen
+- **PUT**: Eine bestehende Ressource auf dem Server aktualisieren
+- **DELETE**: Eine Ressource vom Server entfernen
+- **PATCH**: Eine bestehende Ressource teilweise aktualisieren
+
+### Abfrageparameter
+
+Definieren Sie Schlüssel-Wert-Paare, die als Abfrageparameter an die URL angehängt werden. Zum Beispiel:
+
+```
+Key: apiKey
+Value: your_api_key_here
+
+Key: limit
+Value: 10
+```
+
+Diese würden der URL als `?apiKey=your_api_key_here&limit=10` hinzugefügt.
+
+### Header
+
+Konfigurieren Sie HTTP-Header für Ihre Anfrage. Häufige Header sind:
+
+```
+Key: Content-Type
+Value: application/json
+
+Key: Authorization
+Value: Bearer your_token_here
+```
+
+### Anfragekörper
+
+Für Methoden, die einen Anfragekörper unterstützen (POST, PUT, PATCH), können Sie die zu sendenden Daten definieren. Der Körper kann sein:
+
+- JSON-Daten, die direkt im Block eingegeben werden
+- Daten, die mit der Ausgabe eines anderen Blocks verbunden sind
+- Dynamisch während der Workflow-Ausführung generiert
+
+### Zugriff auf Ergebnisse
+
+Nach Abschluss einer API-Anfrage können Sie auf folgende Ausgaben zugreifen:
+
+- **`<api.data>`**: Die Antwortdaten vom API
+- **`<api.status>`**: HTTP-Statuscode (200, 404, 500, usw.)
+- **`<api.headers>`**: Antwort-Header vom Server
+- **`<api.error>`**: Fehlerdetails, falls die Anfrage fehlgeschlagen ist
+
+## Erweiterte Funktionen
+
+### Dynamische URL-Konstruktion
+
+Erstellen Sie URLs dynamisch mit Variablen aus vorherigen Blöcken:
+
+```javascript
+// In a Function block before the API
+const userId = <start.userId>;
+const apiUrl = `https://api.example.com/users/${userId}/profile`;
+```
+
+### Anfrage-Wiederholungen
+
+Der API-Block verarbeitet automatisch:
+- Netzwerk-Timeouts mit exponentiellem Backoff
+- Antworten bei Ratenbegrenzung (429-Statuscodes)
+- Serverfehler (5xx-Statuscodes) mit Wiederholungslogik
+- Verbindungsfehler mit Wiederverbindungsversuchen
+
+### Antwortvalidierung
+
+Validieren Sie API-Antworten vor der Verarbeitung:
+
+```javascript
+// In a Function block after the API
+if (<api.status> === 200) {
+  const data = <api.data>;
+  // Process successful response
+} else {
+  // Handle error response
+  console.error(`API Error: ${<api.status>}`);
+}
+```
+
+## Ausgaben
+
+- **`<api.data>`**: Antwortdaten vom API
+- **`<api.status>`**: HTTP-Statuscode
+- **`<api.headers>`**: Antwort-Header
+- **`<api.error>`**: Fehlerdetails bei fehlgeschlagener Anfrage
+
+## Anwendungsbeispiele
+
+**Benutzerprofildaten abrufen** - Benutzerinformationen von externem Dienst abrufen
+
+```
+Function (Build ID) → API (GET /users/{id}) → Function (Format) → Response
+```
+
+**Zahlungsabwicklung** - Zahlung über die Stripe-API verarbeiten
+
+```
+Function (Validate) → API (Stripe) → Condition (Success) → Supabase (Update)
+```
+
+## Bewährte Praktiken
+
+- **Umgebungsvariablen für sensible Daten verwenden**: Keine API-Schlüssel oder Anmeldedaten im Code festlegen
+- **Fehler elegant behandeln**: Fehlerbehandlungslogik für fehlgeschlagene Anfragen einbinden
+- **Antworten validieren**: Statuscode und Antwortformate vor der Datenverarbeitung prüfen
+- **Ratenbegrenzungen respektieren**: Achten Sie auf API-Ratenbegrenzungen und implementieren Sie angemessene Drosselung

apps/docs/content/docs/de/blocks/condition.mdx

@@ -0,0 +1,149 @@
+---
+title: Bedingung
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Image } from '@/components/ui/image'
+
+Der Bedingungsblock verzweigt die Workflow-Ausführung basierend auf booleschen Ausdrücken. Bewerten Sie Bedingungen anhand vorheriger Block-Ausgaben und leiten Sie zu verschiedenen Pfaden weiter, ohne dass ein LLM erforderlich ist.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/condition.png"
+    alt="Bedingungsblock"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+## Konfigurationsoptionen
+
+### Bedingungen
+
+Definieren Sie eine oder mehrere Bedingungen, die ausgewertet werden. Jede Bedingung umfasst:
+
+- **Ausdruck**: Ein JavaScript/TypeScript-Ausdruck, der zu wahr oder falsch ausgewertet wird
+- **Pfad**: Der Zielblock, zu dem weitergeleitet werden soll, wenn die Bedingung wahr ist
+- **Beschreibung**: Optionale Erklärung, was die Bedingung prüft
+
+Sie können mehrere Bedingungen erstellen, die der Reihe nach ausgewertet werden, wobei die erste übereinstimmende Bedingung den Ausführungspfad bestimmt.
+
+### Format für Bedingungsausdrücke
+
+Bedingungen verwenden JavaScript-Syntax und können auf Eingabewerte aus vorherigen Blöcken verweisen.
+
+<Tabs items={['Schwellenwert', 'Textanalyse', 'Mehrere Bedingungen']}>
+  <Tab>
+
+    ```javascript
+    // Check if a score is above a threshold
+    <agent.score> > 75
+    ```
+
+  </Tab>
+  <Tab>
+
+    ```javascript
+    // Check if a text contains specific keywords
+    <agent.text>.includes('urgent') || <agent.text>.includes('emergency')
+    ```
+
+  </Tab>
+  <Tab>
+
+    ```javascript
+    // Check multiple conditions
+    <agent.age> >= 18 && <agent.country> === 'US'
+    ```
+
+  </Tab>
+</Tabs>
+
+### Zugriff auf Ergebnisse
+
+Nach der Auswertung einer Bedingung können Sie auf folgende Ausgaben zugreifen:
+
+- **condition.result**: Boolesches Ergebnis der Bedingungsauswertung
+- **condition.matched_condition**: ID der übereinstimmenden Bedingung
+- **condition.content**: Beschreibung des Auswertungsergebnisses
+- **condition.path**: Details zum gewählten Routing-Ziel
+
+## Erweiterte Funktionen
+
+### Komplexe Ausdrücke
+
+Verwenden Sie JavaScript-Operatoren und -Funktionen in Bedingungen:
+
+```javascript
+// String operations
+<user.email>.endsWith('@company.com')
+
+// Array operations
+<api.tags>.includes('urgent')
+
+// Mathematical operations
+<agent.confidence> * 100 > 85
+
+// Date comparisons
+new Date(<api.created_at>) > new Date('2024-01-01')
+```
+
+### Auswertung mehrerer Bedingungen
+
+Bedingungen werden der Reihe nach ausgewertet, bis eine übereinstimmt:
+
+```javascript
+// Condition 1: Check for high priority
+<ticket.priority> === 'high'
+
+// Condition 2: Check for urgent keywords
+<ticket.subject>.toLowerCase().includes('urgent')
+
+// Condition 3: Default fallback
+true
+```
+
+### Fehlerbehandlung
+
+Bedingungen behandeln automatisch:
+- Undefinierte oder Null-Werte mit sicherer Auswertung
+- Typabweichungen mit geeigneten Fallbacks
+- Ungültige Ausdrücke mit Fehlerprotokollierung
+- Fehlende Variablen mit Standardwerten
+
+## Ausgaben
+
+- **`<condition.result>`**: Boolesches Ergebnis der Auswertung
+- **`<condition.matched_condition>`**: ID der übereinstimmenden Bedingung
+- **`<condition.content>`**: Beschreibung des Auswertungsergebnisses
+- **`<condition.path>`**: Details zum gewählten Routing-Ziel
+
+## Beispielanwendungsfälle
+
+**Kundenservice-Routing** - Tickets basierend auf Priorität weiterleiten
+
+```
+API (Ticket) → Condition (priority === 'high') → Agent (Escalation) or Agent (Standard)
+```
+
+**Inhaltsmoderation** - Inhalte basierend auf Analysen filtern
+
+```
+Agent (Analyze) → Condition (toxicity > 0.7) → Moderation or Publish
+```
+
+**Benutzer-Onboarding-Ablauf** - Onboarding basierend auf Benutzertyp personalisieren
+
+```
+Function (Process) → Condition (account_type === 'enterprise') → Advanced or Simple
+```
+
+## Bewährte Praktiken
+
+- **Bedingungen korrekt anordnen**: Platzieren Sie spezifischere Bedingungen vor allgemeinen, um sicherzustellen, dass spezifische Logik Vorrang vor Fallbacks hat
+- **Eine Standardbedingung einfügen**: Fügen Sie eine Auffangbedingung (`true`) als letzte Bedingung hinzu, um nicht übereinstimmende Fälle zu behandeln und zu verhindern, dass die Workflow-Ausführung stecken bleibt
+- **Ausdrücke einfach halten**: Verwenden Sie klare, unkomplizierte boolesche Ausdrücke für bessere Lesbarkeit und einfachere Fehlersuche
+- **Dokumentieren Sie Ihre Bedingungen**: Fügen Sie Beschreibungen hinzu, um den Zweck jeder Bedingung für bessere Teamzusammenarbeit und Wartung zu erklären
+- **Grenzfälle testen**: Überprüfen Sie, ob Bedingungen Grenzwerte korrekt behandeln, indem Sie mit Werten an den Grenzen Ihrer Bedingungsbereiche testen

apps/docs/content/docs/de/blocks/evaluator.mdx

@@ -0,0 +1,96 @@
+---
+title: Evaluator
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Image } from '@/components/ui/image'
+
+Der Evaluator-Block nutzt KI, um die Inhaltsqualität anhand benutzerdefinierter Metriken zu bewerten. Perfekt für Qualitätskontrolle, A/B-Tests und um sicherzustellen, dass KI-Ausgaben bestimmte Standards erfüllen.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/evaluator.png"
+    alt="Evaluator-Block-Konfiguration"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+## Konfigurationsoptionen
+
+### Bewertungsmetriken
+
+Definieren Sie benutzerdefinierte Metriken, anhand derer Inhalte bewertet werden. Jede Metrik umfasst:
+
+- **Name**: Eine kurze Bezeichnung für die Metrik
+- **Beschreibung**: Eine detaillierte Erklärung, was die Metrik misst
+- **Bereich**: Der numerische Bereich für die Bewertung (z.B. 1-5, 0-10)
+
+Beispielmetriken:
+
+```
+Accuracy (1-5): How factually accurate is the content?
+Clarity (1-5): How clear and understandable is the content?
+Relevance (1-5): How relevant is the content to the original query?
+```
+
+### Inhalt
+
+Der zu bewertende Inhalt. Dies kann sein:
+
+- Direkt in der Blockkonfiguration bereitgestellt
+- Verbunden mit der Ausgabe eines anderen Blocks (typischerweise ein Agent-Block)
+- Dynamisch während der Workflow-Ausführung generiert
+
+### Modellauswahl
+
+Wählen Sie ein KI-Modell für die Durchführung der Bewertung:
+
+- **OpenAI**: GPT-4o, o1, o3, o4-mini, gpt-4.1
+- **Anthropic**: Claude 3.7 Sonnet
+- **Google**: Gemini 2.5 Pro, Gemini 2.0 Flash
+- **Andere Anbieter**: Groq, Cerebras, xAI, DeepSeek
+- **Lokale Modelle**: Ollama-kompatible Modelle
+
+Verwenden Sie Modelle mit starken Argumentationsfähigkeiten wie GPT-4o oder Claude 3.7 Sonnet für beste Ergebnisse.
+
+### API-Schlüssel
+
+Ihr API-Schlüssel für den ausgewählten LLM-Anbieter. Dieser wird sicher gespeichert und für die Authentifizierung verwendet.
+
+## Beispielanwendungsfälle
+
+**Bewertung der Inhaltsqualität** - Inhalte vor der Veröffentlichung bewerten
+
+```
+Agent (Generate) → Evaluator (Score) → Condition (Check threshold) → Publish or Revise
+```
+
+**A/B-Tests von Inhalten** - Vergleich mehrerer KI-generierter Antworten
+
+```
+Parallel (Variations) → Evaluator (Score Each) → Function (Select Best) → Response
+```
+
+**Qualitätskontrolle im Kundenservice** - Sicherstellen, dass Antworten Qualitätsstandards erfüllen
+
+```
+Agent (Support Response) → Evaluator (Score) → Function (Log) → Condition (Review if Low)
+```
+
+## Ausgaben
+
+- **`<evaluator.content>`**: Zusammenfassung der Bewertung mit Punktzahlen
+- **`<evaluator.model>`**: Für die Bewertung verwendetes Modell
+- **`<evaluator.tokens>`**: Statistik zur Token-Nutzung
+- **`<evaluator.cost>`**: Geschätzte Bewertungskosten
+
+## Best Practices
+
+- **Verwenden Sie spezifische Metrikbeschreibungen**: Definieren Sie klar, was jede Metrik misst, um genauere Bewertungen zu erhalten
+- **Wählen Sie geeignete Bereiche**: Wählen Sie Bewertungsbereiche, die ausreichend Granularität bieten, ohne zu komplex zu sein
+- **Verbinden Sie mit Agent-Blöcken**: Verwenden Sie Evaluator-Blöcke, um die Ausgaben von Agent-Blöcken zu bewerten und Feedback-Schleifen zu erstellen
+- **Verwenden Sie konsistente Metriken**: Für vergleichende Analysen sollten Sie konsistente Metriken über ähnliche Bewertungen hinweg beibehalten
+- **Kombinieren Sie mehrere Metriken**: Verwenden Sie verschiedene Metriken, um eine umfassende Bewertung zu erhalten

apps/docs/content/docs/de/blocks/function.mdx

@@ -0,0 +1,76 @@
+---
+title: Funktion
+---
+
+import { Image } from '@/components/ui/image'
+
+Der Funktionsblock führt benutzerdefinierten JavaScript- oder TypeScript-Code in Ihren Workflows aus. Transformieren Sie Daten, führen Sie Berechnungen durch oder implementieren Sie benutzerdefinierte Logik.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/function.png"
+    alt="Funktionsblock mit Code-Editor"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+## Ausgaben
+
+- **`<function.result>`**: Der von Ihrer Funktion zurückgegebene Wert
+- **`<function.stdout>`**: Console.log()-Ausgabe Ihres Codes
+
+## Beispielanwendungsfälle
+
+**Datenverarbeitungspipeline** - Transformation von API-Antworten in strukturierte Daten
+
+```
+API (Fetch) → Function (Process & Validate) → Function (Calculate Metrics) → Response
+```
+
+**Implementierung von Geschäftslogik** - Berechnung von Treuepunkten und Stufen
+
+```
+Agent (Get History) → Function (Calculate Score) → Function (Determine Tier) → Condition (Route)
+```
+
+**Datenvalidierung und -bereinigung** - Validierung und Bereinigung von Benutzereingaben
+
+```
+Input → Function (Validate & Sanitize) → API (Save to Database)
+```
+
+### Beispiel: Treuepunkte-Rechner
+
+```javascript title="loyalty-calculator.js"
+// Process customer data and calculate loyalty score
+const { purchaseHistory, accountAge, supportTickets } = <agent>;
+
+// Calculate metrics
+const totalSpent = purchaseHistory.reduce((sum, purchase) => sum + purchase.amount, 0);
+const purchaseFrequency = purchaseHistory.length / (accountAge / 365);
+const ticketRatio = supportTickets.resolved / supportTickets.total;
+
+// Calculate loyalty score (0-100)
+const spendScore = Math.min(totalSpent / 1000 * 30, 30);
+const frequencyScore = Math.min(purchaseFrequency * 20, 40);
+const supportScore = ticketRatio * 30;
+
+const loyaltyScore = Math.round(spendScore + frequencyScore + supportScore);
+
+return {
+  customer: <agent.name>,
+  loyaltyScore,
+  loyaltyTier: loyaltyScore >= 80 ? "Platinum" : loyaltyScore >= 60 ? "Gold" : "Silver",
+  metrics: { spendScore, frequencyScore, supportScore }
+};
+```
+
+## Best Practices
+
+- **Funktionen fokussiert halten**: Schreiben Sie Funktionen, die eine Sache gut erledigen, um die Wartbarkeit und Fehlersuche zu verbessern
+- **Fehler elegant behandeln**: Verwenden Sie try/catch-Blöcke, um potenzielle Fehler zu behandeln und aussagekräftige Fehlermeldungen bereitzustellen
+- **Grenzfälle testen**: Stellen Sie sicher, dass Ihr Code ungewöhnliche Eingaben, Null-Werte und Grenzbedingungen korrekt behandelt
+- **Für Leistung optimieren**: Achten Sie bei großen Datensätzen auf die Berechnungskomplexität und den Speicherverbrauch
+- **Console.log() zum Debuggen verwenden**: Nutzen Sie die Stdout-Ausgabe zum Debuggen und Überwachen der Funktionsausführung

apps/docs/content/docs/de/blocks/guardrails.mdx

@@ -0,0 +1,207 @@
+---
+title: Guardrails
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Image } from '@/components/ui/image'
+import { Video } from '@/components/ui/video'
+
+Der Guardrails-Block validiert und schützt Ihre KI-Workflows, indem er Inhalte anhand mehrerer Validierungstypen überprüft. Stellen Sie die Datenqualität sicher, verhindern Sie Halluzinationen, erkennen Sie personenbezogene Daten und erzwingen Sie Formatanforderungen, bevor Inhalte durch Ihren Workflow fließen.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/guardrails.png"
+    alt="Guardrails-Block"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+## Validierungstypen
+
+### JSON-Validierung
+
+Überprüft, ob der Inhalt korrekt formatiertes JSON ist. Perfekt, um sicherzustellen, dass strukturierte LLM-Ausgaben sicher geparst werden können.
+
+**Anwendungsfälle:**
+- Validierung von JSON-Antworten aus Agent-Blöcken vor dem Parsen
+- Sicherstellen, dass API-Payloads korrekt formatiert sind
+- Überprüfung der Integrität strukturierter Daten
+
+**Ausgabe:**
+- `passed`: `true` bei gültigem JSON, sonst `false`
+- `error`: Fehlermeldung bei fehlgeschlagener Validierung (z.B. "Ungültiges JSON: Unerwartetes Token...")
+
+### Regex-Validierung
+
+Prüft, ob der Inhalt einem bestimmten regulären Ausdrucksmuster entspricht.
+
+**Anwendungsfälle:**
+- Validierung von E-Mail-Adressen
+- Überprüfung von Telefonnummernformaten
+- Verifizierung von URLs oder benutzerdefinierten Kennungen
+- Durchsetzung spezifischer Textmuster
+
+**Konfiguration:**
+- **Regex-Muster**: Der reguläre Ausdruck, gegen den geprüft wird (z.B. `^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$` für E-Mails)
+
+**Ausgabe:**
+- `passed`: `true` wenn der Inhalt dem Muster entspricht, sonst `false`
+- `error`: Fehlermeldung bei fehlgeschlagener Validierung
+
+### Halluzinationserkennung
+
+Verwendet Retrieval-Augmented Generation (RAG) mit LLM-Bewertung, um zu erkennen, wann KI-generierte Inhalte im Widerspruch zu Ihrer Wissensdatenbank stehen oder nicht darin begründet sind.
+
+**Funktionsweise:**
+1. Abfrage Ihrer Wissensdatenbank nach relevantem Kontext
+2. Übermittlung sowohl der KI-Ausgabe als auch des abgerufenen Kontexts an ein LLM
+3. LLM weist einen Konfidenzwert zu (Skala 0-10)
+   - **0** = Vollständige Halluzination (völlig unbegründet)
+   - **10** = Vollständig begründet (komplett durch die Wissensdatenbank gestützt)
+4. Validierung besteht, wenn der Wert ≥ Schwellenwert ist (Standard: 3)
+
+**Konfiguration:**
+- **Wissensdatenbank**: Auswahl aus Ihren vorhandenen Wissensdatenbanken
+- **Modell**: Wahl des LLM für die Bewertung (erfordert starkes Reasoning - GPT-4o, Claude 3.7 Sonnet empfohlen)
+- **API-Schlüssel**: Authentifizierung für den ausgewählten LLM-Anbieter (automatisch ausgeblendet für gehostete/Ollama-Modelle)
+- **Konfidenz-Schwellenwert**: Mindestwert zum Bestehen (0-10, Standard: 3)
+- **Top K** (Erweitert): Anzahl der abzurufenden Wissensdatenbank-Chunks (Standard: 10)
+
+**Ausgabe:**
+- `passed`: `true` wenn Konfidenzwert ≥ Schwellenwert
+- `score`: Konfidenzwert (0-10)
+- `reasoning`: Erklärung des LLM für den Wert
+- `error`: Fehlermeldung bei fehlgeschlagener Validierung
+
+**Anwendungsfälle:**
+- Validierung von Agent-Antworten anhand der Dokumentation
+- Sicherstellung der faktischen Richtigkeit von Kundendienstantworten
+- Überprüfung, ob generierte Inhalte mit dem Quellmaterial übereinstimmen
+- Qualitätskontrolle für RAG-Anwendungen
+
+### PII-Erkennung
+
+Erkennt personenbezogene Daten mithilfe von Microsoft Presidio. Unterstützt über 40 Entitätstypen in mehreren Ländern und Sprachen.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/guardrails-2.png"
+    alt="PII-Erkennungskonfiguration"
+    width={700}
+    height={450}
+    className="my-6"
+  />
+</div>
+
+**Funktionsweise:**
+1. Übergabe des zu validierenden Inhalts (z.B. `<agent1.content>`)
+2. Auswahl der zu erkennenden PII-Typen über den Modal-Selektor
+3. Auswahl des Erkennungsmodus (Erkennen oder Maskieren)
+4. Inhalt wird auf übereinstimmende PII-Entitäten gescannt
+5. Gibt Erkennungsergebnisse und optional maskierten Text zurück
+
+<div className="mx-auto w-3/5 overflow-hidden rounded-lg">
+  <Video src="guardrails.mp4" width={500} height={350} />
+</div>
+
+**Konfiguration:**
+- **Zu erkennende PII-Typen**: Auswahl aus gruppierten Kategorien über Modal-Selektor
+  - **Allgemein**: Personenname, E-Mail, Telefon, Kreditkarte, IP-Adresse usw.
+  - **USA**: Sozialversicherungsnummer, Führerschein, Reisepass usw.
+  - **UK**: NHS-Nummer, Sozialversicherungsnummer
+  - **Spanien**: NIF, NIE, CIF
+  - **Italien**: Steuernummer, Führerschein, Umsatzsteuer-ID
+  - **Polen**: PESEL, NIP, REGON
+  - **Singapur**: NRIC/FIN, UEN
+  - **Australien**: ABN, ACN, TFN, Medicare
+  - **Indien**: Aadhaar, PAN, Reisepass, Wählernummer
+- **Modus**: 
+  - **Erkennen**: Nur PII identifizieren (Standard)
+  - **Maskieren**: Erkannte PII durch maskierte Werte ersetzen
+- **Sprache**: Erkennungssprache (Standard: Englisch)
+
+**Ausgabe:**
+- `passed`: `false` wenn ausgewählte PII-Typen erkannt werden
+- `detectedEntities`: Array erkannter PII mit Typ, Position und Konfidenz
+- `maskedText`: Inhalt mit maskierter PII (nur wenn Modus = "Mask")
+- `error`: Fehlermeldung bei fehlgeschlagener Validierung
+
+**Anwendungsfälle:**
+- Blockieren von Inhalten mit sensiblen persönlichen Informationen
+- Maskieren von personenbezogenen Daten vor der Protokollierung oder Speicherung
+- Einhaltung der DSGVO, HIPAA und anderer Datenschutzbestimmungen
+- Bereinigung von Benutzereingaben vor der Verarbeitung
+
+## Konfiguration
+
+### Zu validierende Inhalte
+
+Der zu validierende Eingabeinhalt. Dieser stammt typischerweise aus:
+- Ausgaben von Agent-Blöcken: `<agent.content>`
+- Ergebnisse von Funktionsblöcken: `<function.output>`
+- API-Antworten: `<api.output>`
+- Jede andere Blockausgabe
+
+### Validierungstyp
+
+Wählen Sie aus vier Validierungstypen:
+- **Gültiges JSON**: Prüfen, ob der Inhalt korrekt formatiertes JSON ist
+- **Regex-Übereinstimmung**: Überprüfen, ob der Inhalt einem Regex-Muster entspricht
+- **Halluzinationsprüfung**: Validierung gegen Wissensdatenbank mit LLM-Bewertung
+- **PII-Erkennung**: Erkennung und optional Maskierung personenbezogener Daten
+
+## Ausgaben
+
+Alle Validierungstypen geben zurück:
+
+- **`<guardrails.passed>`**: Boolescher Wert, der angibt, ob die Validierung bestanden wurde
+- **`<guardrails.validationType>`**: Der durchgeführte Validierungstyp
+- **`<guardrails.input>`**: Die ursprüngliche Eingabe, die validiert wurde
+- **`<guardrails.error>`**: Fehlermeldung, wenn die Validierung fehlgeschlagen ist (optional)
+
+Zusätzliche Ausgaben nach Typ:
+
+**Halluzinationsprüfung:**
+- **`<guardrails.score>`**: Konfidenzwert (0-10)
+- **`<guardrails.reasoning>`**: Erklärung des LLM
+
+**PII-Erkennung:**
+- **`<guardrails.detectedEntities>`**: Array erkannter PII-Entitäten
+- **`<guardrails.maskedText>`**: Inhalt mit maskierten PII (wenn Modus = "Mask")
+
+## Beispielanwendungsfälle
+
+**JSON vor dem Parsen validieren** - Stellen Sie sicher, dass die Agent-Ausgabe gültiges JSON ist
+
+```
+Agent (Generate) → Guardrails (Validate) → Condition (Check passed) → Function (Parse)
+```
+
+**Halluzinationen verhindern** - Validieren Sie Kundendienstantworten anhand der Wissensdatenbank
+
+```
+Agent (Response) → Guardrails (Check KB) → Condition (Score ≥ 3) → Send or Flag
+```
+
+**PII in Benutzereingaben blockieren** - Bereinigen Sie von Benutzern übermittelte Inhalte
+
+```
+Input → Guardrails (Detect PII) → Condition (No PII) → Process or Reject
+```
+
+## Bewährte Praktiken
+
+- **Verkettung mit Bedingungsblöcken**: Verwenden Sie `<guardrails.passed>`, um die Workflow-Logik basierend auf Validierungsergebnissen zu verzweigen
+- **JSON-Validierung vor dem Parsen verwenden**: Validieren Sie immer die JSON-Struktur, bevor Sie versuchen, LLM-Ausgaben zu parsen
+- **Geeignete PII-Typen auswählen**: Wählen Sie nur die für Ihren Anwendungsfall relevanten PII-Entitätstypen für bessere Leistung
+- **Angemessene Konfidenzgrenzwerte festlegen**: Passen Sie für die Halluzinationserkennung den Grenzwert an Ihre Genauigkeitsanforderungen an (höher = strenger)
+- **Starke Modelle für die Halluzinationserkennung verwenden**: GPT-4o oder Claude 3.7 Sonnet bieten genauere Konfidenzwerte
+- **PII für die Protokollierung maskieren**: Verwenden Sie den Modus "Mask", wenn Sie Inhalte protokollieren oder speichern müssen, die PII enthalten könnten
+- **Regex-Muster testen**: Validieren Sie Ihre Regex-Muster gründlich, bevor Sie sie in der Produktion einsetzen
+- **Validierungsfehler überwachen**: Verfolgen Sie `<guardrails.error>`Nachrichten, um häufige Validierungsprobleme zu identifizieren
+
+<Callout type="info">
+  Die Validierung von Guardrails erfolgt synchron in Ihrem Workflow. Für die Erkennung von Halluzinationen sollten Sie schnellere Modelle (wie GPT-4o-mini) wählen, wenn die Latenz kritisch ist.
+</Callout>

apps/docs/content/docs/de/blocks/human-in-the-loop.mdx

@@ -0,0 +1,181 @@
+---
+title: Human in the Loop
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Image } from '@/components/ui/image'
+
+Der Human in the Loop Block pausiert die Workflow-Ausführung und wartet auf menschliches Eingreifen, bevor er fortfährt. Verwenden Sie ihn, um Genehmigungspunkte hinzuzufügen, Feedback zu sammeln oder zusätzliche Eingaben an kritischen Entscheidungspunkten einzuholen.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/hitl-1.png"
+    alt="Human in the Loop Block Konfiguration"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+Wenn die Ausführung diesen Block erreicht, pausiert der Workflow auf unbestimmte Zeit, bis ein Mensch über das Genehmigungsportal, die API oder den Webhook eine Eingabe macht.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/hitl-2.png"
+    alt="Human in the Loop Genehmigungsportal"
+    width={700}
+    height={500}
+    className="my-6"
+  />
+</div>
+
+## Konfigurationsoptionen
+
+### Pausierte Ausgabe
+
+Definiert, welche Daten dem Genehmigenden angezeigt werden. Dies ist der Kontext, der im Genehmigungsportal angezeigt wird, um eine fundierte Entscheidung zu ermöglichen.
+
+Verwenden Sie den visuellen Builder oder den JSON-Editor, um die Daten zu strukturieren. Referenzieren Sie Workflow-Variablen mit der `<blockName.output>` Syntax.
+
+```json
+{
+  "customerName": "<agent1.content.name>",
+  "proposedAction": "<router1.selectedPath>",
+  "confidenceScore": "<evaluator1.score>",
+  "generatedEmail": "<agent2.content>"
+}
+```
+
+### Benachrichtigung
+
+Konfiguriert, wie Genehmigende benachrichtigt werden, wenn eine Genehmigung erforderlich ist. Unterstützte Kanäle sind:
+
+- **Slack** - Nachrichten an Kanäle oder DMs
+- **Gmail** - E-Mail mit Genehmigungslink
+- **Microsoft Teams** - Team-Kanal-Benachrichtigungen
+- **SMS** - Textwarnungen über Twilio
+- **Webhooks** - Benutzerdefinierte Benachrichtigungssysteme
+
+Fügen Sie die Genehmigungs-URL (`<blockId.url>`) in Ihre Benachrichtigungsnachrichten ein, damit Genehmigende auf das Portal zugreifen können.
+
+### Fortsetzungseingabe
+
+Definiert die Felder, die Genehmigende bei der Antwort ausfüllen. Diese Daten werden nach der Fortsetzung des Workflows für nachfolgende Blöcke verfügbar.
+
+```json
+{
+  "approved": {
+    "type": "boolean",
+    "description": "Approve or reject this request"
+  },
+  "comments": {
+    "type": "string",
+    "description": "Optional feedback or explanation"
+  }
+}
+```
+
+Greifen Sie in nachfolgenden Blöcken mit `<blockId.resumeInput.fieldName>` auf Fortsetzungsdaten zu.
+
+## Genehmigungsmethoden
+
+<Tabs items={['Genehmigungsportal', 'API', 'Webhook']}>
+  <Tab>
+    ### Genehmigungsportal
+    
+    Jeder Block generiert eine eindeutige Portal-URL (`<blockId.url>`) mit einer visuellen Oberfläche, die alle pausierten Ausgabedaten und Formularfelder für die Fortsetzungseingabe anzeigt. Mobilgerätekompatibel und sicher.
+    
+    Teilen Sie diese URL in Benachrichtigungen, damit Genehmiger die Anfragen prüfen und beantworten können.
+  </Tab>
+  <Tab>
+    ### REST API
+    
+    Workflows programmatisch fortsetzen:
+    
+
+    ```bash
+    POST /api/workflows/{workflowId}/executions/{executionId}/resume/{blockId}
+    
+    {
+      "approved": true,
+      "comments": "Looks good to proceed"
+    }
+    ```
+
+    
+    Erstellen Sie benutzerdefinierte Genehmigungs-UIs oder integrieren Sie bestehende Systeme.
+  </Tab>
+  <Tab>
+    ### Webhook
+    
+    Fügen Sie ein Webhook-Tool im Benachrichtigungsbereich hinzu, um Genehmigungsanfragen an externe Systeme zu senden. Integration mit Ticketing-Systemen wie Jira oder ServiceNow.
+  </Tab>
+</Tabs>
+
+## Häufige Anwendungsfälle
+
+**Inhaltsgenehmigung** - Überprüfung von KI-generierten Inhalten vor der Veröffentlichung
+
+```
+Agent → Human in the Loop → API (Publish)
+```
+
+**Mehrstufige Genehmigungen** - Verkettung mehrerer Genehmigungsschritte für wichtige Entscheidungen
+
+```
+Agent → Human in the Loop (Manager) → Human in the Loop (Director) → Execute
+```
+
+**Datenvalidierung** - Überprüfung extrahierter Daten vor der Verarbeitung
+
+```
+Agent (Extract) → Human in the Loop (Validate) → Function (Process)
+```
+
+**Qualitätskontrolle** - Überprüfung von KI-Ausgaben vor dem Versand an Kunden
+
+```
+Agent (Generate) → Human in the Loop (QA) → Gmail (Send)
+```
+
+## Block-Ausgaben
+
+**`url`** - Eindeutige URL für das Genehmigungsportal  
+**`resumeInput.*`** - Alle in der Fortsetzungseingabe definierten Felder werden verfügbar, nachdem der Workflow fortgesetzt wird
+
+Zugriff über `<blockId.resumeInput.fieldName>`.
+
+## Beispiel
+
+**Pausierte Ausgabe:**
+
+```json
+{
+  "title": "<agent1.content.title>",
+  "body": "<agent1.content.body>",
+  "qualityScore": "<evaluator1.score>"
+}
+```
+
+**Fortsetzungseingabe:**
+
+```json
+{
+  "approved": { "type": "boolean" },
+  "feedback": { "type": "string" }
+}
+```
+
+**Nachgelagerte Verwendung:**
+
+```javascript
+// Condition block
+<approval1.resumeInput.approved> === true
+```
+
+## Verwandte Blöcke
+
+- **[Bedingung](/blocks/condition)** - Verzweigung basierend auf Genehmigungsentscheidungen
+- **[Variablen](/blocks/variables)** - Speicherung von Genehmigungsverlauf und Metadaten
+- **[Antwort](/blocks/response)** - Rückgabe von Workflow-Ergebnissen an API-Aufrufer

apps/docs/content/docs/de/blocks/index.mdx

@@ -0,0 +1,143 @@
+---
+title: Übersicht
+description: Die Bausteine deiner KI-Workflows
+---
+
+import { Card, Cards } from 'fumadocs-ui/components/card'
+import { Step, Steps } from 'fumadocs-ui/components/steps'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Video } from '@/components/ui/video'
+
+Blöcke sind die Bausteine, die du miteinander verbindest, um KI-Workflows zu erstellen. Betrachte sie als spezialisierte Module, die jeweils eine bestimmte Aufgabe übernehmen – vom Chatten mit KI-Modellen über API-Aufrufe bis hin zur Datenverarbeitung.
+
+<div className="w-full max-w-2xl mx-auto overflow-hidden rounded-lg">
+  <Video src="connections.mp4" width={700} height={450} />
+</div>
+
+## Grundlegende Blocktypen
+
+Sim bietet wesentliche Blocktypen, die die Kernfunktionen von KI-Workflows abdecken:
+
+### Verarbeitungsblöcke
+- **[Agent](/blocks/agent)** - Chatte mit KI-Modellen (OpenAI, Anthropic, Google, lokale Modelle)
+- **[Function](/blocks/function)** - Führe benutzerdefinierten JavaScript/TypeScript-Code aus
+- **[API](/blocks/api)** - Verbinde dich mit externen Diensten über HTTP-Anfragen
+
+### Logikblöcke
+- **[Condition](/blocks/condition)** - Verzweige Workflow-Pfade basierend auf booleschen Ausdrücken
+- **[Router](/blocks/router)** - Nutze KI, um Anfragen intelligent auf verschiedene Pfade zu leiten
+- **[Evaluator](/blocks/evaluator)** - Bewerte und beurteile die Inhaltsqualität mit KI
+
+### Ablaufsteuerungsblöcke
+- **[Variablen](/blocks/variables)** - Workflow-bezogene Variablen setzen und verwalten
+- **[Warten](/blocks/wait)** - Workflow-Ausführung für eine bestimmte Zeitverzögerung pausieren
+- **[Mensch in der Schleife](/blocks/human-in-the-loop)** - Pausieren für menschliche Genehmigung und Feedback vor dem Fortfahren
+
+### Ausgabeblöcke
+- **[Antwort](/blocks/response)** - Formatieren und Zurückgeben der endgültigen Ergebnisse aus Ihrem Workflow
+
+## Wie Blöcke funktionieren
+
+Jeder Block hat drei Hauptkomponenten:
+
+**Eingaben**: Daten, die in den Block von anderen Blöcken oder Benutzereingaben kommen
+**Konfiguration**: Einstellungen, die steuern, wie der Block sich verhält
+**Ausgaben**: Daten, die der Block für andere Blöcke zur Verwendung erzeugt
+
+<Steps>
+  <Step>
+    <strong>Eingabe empfangen</strong>: Block erhält Daten von verbundenen Blöcken oder Benutzereingaben
+  </Step>
+  <Step>
+    <strong>Verarbeiten</strong>: Block verarbeitet die Eingabe gemäß seiner Konfiguration
+  </Step>
+  <Step>
+    <strong>Ergebnisse ausgeben</strong>: Block erzeugt Ausgabedaten für die nächsten Blöcke im Workflow
+  </Step>
+</Steps>
+
+## Blöcke verbinden
+
+Sie erstellen Workflows, indem Sie Blöcke miteinander verbinden. Die Ausgabe eines Blocks wird zur Eingabe eines anderen:
+
+- **Ziehen zum Verbinden**: Ziehen Sie von einem Ausgabeport zu einem Eingabeport
+- **Mehrfachverbindungen**: Eine Ausgabe kann mit mehreren Eingaben verbunden werden
+- **Verzweigende Pfade**: Einige Blöcke können basierend auf Bedingungen zu verschiedenen Pfaden weiterleiten
+
+<div className="w-full max-w-2xl mx-auto overflow-hidden rounded-lg">
+  <Video src="connections.mp4" width={700} height={450} />
+</div>
+
+## Häufige Muster
+
+### Sequentielle Verarbeitung
+Verbinden Sie Blöcke in einer Kette, wobei jeder Block die Ausgabe des vorherigen verarbeitet:
+
+```
+User Input → Agent → Function → Response
+```
+
+### Bedingte Verzweigung
+Verwenden Sie Bedingung- oder Router-Blöcke, um verschiedene Pfade zu erstellen:
+
+```
+User Input → Router → Agent A (for questions)
+                   → Agent B (for commands)
+```
+
+### Qualitätskontrolle
+Verwenden Sie Evaluator-Blöcke, um Ausgaben zu bewerten und zu filtern:
+
+```
+Agent → Evaluator → Condition → Response (if good)
+                              → Agent (retry if bad)
+```
+
+## Block-Konfiguration
+
+Jeder Blocktyp hat spezifische Konfigurationsoptionen:
+
+**Alle Blöcke**:
+- Eingabe-/Ausgabeverbindungen
+- Fehlerbehandlungsverhalten
+- Einstellungen für Ausführungs-Timeout
+
+**KI-Blöcke** (Agent, Router, Evaluator):
+- Modellauswahl (OpenAI, Anthropic, Google, lokal)
+- API-Schlüssel und Authentifizierung
+- Temperatur und andere Modellparameter
+- Systemaufforderungen und Anweisungen
+
+**Logik-Blöcke** (Bedingung, Funktion):
+- Benutzerdefinierte Ausdrücke oder Code
+- Variablenreferenzen
+- Einstellungen für Ausführungsumgebung
+
+**Integrations-Blöcke** (API, Response):
+- Endpunktkonfiguration
+- Header und Authentifizierung
+- Anfrage-/Antwortformatierung
+
+<Cards>
+  <Card title="Agent-Block" href="/blocks/agent">
+    Verbindung zu KI-Modellen herstellen und intelligente Antworten erstellen
+  </Card>
+  <Card title="Funktionsblock" href="/blocks/function">
+    Benutzerdefinierten Code ausführen, um Daten zu verarbeiten und zu transformieren
+  </Card>
+  <Card title="API-Block" href="/blocks/api">
+    Integration mit externen Diensten und APIs
+  </Card>
+  <Card title="Bedingungsblock" href="/blocks/condition">
+    Verzweigende Logik basierend auf Datenbewertung erstellen
+  </Card>
+  <Card title="Mensch-in-der-Schleife-Block" href="/blocks/human-in-the-loop">
+    Pausieren für menschliche Genehmigung und Feedback vor dem Fortfahren
+  </Card>
+  <Card title="Variablenblock" href="/blocks/variables">
+    Workflow-bezogene Variablen setzen und verwalten
+  </Card>
+  <Card title="Warteblock" href="/blocks/wait">
+    Workflow-Ausführung für bestimmte Zeitverzögerungen pausieren
+  </Card>
+</Cards>

apps/docs/content/docs/de/blocks/loop.mdx

@@ -0,0 +1,257 @@
+---
+title: Loop
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Image } from '@/components/ui/image'
+
+Der Schleifenblock ist ein Container, der Blöcke wiederholt ausführt. Iteriere über Sammlungen, wiederhole Operationen eine festgelegte Anzahl von Malen oder fahre fort, solange eine Bedingung erfüllt ist.
+
+<Callout type="info">
+  Schleifenblöcke sind Container-Knoten, die andere Blöcke in sich enthalten. Die enthaltenen Blöcke werden mehrfach ausgeführt, basierend auf deiner Konfiguration.
+</Callout>
+
+## Konfigurationsoptionen
+
+### Schleifentyp
+
+Wähle zwischen vier Arten von Schleifen:
+
+<Tabs items={['For-Schleife', 'ForEach-Schleife', 'While-Schleife', 'Do-While-Schleife']}>
+  <Tab>
+    **For-Schleife (Iterationen)** - Eine numerische Schleife, die eine festgelegte Anzahl von Malen ausgeführt wird:
+    
+    <div className="flex justify-center">
+      <Image
+        src="/static/blocks/loop-1.png"
+        alt="For-Schleife mit Iterationen"
+        width={500}
+        height={400}
+        className="my-6"
+      />
+    </div>
+    
+    Verwende diese, wenn du eine Operation eine bestimmte Anzahl von Malen wiederholen musst.
+    
+
+    ```
+    Example: Run 5 times
+    - Iteration 1
+    - Iteration 2
+    - Iteration 3
+    - Iteration 4
+    - Iteration 5
+    ```
+
+  </Tab>
+  <Tab>
+    **ForEach-Schleife (Sammlung)** - Eine sammlungsbasierte Schleife, die über jedes Element in einem Array oder Objekt iteriert:
+    
+    <div className="flex justify-center">
+      <Image
+        src="/static/blocks/loop-2.png"
+        alt="ForEach-Schleife mit Sammlung"
+        width={500}
+        height={400}
+        className="my-6"
+      />
+    </div>
+    
+    Verwende diese, wenn du eine Sammlung von Elementen verarbeiten musst.
+    
+
+    ```
+    Example: Process ["apple", "banana", "orange"]
+    - Iteration 1: Process "apple"
+    - Iteration 2: Process "banana"
+    - Iteration 3: Process "orange"
+    ```
+
+  </Tab>
+  <Tab>
+    **While-Schleife (Bedingungsbasiert)** - Wird ausgeführt, solange eine Bedingung als wahr ausgewertet wird:
+    
+    <div className="flex justify-center">
+      <Image
+        src="/static/blocks/loop-3.png"
+        alt="While-Schleife mit Bedingung"
+        width={500}
+        height={400}
+        className="my-6"
+      />
+    </div>
+    
+    Verwende diese, wenn du eine Schleife benötigst, die läuft, bis eine bestimmte Bedingung erfüllt ist. Die Bedingung wird **vor** jeder Iteration überprüft.
+
+    ```
+    Example: While {"<variable.i>"} < 10
+    - Check condition → Execute if true
+    - Inside loop: Increment {"<variable.i>"}
+    - Inside loop: Variables assigns i = {"<variable.i>"} + 1
+    - Check condition → Execute if true
+    - Check condition → Exit if false
+    ```
+
+  </Tab>
+  <Tab>
+    **Do-While-Schleife (Bedingungsbasiert)** - Wird mindestens einmal ausgeführt und dann fortgesetzt, solange eine Bedingung wahr ist:
+    
+    <div className="flex justify-center">
+      <Image
+        src="/static/blocks/loop-4.png"
+        alt="Do-While-Schleife mit Bedingung"
+        width={500}
+        height={400}
+        className="my-6"
+      />
+    </div>
+    
+    Verwende diese, wenn du eine Operation mindestens einmal ausführen musst und dann die Schleife fortsetzen willst, bis eine Bedingung erfüllt ist. Die Bedingung wird **nach** jeder Iteration überprüft.
+
+    ```
+    Example: Do-while {"<variable.i>"} < 10
+    - Execute blocks
+    - Inside loop: Increment {"<variable.i>"}
+    - Inside loop: Variables assigns i = {"<variable.i>"} + 1
+    - Check condition → Continue if true
+    - Check condition → Exit if false
+    ```
+
+  </Tab>
+</Tabs>
+
+## Wie man Schleifen verwendet
+
+### Eine Schleife erstellen
+
+1. Ziehe einen Schleifenblock aus der Werkzeugleiste auf deine Leinwand
+2. Konfiguriere den Schleifentyp und die Parameter
+3. Ziehe andere Blöcke in den Schleifencontainer
+4. Verbinde die Blöcke nach Bedarf
+
+### Auf Ergebnisse zugreifen
+
+Nach Abschluss einer Schleife kannst du auf aggregierte Ergebnisse zugreifen:
+
+- **loop.results**: Array mit Ergebnissen aller Schleifendurchläufe
+
+## Beispielanwendungsfälle
+
+**Verarbeitung von API-Ergebnissen** - ForEach-Schleife verarbeitet Kundendatensätze aus einer API
+
+```javascript
+// Beispiel: ForEach-Schleife für API-Ergebnisse
+const customers = await api.getCustomers();
+
+loop.forEach(customers, (customer) => {
+  // Verarbeite jeden Kunden
+  if (customer.status === 'active') {
+    sendEmail(customer.email, 'Sonderangebot');
+  }
+});
+```
+
+**Iterative Inhaltsgenerierung** - For-Schleife generiert mehrere Inhaltsvariationen
+
+```javascript
+// Beispiel: For-Schleife für Inhaltsgenerierung
+const variations = [];
+
+loop.for(5, (i) => {
+  // Generiere 5 verschiedene Variationen
+  const content = ai.generateContent({
+    prompt: `Variation ${i+1} für Produktbeschreibung`,
+    temperature: 0.7 + (i * 0.1)
+  });
+  variations.push(content);
+});
+```
+
+**Zähler mit While-Schleife** - While-Schleife verarbeitet Elemente mit Zähler
+
+```javascript
+// Beispiel: While-Schleife mit Zähler
+let counter = 0;
+let processedItems = 0;
+
+loop.while(() => counter < items.length, () => {
+  if (items[counter].isValid) {
+    processItem(items[counter]);
+    processedItems++;
+  }
+  counter++;
+});
+
+console.log(`${processedItems} gültige Elemente verarbeitet`);
+```
+
+## Erweiterte Funktionen
+
+### Einschränkungen
+
+<Callout type="warning">
+  Container-Blöcke (Schleifen und Parallele) können nicht ineinander verschachtelt werden. Das bedeutet:
+  - Du kannst keinen Schleifenblock in einen anderen Schleifenblock platzieren
+  - Du kannst keinen Parallel-Block in einen Schleifenblock platzieren
+  - Du kannst keinen Container-Block in einen anderen Container-Block platzieren
+  
+  Wenn du mehrdimensionale Iterationen benötigst, erwäge eine Umstrukturierung deines Workflows, um sequentielle Schleifen zu verwenden oder Daten in Stufen zu verarbeiten.
+</Callout>
+
+<Callout type="info">
+  Schleifen werden sequentiell ausgeführt, nicht parallel. Wenn du eine gleichzeitige Ausführung benötigst, verwende stattdessen den Parallel-Block.
+</Callout>
+
+## Eingaben und Ausgaben
+
+<Tabs items={['Configuration', 'Variables', 'Results']}>
+  <Tab>
+    <ul className="list-disc space-y-2 pl-6">
+      <li>
+        <strong>Schleifentyp</strong>: Wähle zwischen 'for', 'forEach', 'while' oder 'doWhile'
+      </li>
+      <li>
+        <strong>Iterationen</strong>: Anzahl der Ausführungen (für for-Schleifen)
+      </li>
+      <li>
+        <strong>Sammlung</strong>: Array oder Objekt zum Durchlaufen (für forEach-Schleifen)
+      </li>
+      <li>
+        <strong>Bedingung</strong>: Boolescher Ausdruck zur Auswertung (für while/do-while-Schleifen)
+      </li>
+    </ul>
+  </Tab>
+  <Tab>
+    <ul className="list-disc space-y-2 pl-6">
+      <li>
+        <strong>loop.currentItem</strong>: Aktuell verarbeitetes Element
+      </li>
+      <li>
+        <strong>loop.index</strong>: Aktuelle Iterationsnummer (0-basiert)
+      </li>
+      <li>
+        <strong>loop.items</strong>: Vollständige Sammlung (für forEach-Schleifen)
+      </li>
+    </ul>
+  </Tab>
+  <Tab>
+    <ul className="list-disc space-y-2 pl-6">
+      <li>
+        <strong>loop.results</strong>: Array aller Iterationsergebnisse
+      </li>
+      <li>
+        <strong>Struktur</strong>: Ergebnisse behalten die Iterationsreihenfolge bei
+      </li>
+      <li>
+        <strong>Zugriff</strong>: Verfügbar in Blöcken nach der Schleife
+      </li>
+    </ul>
+  </Tab>
+</Tabs>
+
+## Bewährte Praktiken
+
+- **Setzen Sie vernünftige Grenzen**: Halten Sie die Anzahl der Iterationen in einem vernünftigen Rahmen, um lange Ausführungszeiten zu vermeiden
+- **Verwenden Sie ForEach für Sammlungen**: Verwenden Sie beim Verarbeiten von Arrays oder Objekten ForEach anstelle von For-Schleifen
+- **Behandeln Sie Fehler elegant**: Erwägen Sie, Fehlerbehandlung innerhalb von Schleifen hinzuzufügen, um robuste Workflows zu gewährleisten

apps/docs/content/docs/de/blocks/parallel.mdx

@@ -0,0 +1,216 @@
+---
+title: Parallel
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Image } from '@/components/ui/image'
+
+Der Parallel-Block ist ein Container, der mehrere Instanzen gleichzeitig ausführt, um Workflows schneller zu verarbeiten. Verarbeiten Sie Elemente simultan statt sequentiell.
+
+<Callout type="info">
+  Parallel-Blöcke sind Container-Knoten, die ihre Inhalte mehrfach gleichzeitig ausführen, im Gegensatz zu Schleifen, die sequentiell ausgeführt werden.
+</Callout>
+
+## Konfigurationsoptionen
+
+### Parallel-Typ
+
+Wählen Sie zwischen zwei Arten der parallelen Ausführung:
+
+<Tabs items={['Count-based', 'Collection-based']}>
+  <Tab>
+    **Anzahlbasierte Parallelisierung** - Führen Sie eine feste Anzahl paralleler Instanzen aus:
+    
+    <div className="flex justify-center">
+      <Image
+        src="/static/blocks/parallel-1.png"
+        alt="Anzahlbasierte parallele Ausführung"
+        width={500}
+        height={400}
+        className="my-6"
+      />
+    </div>
+    
+    Verwenden Sie diese Option, wenn Sie dieselbe Operation mehrmals gleichzeitig ausführen müssen.
+    
+
+```javascript
+// Beispiel: 3 parallele Instanzen ausführen
+const results = await blocks.parallel({
+  type: 'count',
+  count: 3,
+  async process(index) {
+    // Jede Instanz erhält einen eindeutigen Index (0, 1, 2)
+    return `Ergebnis von Instanz ${index}`;
+  }
+});
+```
+
+  </Tab>
+  <Tab>
+    **Sammlungsbasierte Parallelisierung** - Verteilen Sie eine Sammlung auf parallele Instanzen:
+    
+    <div className="flex justify-center">
+      <Image
+        src="/static/blocks/parallel-2.png"
+        alt="Sammlungsbasierte parallele Ausführung"
+        width={500}
+        height={400}
+        className="my-6"
+      />
+    </div>
+    
+    Jede Instanz verarbeitet gleichzeitig ein Element aus der Sammlung.
+    
+
+```javascript
+// Beispiel: Eine Liste von URLs parallel verarbeiten
+const urls = [
+  'https://example.com/api/1',
+  'https://example.com/api/2',
+  'https://example.com/api/3'
+];
+
+const results = await blocks.parallel({
+  type: 'collection',
+  items: urls,
+  async process(url, index) {
+    // Jede Instanz verarbeitet eine URL
+    const response = await fetch(url);
+    return response.json();
+  }
+});
+```
+
+  </Tab>
+</Tabs>
+
+## Verwendung von Parallel-Blöcken
+
+### Erstellen eines Parallel-Blocks
+
+1. Ziehen Sie einen Parallel-Block aus der Symbolleiste auf Ihre Leinwand
+2. Konfigurieren Sie den Parallel-Typ und die Parameter
+3. Ziehen Sie einen einzelnen Block in den Parallel-Container
+4. Verbinden Sie den Block nach Bedarf
+
+### Zugriff auf Ergebnisse
+
+Nach Abschluss eines Parallel-Blocks können Sie auf aggregierte Ergebnisse zugreifen:
+
+- **`results`**: Array von Ergebnissen aus allen parallelen Instanzen
+
+## Beispielanwendungsfälle
+
+**Batch-API-Verarbeitung** - Verarbeiten Sie mehrere API-Aufrufe gleichzeitig
+
+<div className="mb-4 rounded-md border p-4">
+  <h4 className="font-medium">Szenario: Mehrere API-Endpunkte abfragen</h4>
+  <ol className="list-decimal pl-5 text-sm">
+    <li>Sammlungsbasierte Parallelisierung über eine Liste von API-Endpunkten</li>
+    <li>Jede Instanz führt einen API-Aufruf durch und verarbeitet die Antwort</li>
+    <li>Ergebnisse werden in einem Array gesammelt und können weiterverarbeitet werden</li>
+  </ol>
+</div>
+
+**Multi-Modell-KI-Verarbeitung** - Erhalten Sie Antworten von mehreren KI-Modellen gleichzeitig
+
+<div className="mb-4 rounded-md border p-4">
+  <h4 className="font-medium">Szenario: Antworten von mehreren KI-Modellen erhalten</h4>
+  <ol className="list-decimal pl-5 text-sm">
+    <li>Sammlungsbasierte Parallelverarbeitung über eine Liste von Modell-IDs (z.B. ["gpt-4o", "claude-3.7-sonnet", "gemini-2.5-pro"])</li>
+    <li>Innerhalb des parallelen Blocks: Das Modell des Agenten wird auf das aktuelle Element aus der Sammlung gesetzt</li>
+    <li>Nach dem parallelen Block: Vergleichen und Auswählen der besten Antwort</li>
+  </ol>
+</div>
+
+## Erweiterte Funktionen
+
+### Ergebnisaggregation
+
+Ergebnisse aus allen parallelen Instanzen werden automatisch gesammelt:
+
+### Anwendungsbeispiele
+
+### Instanzisolierung
+
+Jede parallele Instanz läuft unabhängig:
+- Separate Variablenbereiche
+- Kein gemeinsamer Zustand zwischen Instanzen
+- Fehler in einer Instanz beeinflussen andere nicht
+
+### Einschränkungen
+
+<Callout type="warning">
+  Container-Blöcke (Schleifen und Parallele) können nicht ineinander verschachtelt werden. Das bedeutet:
+  - Sie können keinen Schleifenblock in einen Parallelblock platzieren
+  - Sie können keinen weiteren Parallelblock in einen Parallelblock platzieren
+  - Sie können keinen Container-Block in einen anderen Container-Block platzieren
+</Callout>
+
+<Callout type="info">
+  Während die parallele Ausführung schneller ist, beachten Sie bitte:
+  - API-Ratenbegrenzungen bei gleichzeitigen Anfragen
+  - Speicherverbrauch bei großen Datensätzen
+  - Maximum von 20 gleichzeitigen Instanzen, um Ressourcenerschöpfung zu vermeiden
+</Callout>
+
+## Parallel vs. Schleife
+
+Wann Sie welche Methode verwenden sollten:
+
+| Funktion | Parallel | Schleife |
+|---------|----------|------|
+| Ausführung | Gleichzeitig | Sequentiell |
+| Geschwindigkeit | Schneller für unabhängige Operationen | Langsamer, aber geordnet |
+| Reihenfolge | Keine garantierte Reihenfolge | Behält Reihenfolge bei |
+| Anwendungsfall | Unabhängige Operationen | Abhängige Operationen |
+| Ressourcennutzung | Höher | Niedriger |
+
+## Eingaben und Ausgaben
+
+<Tabs items={['Configuration', 'Variables', 'Results']}>
+  <Tab>
+    <ul className="list-disc space-y-2 pl-6">
+      <li>
+        <strong>Parallel-Typ</strong>: Wählen Sie zwischen 'count' oder 'collection'
+      </li>
+      <li>
+        <strong>Anzahl</strong>: Anzahl der auszuführenden Instanzen (anzahlbasiert)
+      </li>
+      <li>
+        <strong>Sammlung</strong>: Array oder Objekt zur Verteilung (sammlungsbasiert)
+      </li>
+    </ul>
+  </Tab>
+  <Tab>
+    <ul className="list-disc space-y-2 pl-6">
+      <li>
+        <strong>parallel.currentItem</strong>: Element für diese Instanz
+      </li>
+      <li>
+        <strong>parallel.index</strong>: Instanznummer (0-basiert)
+      </li>
+      <li>
+        <strong>parallel.items</strong>: Vollständige Sammlung (sammlungsbasiert)
+      </li>
+    </ul>
+  </Tab>
+  <Tab>
+    <ul className="list-disc space-y-2 pl-6">
+      <li>
+        <strong>parallel.results</strong>: Array aller Instanzergebnisse
+      </li>
+      <li>
+        <strong>Zugriff</strong>: Verfügbar in Blöcken nach der Parallelausführung
+      </li>
+    </ul>
+  </Tab>
+</Tabs>
+
+## Best Practices
+
+- **Nur unabhängige Operationen**: Stellen Sie sicher, dass Operationen nicht voneinander abhängen
+- **Ratenbegrenzungen berücksichtigen**: Fügen Sie Verzögerungen oder Drosselungen für API-intensive Workflows hinzu
+- **Fehlerbehandlung**: Jede Instanz sollte ihre eigenen Fehler angemessen behandeln

apps/docs/content/docs/de/blocks/response.mdx

@@ -0,0 +1,120 @@
+---
+title: Antwort
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Image } from '@/components/ui/image'
+
+Der Response-Block formatiert und sendet strukturierte HTTP-Antworten zurück an API-Aufrufer. Verwenden Sie ihn, um Workflow-Ergebnisse mit korrekten Statuscodes und Headern zurückzugeben.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/response.png"
+    alt="Konfiguration des Antwort-Blocks"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+<Callout type="info">
+  Response-Blöcke sind terminale Blöcke - sie beenden die Workflow-Ausführung und können nicht mit anderen Blöcken verbunden werden.
+</Callout>
+
+## Konfigurationsoptionen
+
+### Antwortdaten
+
+Die Antwortdaten sind der Hauptinhalt, der an den API-Aufrufer zurückgesendet wird. Diese sollten als JSON formatiert sein und können Folgendes enthalten:
+
+- Statische Werte
+- Dynamische Verweise auf Workflow-Variablen mit der `<variable.name>` Syntax
+- Verschachtelte Objekte und Arrays
+- Jede gültige JSON-Struktur
+
+### Statuscode
+
+Legen Sie den HTTP-Statuscode für die Antwort fest (standardmäßig 200):
+
+**Erfolg (2xx):**
+- **200**: OK - Standard-Erfolgsantwort
+- **201**: Erstellt - Ressource erfolgreich erstellt
+- **204**: Kein Inhalt - Erfolg ohne Antworttext
+
+**Client-Fehler (4xx):**
+- **400**: Ungültige Anfrage - Ungültige Anfrageparameter
+- **401**: Nicht autorisiert - Authentifizierung erforderlich
+- **404**: Nicht gefunden - Ressource existiert nicht
+- **422**: Nicht verarbeitbare Entität - Validierungsfehler
+
+**Server-Fehler (5xx):**
+- **500**: Interner Serverfehler - Serverseitiger Fehler
+- **502**: Bad Gateway - Fehler eines externen Dienstes
+- **503**: Dienst nicht verfügbar - Dienst vorübergehend nicht erreichbar
+
+### Antwort-Header
+
+Konfigurieren Sie zusätzliche HTTP-Header, die in die Antwort aufgenommen werden sollen.
+
+Header werden als Schlüssel-Wert-Paare konfiguriert:
+
+| Schlüssel | Wert |
+|-----|-------|
+| Content-Type | application/json |
+| Cache-Control | no-cache |
+| X-API-Version | 1.0 |
+
+## Beispielanwendungsfälle
+
+**API-Endpunkt-Antwort** - Strukturierte Daten von einer Such-API zurückgeben
+
+```
+Agent (Search) → Function (Format & Paginate) → Response (200, JSON)
+```
+
+**Webhook-Bestätigung** - Bestätigung des Webhook-Empfangs und der Verarbeitung
+
+```
+Webhook Trigger → Function (Process) → Response (200, Confirmation)
+```
+
+**Fehlerantwort-Behandlung** - Angemessene Fehlerantworten zurückgeben
+
+```
+Condition (Error Detected) → Router → Response (400/500, Error Details)
+```
+
+## Ausgaben
+
+Antwortblöcke sind endgültig - sie beenden die Workflow-Ausführung und senden die HTTP-Antwort an den API-Aufrufer. Es stehen keine Ausgaben für nachgelagerte Blöcke zur Verfügung.
+
+## Variablenreferenzen
+
+Verwenden Sie die `<variable.name>` Syntax, um Workflow-Variablen dynamisch in Ihre Antwort einzufügen:
+
+```json
+{
+  "user": {
+    "id": "<variable.userId>",
+    "name": "<variable.userName>",
+    "email": "<variable.userEmail>"
+  },
+  "query": "<variable.searchQuery>",
+  "results": "<variable.searchResults>",
+  "totalFound": "<variable.resultCount>",
+  "processingTime": "<variable.executionTime>ms"
+}
+```
+
+<Callout type="warning">
+  Variablennamen sind Groß- und Kleinschreibung sensitiv und müssen exakt mit den in Ihrem Workflow verfügbaren Variablen übereinstimmen.
+</Callout>
+
+## Best Practices
+
+- **Verwenden Sie aussagekräftige Statuscodes**: Wählen Sie passende HTTP-Statuscodes, die das Ergebnis des Workflows genau widerspiegeln
+- **Strukturieren Sie Ihre Antworten einheitlich**: Behalten Sie eine konsistente JSON-Struktur über alle Ihre API-Endpunkte bei, um eine bessere Entwicklererfahrung zu gewährleisten
+- **Fügen Sie relevante Metadaten hinzu**: Fügen Sie Zeitstempel und Versionsinformationen hinzu, um bei der Fehlerbehebung und Überwachung zu helfen
+- **Behandeln Sie Fehler elegant**: Verwenden Sie bedingte Logik in Ihrem Workflow, um angemessene Fehlerantworten mit aussagekräftigen Meldungen zu setzen
+- **Validieren Sie Variablenreferenzen**: Stellen Sie sicher, dass alle referenzierten Variablen existieren und die erwarteten Datentypen enthalten, bevor der Antwortblock ausgeführt wird

apps/docs/content/docs/de/blocks/router.mdx

@@ -0,0 +1,102 @@
+---
+title: Router
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Image } from '@/components/ui/image'
+
+Der Router-Block verwendet KI, um Workflows basierend auf Inhaltsanalysen intelligent zu leiten. Im Gegensatz zu Bedingungsblöcken, die einfache Regeln verwenden, verstehen Router Kontext und Absicht.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/router.png"
+    alt="Router-Block mit mehreren Pfaden"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+## Router vs. Bedingung
+
+**Verwende Router, wenn:**
+- KI-gestützte Inhaltsanalyse benötigt wird
+- Mit unstrukturierten oder variierenden Inhalten gearbeitet wird
+- Absichtsbasierte Weiterleitung erforderlich ist (z.B. "Support-Tickets an Abteilungen weiterleiten")
+
+**Verwende Bedingung, wenn:**
+- Einfache regelbasierte Entscheidungen ausreichen
+- Mit strukturierten Daten oder numerischen Vergleichen gearbeitet wird
+- Schnelle, deterministische Weiterleitung benötigt wird
+
+## Konfigurationsoptionen
+
+### Inhalt/Prompt
+
+Der Inhalt oder Prompt, den der Router analysieren wird, um Weiterleitungsentscheidungen zu treffen. Dies kann sein:
+
+- Eine direkte Benutzeranfrage oder -eingabe
+- Ausgabe eines vorherigen Blocks
+- Eine systemgenerierte Nachricht
+
+### Zielblöcke
+
+Die möglichen Zielblöcke, aus denen der Router auswählen kann. Der Router erkennt automatisch verbundene Blöcke, aber du kannst auch:
+
+- Die Beschreibungen von Zielblöcken anpassen, um die Weiterleitungsgenauigkeit zu verbessern
+- Weiterleitungskriterien für jeden Zielblock festlegen
+- Bestimmte Blöcke von der Berücksichtigung als Weiterleitungsziele ausschließen
+
+### Modellauswahl
+
+Wähle ein KI-Modell für die Weiterleitungsentscheidung:
+
+- **OpenAI**: GPT-4o, o1, o3, o4-mini, gpt-4.1
+- **Anthropic**: Claude 3.7 Sonnet
+- **Google**: Gemini 2.5 Pro, Gemini 2.0 Flash
+- **Andere Anbieter**: Groq, Cerebras, xAI, DeepSeek
+- **Lokale Modelle**: Ollama-kompatible Modelle
+
+Verwende Modelle mit starken Argumentationsfähigkeiten wie GPT-4o oder Claude 3.7 Sonnet für beste Ergebnisse.
+
+### API-Schlüssel
+
+Ihr API-Schlüssel für den ausgewählten LLM-Anbieter. Dieser wird sicher gespeichert und für die Authentifizierung verwendet.
+
+## Ausgaben
+
+- **`<router.prompt>`**: Zusammenfassung des Routing-Prompts
+- **`<router.selected_path>`**: Ausgewählter Zielblock
+- **`<router.tokens>`**: Token-Nutzungsstatistiken
+- **`<router.cost>`**: Geschätzte Routing-Kosten
+- **`<router.model>`**: Für die Entscheidungsfindung verwendetes Modell
+
+## Beispielanwendungsfälle
+
+**Kundensupport-Triage** - Tickets an spezialisierte Abteilungen weiterleiten
+
+```
+Input (Ticket) → Router → Agent (Engineering) or Agent (Finance)
+```
+
+**Inhaltsklassifizierung** - Nutzergenerierte Inhalte klassifizieren und weiterleiten
+
+```
+Input (Feedback) → Router → Workflow (Product) or Workflow (Technical)
+```
+
+**Lead-Qualifizierung** - Leads basierend auf Qualifizierungskriterien weiterleiten
+
+```
+Input (Lead) → Router → Agent (Enterprise Sales) or Workflow (Self-serve)
+```
+
+## Best Practices
+
+- **Klare Zielbeschreibungen bereitstellen**: Helfen Sie dem Router zu verstehen, wann jedes Ziel ausgewählt werden soll, mit spezifischen, detaillierten Beschreibungen
+- **Spezifische Routing-Kriterien verwenden**: Definieren Sie klare Bedingungen und Beispiele für jeden Pfad, um die Genauigkeit zu verbessern
+- **Fallback-Pfade implementieren**: Verbinden Sie ein Standardziel für Fälle, in denen kein spezifischer Pfad geeignet ist
+- **Mit verschiedenen Eingaben testen**: Stellen Sie sicher, dass der Router verschiedene Eingabetypen, Grenzfälle und unerwartete Inhalte verarbeiten kann
+- **Routing-Leistung überwachen**: Überprüfen Sie Routing-Entscheidungen regelmäßig und verfeinern Sie Kriterien basierend auf tatsächlichen Nutzungsmustern
+- **Geeignete Modelle auswählen**: Verwenden Sie Modelle mit starken Argumentationsfähigkeiten für komplexe Routing-Entscheidungen

apps/docs/content/docs/de/blocks/variables.mdx

@@ -0,0 +1,86 @@
+---
+title: Variablen
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Step, Steps } from 'fumadocs-ui/components/steps'
+import { Image } from '@/components/ui/image'
+
+Der Variablen-Block aktualisiert Workflow-Variablen während der Ausführung. Variablen müssen zuerst im Variablen-Bereich deines Workflows initialisiert werden, dann kannst du diesen Block verwenden, um ihre Werte während der Ausführung deines Workflows zu aktualisieren.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/variables.png"
+    alt="Variablen-Block"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+<Callout>
+  Greife überall in deinem Workflow auf Variablen zu, indem du die `<variable.variableName>` Syntax verwendest.
+</Callout>
+
+## Wie man Variablen verwendet
+
+### 1. Initialisierung in Workflow-Variablen
+
+Erstellen Sie zunächst Ihre Variablen im Variablenbereich des Workflows (zugänglich über die Workflow-Einstellungen):
+
+```
+customerEmail = ""
+retryCount = 0
+currentStatus = "pending"
+```
+
+### 2. Aktualisierung mit dem Variablen-Block
+
+Verwenden Sie den Variablen-Block, um diese Werte während der Ausführung zu aktualisieren:
+
+```
+customerEmail = <api.email>
+retryCount = <variable.retryCount> + 1
+currentStatus = "processing"
+```
+
+### 3. Überall zugreifen
+
+Referenzieren Sie Variablen in jedem Block:
+
+```
+Agent prompt: "Send email to <variable.customerEmail>"
+Condition: <variable.retryCount> < 5
+API body: {"status": "<variable.currentStatus>"}
+```
+
+## Beispielanwendungsfälle
+
+**Schleifenzähler und Status** - Fortschritt durch Iterationen verfolgen
+
+```
+Loop → Agent (Process) → Variables (itemsProcessed + 1) → Variables (Store lastResult)
+```
+
+**Wiederholungslogik** - API-Wiederholungsversuche verfolgen
+
+```
+API (Try) → Variables (retryCount + 1) → Condition (retryCount < 3)
+```
+
+**Dynamische Konfiguration** - Benutzerkontext für Workflow speichern
+
+```
+API (Fetch Profile) → Variables (userId, userTier) → Agent (Personalize)
+```
+
+## Ausgaben
+
+- **`<variables.assignments>`**: JSON-Objekt mit allen Variablenzuweisungen aus diesem Block
+
+## Bewährte Praktiken
+
+- **In Workflow-Einstellungen initialisieren**: Erstellen Sie Variablen immer im Variablenbereich des Workflows, bevor Sie sie verwenden
+- **Dynamisch aktualisieren**: Verwenden Sie Variablen-Blöcke, um Werte basierend auf Block-Ausgaben oder Berechnungen zu aktualisieren
+- **In Schleifen verwenden**: Perfekt für die Verfolgung des Status über Iterationen hinweg
+- **Beschreibend benennen**: Verwenden Sie klare Namen wie `currentIndex`, `totalProcessed` oder `lastError`

apps/docs/content/docs/de/blocks/wait.mdx

@@ -0,0 +1,67 @@
+---
+title: Warten
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Step, Steps } from 'fumadocs-ui/components/steps'
+import { Image } from '@/components/ui/image'
+
+Der Warten-Block pausiert deinen Workflow für eine bestimmte Zeit, bevor er mit dem nächsten Block fortfährt. Verwende ihn, um Verzögerungen zwischen Aktionen einzufügen, API-Ratenbegrenzungen einzuhalten oder Operationen zeitlich zu verteilen.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/wait.png"
+    alt="Warte-Block"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+## Konfiguration
+
+### Wartezeit
+
+Geben Sie die Dauer für die Ausführungspause ein:
+- **Eingabe**: Positive Zahl
+- **Maximum**: 600 Sekunden (10 Minuten) oder 10 Minuten
+
+### Einheit
+
+Wählen Sie die Zeiteinheit:
+- **Sekunden**: Für kurze, präzise Verzögerungen
+- **Minuten**: Für längere Pausen
+
+<Callout type="info">
+  Warteblöcke können durch Stoppen des Workflows abgebrochen werden. Die maximale Wartezeit beträgt 10 Minuten.
+</Callout>
+
+## Ausgaben
+
+- **`<wait.waitDuration>`**: Die Wartezeit in Millisekunden
+- **`<wait.status>`**: Status der Wartezeit ('waiting', 'completed' oder 'cancelled')
+
+## Beispielanwendungsfälle
+
+**API-Ratenbegrenzung** - Bleiben Sie zwischen Anfragen innerhalb der API-Ratenlimits
+
+```
+API (Request 1) → Wait (2s) → API (Request 2)
+```
+
+**Zeitgesteuerte Benachrichtigungen** - Senden Sie Folgenachrichten nach einer Verzögerung
+
+```
+Function (Send Email) → Wait (5min) → Function (Follow-up)
+```
+
+**Verarbeitungsverzögerungen** - Warten Sie, bis das externe System die Verarbeitung abgeschlossen hat
+
+```
+API (Trigger Job) → Wait (30s) → API (Check Status)
+```
+
+## Bewährte Praktiken
+
+- **Halten Sie Wartezeiten angemessen**: Verwenden Sie Wait für Verzögerungen bis zu 10 Minuten. Für längere Verzögerungen sollten Sie geplante Workflows in Betracht ziehen
+- **Überwachen Sie die Ausführungszeit**: Denken Sie daran, dass Wartezeiten die Gesamtdauer des Workflows verlängern

apps/docs/content/docs/de/blocks/workflow.mdx

@@ -0,0 +1,63 @@
+---
+title: Workflow-Block
+description: Führe einen anderen Workflow innerhalb des aktuellen Ablaufs aus
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Image } from '@/components/ui/image'
+
+## Was er macht
+
+<div className='flex justify-center my-6'>
+  <Image
+    src='/static/blocks/workflow.png'
+    alt='Workflow-Block-Konfiguration'
+    width={500}
+    height={400}
+    className='rounded-xl border border-border shadow-sm'
+  />
+</div>
+
+Füge einen Workflow-Block hinzu, wenn du einen untergeordneten Workflow als Teil eines größeren Ablaufs aufrufen möchtest. Der Block führt die neueste bereitgestellte Version dieses Workflows aus, wartet auf dessen Abschluss und setzt dann mit dem übergeordneten Workflow fort.
+
+## Konfiguration
+
+1. **Wähle einen Workflow** aus dem Dropdown-Menü (Selbstreferenzen sind blockiert, um Schleifen zu verhindern).
+2. **Eingaben zuordnen**: Wenn der untergeordnete Workflow einen Eingabeformular-Trigger hat, siehst du jedes Feld und kannst übergeordnete Variablen verbinden. Die zugeordneten Werte sind das, was der untergeordnete Workflow erhält.
+
+<div className='flex justify-center my-6'>
+  <Image
+    src='/static/blocks/workflow-2.png'
+    alt='Workflow-Block mit Beispiel für Eingabezuordnung'
+    width={700}
+    height={400}
+    className='rounded-xl border border-border shadow-sm'
+  />
+</div>
+
+3. **Ausgaben**: Nachdem der untergeordnete Workflow abgeschlossen ist, stellt der Block folgendes bereit:
+   - `result` – die endgültige Antwort des untergeordneten Workflows
+   - `success` – ob er ohne Fehler ausgeführt wurde
+   - `error` – Nachricht, wenn die Ausführung fehlschlägt
+
+## Bereitstellungsstatus-Badge
+
+Der Workflow-Block zeigt ein Bereitstellungsstatus-Badge an, das dir hilft zu verfolgen, ob der untergeordnete Workflow ausführungsbereit ist:
+
+- **Bereitgestellt** – Der untergeordnete Workflow wurde bereitgestellt und ist einsatzbereit. Der Block führt die aktuell bereitgestellte Version aus.
+- **Nicht bereitgestellt** – Der untergeordnete Workflow wurde noch nie bereitgestellt. Du musst ihn bereitstellen, bevor der Workflow-Block ihn ausführen kann.
+- **Erneut bereitstellen** – Seit der letzten Bereitstellung wurden Änderungen im untergeordneten Workflow erkannt. Klicke auf das Badge, um den untergeordneten Workflow mit den neuesten Änderungen erneut bereitzustellen.
+
+<Callout type="warn">
+Der Workflow-Block führt immer die zuletzt bereitgestellte Version des untergeordneten Workflows aus, nicht die Editor-Version. Stelle sicher, dass du nach Änderungen eine erneute Bereitstellung durchführst, damit der Block die neueste Logik verwendet.
+</Callout>
+
+## Hinweise zur Ausführung
+
+- Untergeordnete Workflows laufen im gleichen Workspace-Kontext, sodass Umgebungsvariablen und Tools übernommen werden.
+- Der Block verwendet Bereitstellungsversionierung: Jede API-, Zeitplan-, Webhook-, manuelle oder Chat-Ausführung ruft den bereitgestellten Snapshot auf. Stelle den untergeordneten Workflow nach Änderungen erneut bereit.
+- Wenn der untergeordnete Workflow fehlschlägt, löst der Block einen Fehler aus, es sei denn, du behandelst ihn nachgelagert.
+
+<Callout>
+Halte untergeordnete Workflows fokussiert. Kleine, wiederverwendbare Abläufe machen es einfacher, sie zu kombinieren, ohne tiefe Verschachtelungen zu erzeugen.
+</Callout>

apps/docs/content/docs/de/connections/basics.mdx

@@ -0,0 +1,42 @@
+---
+title: Grundlagen
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Step, Steps } from 'fumadocs-ui/components/steps'
+
+## Wie Verbindungen funktionieren
+
+Verbindungen sind die Pfade, die den Datenfluss zwischen Blöcken in Ihrem Workflow ermöglichen. In Sim definieren Verbindungen, wie Informationen von einem Block zum anderen übertragen werden und ermöglichen so den Datenfluss durch Ihren gesamten Workflow.
+
+<Callout type="info">
+  Jede Verbindung stellt eine gerichtete Beziehung dar, bei der Daten vom Ausgang eines Quellblocks
+  zum Eingang eines Zielblocks fließen.
+</Callout>
+
+### Verbindungen erstellen
+
+<Steps>
+  <Step>
+    <strong>Quellblock auswählen</strong>: Klicken Sie auf den Ausgangsport des Blocks, von dem aus Sie verbinden möchten
+  </Step>
+  <Step>
+    <strong>Verbindung ziehen</strong>: Ziehen Sie zum Eingangsport des Zielblocks
+  </Step>
+  <Step>
+    <strong>Verbindung bestätigen</strong>: Loslassen, um die Verbindung zu erstellen
+  </Step>
+</Steps>
+
+### Verbindungsfluss
+
+Der Datenfluss durch Verbindungen folgt diesen Prinzipien:
+
+1. **Gerichteter Fluss**: Daten fließen immer von Ausgängen zu Eingängen
+2. **Ausführungsreihenfolge**: Blöcke werden basierend auf ihren Verbindungen der Reihe nach ausgeführt
+3. **Datentransformation**: Daten können beim Übergang zwischen Blöcken transformiert werden
+4. **Bedingte Pfade**: Einige Blöcke (wie Router und Bedingung) können den Fluss auf verschiedene Pfade leiten
+
+<Callout type="warning">
+  Das Löschen einer Verbindung stoppt sofort den Datenfluss zwischen den Blöcken. Stellen Sie sicher, dass dies beabsichtigt ist, bevor Sie Verbindungen entfernen.
+</Callout>

apps/docs/content/docs/de/connections/data-structure.mdx

@@ -0,0 +1,194 @@
+---
+title: Datenstruktur
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+
+Wenn Sie Blöcke verbinden, ist das Verständnis der Datenstruktur verschiedener Block-Ausgaben wichtig, da die Ausgabedatenstruktur des Quellblocks bestimmt, welche Werte im Zielblock verfügbar sind. Jeder Blocktyp erzeugt eine spezifische Ausgabestruktur, auf die Sie in nachgelagerten Blöcken verweisen können.
+
+<Callout type="info">
+  Das Verständnis dieser Datenstrukturen ist wesentlich für die effektive Nutzung von Verbindungs-Tags und
+  den Zugriff auf die richtigen Daten in Ihren Workflows.
+</Callout>
+
+## Block-Ausgabestrukturen
+
+Verschiedene Blocktypen erzeugen unterschiedliche Ausgabestrukturen. Hier ist, was Sie von jedem Blocktyp erwarten können:
+
+<Tabs items={['Agent Output', 'API Output', 'Function Output', 'Evaluator Output', 'Condition Output', 'Router Output']}>
+  <Tab>
+
+    ```json
+    {
+      "content": "The generated text response",
+      "model": "gpt-4o",
+      "tokens": {
+        "prompt": 120,
+        "completion": 85,
+        "total": 205
+      },
+      "toolCalls": [...],
+      "cost": [...],
+      "usage": [...]
+    }
+    ```
+
+    ### Ausgabefelder des Agent-Blocks
+
+    - **content**: Die vom Agenten generierte Haupttextantwort
+    - **model**: Das verwendete KI-Modell (z.B. "gpt-4o", "claude-3-opus")
+    - **tokens**: Token-Nutzungsstatistiken
+      - **prompt**: Anzahl der Token in der Eingabeaufforderung
+      - **completion**: Anzahl der Token in der Vervollständigung
+      - **total**: Insgesamt verwendete Token
+    - **toolCalls**: Array von Werkzeugaufrufen des Agenten (falls vorhanden)
+    - **cost**: Array von Kostenobjekten für jeden Werkzeugaufruf (falls vorhanden)
+    - **usage**: Token-Nutzungsstatistiken für die gesamte Antwort
+
+  </Tab>
+  <Tab>
+
+    ```json
+    {
+      "data": "Response data",
+      "status": 200,
+      "headers": {
+        "content-type": "application/json",
+        "cache-control": "no-cache"
+      }
+    }
+    ```
+
+    ### Ausgabefelder des API-Blocks
+
+    - **data**: Die Antwortdaten von der API (kann jeden Typ haben)
+    - **status**: HTTP-Statuscode der Antwort
+    - **headers**: Von der API zurückgegebene HTTP-Header
+
+  </Tab>
+  <Tab>
+
+    ```json
+    {
+      "result": "Function return value",
+      "stdout": "Console output",
+    }
+    ```
+
+    ### Ausgabefelder des Funktionsblocks
+
+    - **result**: Der Rückgabewert der Funktion (kann jeden Typ haben)
+    - **stdout**: Während der Funktionsausführung erfasste Konsolenausgabe
+
+  </Tab>
+  <Tab>
+
+    ```json
+    {
+      "content": "Evaluation summary",
+      "model": "gpt-5",
+      "tokens": {
+        "prompt": 120,
+        "completion": 85,
+        "total": 205
+      },
+      "metric1": 8.5,
+      "metric2": 7.2,
+      "metric3": 9.0
+    }
+    ```
+
+    ### Ausgabefelder des Evaluator-Blocks
+
+    - **content**: Zusammenfassung der Auswertung
+    - **model**: Das für die Auswertung verwendete KI-Modell
+    - **tokens**: Statistiken zur Token-Nutzung
+    - **[metricName]**: Bewertung für jede im Evaluator definierte Metrik (dynamische Felder)
+
+  </Tab>
+  <Tab>
+
+    ```json
+    {
+      "content": "Original content passed through",
+      "conditionResult": true,
+      "selectedPath": {
+        "blockId": "2acd9007-27e8-4510-a487-73d3b825e7c1",
+        "blockType": "agent",
+        "blockTitle": "Follow-up Agent"
+      },
+      "selectedConditionId": "condition-1"
+    }
+    ```
+
+    ### Ausgabefelder des Condition-Blocks
+
+    - **content**: Der ursprüngliche, durchgeleitete Inhalt
+    - **conditionResult**: Boolesches Ergebnis der Bedingungsauswertung
+    - **selectedPath**: Informationen über den ausgewählten Pfad
+      - **blockId**: ID des nächsten Blocks im ausgewählten Pfad
+      - **blockType**: Typ des nächsten Blocks
+      - **blockTitle**: Titel des nächsten Blocks
+    - **selectedConditionId**: ID der ausgewählten Bedingung
+
+  </Tab>
+  <Tab>
+
+    ```json
+    {
+      "content": "Routing decision",
+      "model": "gpt-4o",
+      "tokens": {
+        "prompt": 120,
+        "completion": 85,
+        "total": 205
+      },
+      "selectedPath": {
+        "blockId": "2acd9007-27e8-4510-a487-73d3b825e7c1",
+        "blockType": "agent",
+        "blockTitle": "Customer Service Agent"
+      }
+    }
+    ```
+
+    ### Ausgabefelder des Router-Blocks
+
+    - **content**: Der Routing-Entscheidungstext
+    - **model**: Das für das Routing verwendete KI-Modell
+    - **tokens**: Statistiken zur Token-Nutzung
+    - **selectedPath**: Informationen über den ausgewählten Pfad
+      - **blockId**: ID des ausgewählten Zielblocks
+      - **blockType**: Typ des ausgewählten Blocks
+      - **blockTitle**: Titel des ausgewählten Blocks
+
+  </Tab>
+</Tabs>
+
+## Benutzerdefinierte Ausgabestrukturen
+
+Einige Blöcke können basierend auf ihrer Konfiguration benutzerdefinierte Ausgabestrukturen erzeugen:
+
+1. **Agent-Blöcke mit Antwortformat**: Bei Verwendung eines Antwortformats in einem Agent-Block entspricht die Ausgabestruktur dem definierten Schema anstelle der Standardstruktur.
+
+2. **Function-Blöcke**: Das Feld `result` kann jede Datenstruktur enthalten, die von Ihrem Funktionscode zurückgegeben wird.
+
+3. **API-Blöcke**: Das Feld `data` enthält die Rückgabe der API, die jede gültige JSON-Struktur sein kann.
+
+<Callout type="warning">
+  Überprüfen Sie während der Entwicklung immer die tatsächliche Ausgabestruktur Ihrer Blöcke, um sicherzustellen, dass Sie in Ihren Verbindungen auf die richtigen Felder verweisen.
+</Callout>
+
+## Verschachtelte Datenstrukturen
+
+Viele Block-Ausgaben enthalten verschachtelte Datenstrukturen. Du kannst auf diese mit Punktnotation in Verbindungs-Tags zugreifen:
+
+```
+<blockName.path.to.nested.data>
+```
+
+Zum Beispiel:
+
+- `<agent1.tokens.total>` - Greife auf die Gesamtzahl der Tokens aus einem Agent-Block zu
+- `<api1.data.results[0].id>` - Greife auf die ID des ersten Ergebnisses einer API-Antwort zu
+- `<function1.result.calculations.total>` - Greife auf ein verschachteltes Feld im Ergebnis eines Funktionsblocks zu

apps/docs/content/docs/de/connections/index.mdx

@@ -0,0 +1,42 @@
+---
+title: Übersicht
+description: Verbinde deine Blöcke miteinander.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Card, Cards } from 'fumadocs-ui/components/card'
+import { ConnectIcon } from '@/components/icons'
+import { Video } from '@/components/ui/video'
+
+Verbindungen sind die Pfade, die den Datenfluss zwischen Blöcken in deinem Workflow ermöglichen. Sie definieren, wie Informationen von einem Block zum anderen weitergegeben werden und ermöglichen dir, komplexe, mehrstufige Prozesse zu erstellen.
+
+<Callout type="info">
+  Richtig konfigurierte Verbindungen sind entscheidend für die Erstellung effektiver Workflows. Sie bestimmen, wie
+  Daten durch dein System fließen und wie Blöcke miteinander interagieren.
+</Callout>
+
+<div className="mx-auto w-full overflow-hidden rounded-lg">
+  <Video src="connections.mp4" />
+</div>
+
+## Verbindungstypen
+
+Sim unterstützt verschiedene Arten von Verbindungen, die verschiedene Workflow-Muster ermöglichen:
+
+<Cards>
+  <Card title="Grundlagen der Verbindungen" href="/connections/basics">
+    Lerne, wie Verbindungen funktionieren und wie du sie in deinen Workflows erstellst
+  </Card>
+  <Card title="Verbindungs-Tags" href="/connections/tags">
+    Verstehe, wie du Verbindungs-Tags verwendest, um auf Daten zwischen Blöcken zu verweisen
+  </Card>
+  <Card title="Datenstruktur" href="/connections/data-structure">
+    Erkunde die Ausgabedatenstrukturen verschiedener Blocktypen
+  </Card>
+  <Card title="Datenzugriff" href="/connections/accessing-data">
+    Lerne Techniken für den Zugriff und die Manipulation verbundener Daten
+  </Card>
+  <Card title="Best Practices" href="/connections/best-practices">
+    Folge empfohlenen Mustern für effektives Verbindungsmanagement
+  </Card>
+</Cards>

apps/docs/content/docs/de/connections/tags.mdx

@@ -0,0 +1,109 @@
+---
+title: Tags
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Video } from '@/components/ui/video'
+
+Verbindungs-Tags sind visuelle Darstellungen der verfügbaren Daten aus verbundenen Blöcken und bieten eine einfache Möglichkeit, auf Daten zwischen Blöcken und Ausgaben aus vorherigen Blöcken in Ihrem Workflow zu verweisen.
+
+<div className="mx-auto w-full overflow-hidden rounded-lg">
+  <Video src="connections.mp4" />
+</div>
+
+### Was sind Verbindungs-Tags?
+
+Verbindungs-Tags sind interaktive Elemente, die erscheinen, wenn Blöcke verbunden werden. Sie repräsentieren die Daten, die von einem Block zum anderen fließen können und ermöglichen es Ihnen:
+
+- Verfügbare Daten aus Quellblöcken zu visualisieren
+- Auf bestimmte Datenfelder in Zielblöcken zu verweisen
+- Dynamische Datenflüsse zwischen Blöcken zu erstellen
+
+<Callout type="info">
+  Verbindungs-Tags machen es einfach zu sehen, welche Daten aus vorherigen Blöcken verfügbar sind und diese in Ihrem
+  aktuellen Block zu verwenden, ohne sich komplexe Datenstrukturen merken zu müssen.
+</Callout>
+
+## Verwendung von Verbindungs-Tags
+
+Es gibt zwei Hauptmethoden, um Verbindungs-Tags in Ihren Workflows zu verwenden:
+
+<div className="my-6 grid grid-cols-1 gap-4 md:grid-cols-2">
+  <div className="rounded-lg border border-gray-200 p-4 dark:border-gray-800">
+    <h3 className="mb-2 text-lg font-medium">Drag and Drop</h3>
+    <div className="text-sm text-gray-600 dark:text-gray-400">
+      Klicken Sie auf einen Verbindungs-Tag und ziehen Sie ihn in Eingabefelder von Zielblöcken. Ein Dropdown-Menü wird
+      angezeigt, das verfügbare Werte zeigt.
+    </div>
+    <ol className="mt-2 list-decimal pl-5 text-sm text-gray-600 dark:text-gray-400">
+      <li>Fahren Sie mit dem Mauszeiger über einen Verbindungs-Tag, um verfügbare Daten zu sehen</li>
+      <li>Klicken und ziehen Sie den Tag in ein Eingabefeld</li>
+      <li>Wählen Sie das spezifische Datenfeld aus dem Dropdown-Menü</li>
+      <li>Die Referenz wird automatisch eingefügt</li>
+    </ol>
+  </div>
+
+  <div className="rounded-lg border border-gray-200 p-4 dark:border-gray-800">
+    <h3 className="mb-2 text-lg font-medium">Spitze-Klammer-Syntax</h3>
+    <div className="text-sm text-gray-600 dark:text-gray-400">
+      Geben Sie <code>&lt;&gt;</code> in Eingabefeldern ein, um ein Dropdown-Menü mit verfügbaren Verbindungswerten
+      aus vorherigen Blöcken zu sehen.
+    </div>
+    <ol className="mt-2 list-decimal pl-5 text-sm text-gray-600 dark:text-gray-400">
+      <li>Klicken Sie in ein beliebiges Eingabefeld, in dem Sie verbundene Daten verwenden möchten</li>
+      <li>
+        Geben Sie <code>&lt;&gt;</code> ein, um das Verbindungs-Dropdown-Menü aufzurufen
+      </li>
+      <li>Durchsuchen und wählen Sie die Daten aus, auf die Sie verweisen möchten</li>
+      <li>Tippen Sie weiter oder wählen Sie aus dem Dropdown-Menü, um die Referenz zu vervollständigen</li>
+    </ol>
+  </div>
+</div>
+
+## Tag-Syntax
+
+Verbindungs-Tags verwenden eine einfache Syntax, um auf Daten zu verweisen:
+
+```
+<blockName.path.to.data>
+```
+
+Wobei:
+
+- `blockName` ist der Name des Quellblocks
+- `path.to.data` ist der Pfad zum spezifischen Datenfeld
+
+Zum Beispiel:
+
+- `<agent1.content>` - Verweist auf das Inhaltsfeld eines Blocks mit der ID "agent1"
+- `<api2.data.users[0].name>` - Verweist auf den Namen des ersten Benutzers im Benutzer-Array aus dem Datenfeld eines Blocks mit der ID "api2"
+
+## Dynamische Tag-Referenzen
+
+Verbindungs-Tags werden zur Laufzeit ausgewertet, was bedeutet:
+
+1. Sie verweisen immer auf die aktuellsten Daten
+2. Sie können in Ausdrücken verwendet und mit statischem Text kombiniert werden
+3. Sie können in andere Datenstrukturen eingebettet werden
+
+### Beispiele
+
+```javascript
+// Reference in text
+"The user's name is <userBlock.name>"
+
+// Reference in JSON
+{
+  "userName": "<userBlock.name>",
+  "orderTotal": <apiBlock.data.total>
+}
+
+// Reference in code
+const greeting = "Hello, <userBlock.name>!";
+const total = <apiBlock.data.total> * 1.1; // Add 10% tax
+```
+
+<Callout type="warning">
+  Wenn Sie Verbindungs-Tags in numerischen Kontexten verwenden, stellen Sie sicher, dass die referenzierten Daten tatsächlich eine Zahl sind,
+  um Typkonvertierungsprobleme zu vermeiden.
+</Callout>

apps/docs/content/docs/de/copilot/index.mdx

@@ -0,0 +1,161 @@
+---
+title: Copilot
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Card, Cards } from 'fumadocs-ui/components/card'
+import { Image } from '@/components/ui/image'
+import { MessageCircle, Package, Zap, Infinity as InfinityIcon, Brain, BrainCircuit } from 'lucide-react'
+
+Copilot ist dein Assistent im Editor, der dir hilft, Workflows mit Sim Copilot zu erstellen und zu bearbeiten sowie diese zu verstehen und zu verbessern. Er kann:
+
+- **Erklären**: Beantwortet Fragen zu Sim und deinem aktuellen Workflow
+- **Anleiten**: Schlägt Bearbeitungen und Best Practices vor
+- **Bearbeiten**: Nimmt Änderungen an Blöcken, Verbindungen und Einstellungen vor, wenn du zustimmst
+
+<Callout type="info">
+  Copilot ist ein von Sim verwalteter Dienst. Für selbst gehostete Installationen generiere einen Copilot API-Schlüssel in der gehosteten App (sim.ai → Einstellungen → Copilot)
+  1. Gehe zu [sim.ai](https://sim.ai) → Einstellungen → Copilot und generiere einen Copilot API-Schlüssel
+  2. Setze `COPILOT_API_KEY` in deiner selbst gehosteten Umgebung auf diesen Wert
+</Callout>
+
+## Kontextmenü (@)
+
+Verwende das `@` Symbol, um auf verschiedene Ressourcen zu verweisen und Copilot mehr Kontext über deinen Arbeitsbereich zu geben:
+
+<Image
+  src="/static/copilot/copilot-menu.png"
+  alt="Copilot-Kontextmenü mit verfügbaren Referenzoptionen"
+  width={600}
+  height={400}
+/>
+
+Das `@` Menü bietet Zugriff auf:
+- **Chats**: Verweise auf vorherige Copilot-Gespräche
+- **Alle Workflows**: Verweise auf beliebige Workflows in deinem Arbeitsbereich
+- **Workflow-Blöcke**: Verweise auf bestimmte Blöcke aus Workflows
+- **Blöcke**: Verweise auf Blocktypen und Vorlagen
+- **Wissen**: Verweise auf deine hochgeladenen Dokumente und Wissensdatenbank
+- **Dokumentation**: Verweise auf Sim-Dokumentation
+- **Vorlagen**: Verweise auf Workflow-Vorlagen
+- **Logs**: Verweise auf Ausführungsprotokolle und Ergebnisse
+
+Diese kontextbezogenen Informationen helfen Copilot, genauere und relevantere Unterstützung für deinen spezifischen Anwendungsfall zu bieten.
+
+## Modi
+
+<Cards>
+  <Card
+    title={
+      <span className="inline-flex items-center gap-2">
+        <MessageCircle className="h-4 w-4 text-muted-foreground" />
+        Fragen
+      </span>
+    }
+  >
+    <div className="m-0 text-sm">
+      Frage-Antwort-Modus für Erklärungen, Anleitungen und Vorschläge ohne Änderungen an deinem Workflow vorzunehmen.
+    </div>
+  </Card>
+  <Card
+    title={
+      <span className="inline-flex items-center gap-2">
+        <Package className="h-4 w-4 text-muted-foreground" />
+        Agent
+      </span>
+    }
+  >
+    <div className="m-0 text-sm">
+      Erstellen-und-Bearbeiten-Modus. Copilot schlägt spezifische Änderungen vor (Blöcke hinzufügen, Variablen verbinden, Einstellungen anpassen) und wendet sie an, wenn du zustimmst.
+    </div>
+  </Card>
+</Cards>
+
+## Tiefenebenen
+
+<Cards>
+  <Card
+    title={
+      <span className="inline-flex items-center gap-2">
+        <Zap className="h-4 w-4 text-muted-foreground" />
+        Schnell
+      </span>
+    }
+  >
+    <div className="m-0 text-sm">Am schnellsten und günstigsten. Ideal für kleine Änderungen, einfache Workflows und geringfügige Anpassungen.</div>
+  </Card>
+  <Card
+    title={
+      <span className="inline-flex items-center gap-2">
+        <InfinityIcon className="h-4 w-4 text-muted-foreground" />
+        Auto
+      </span>
+    }
+  >
+    <div className="m-0 text-sm">Ausgewogene Geschwindigkeit und Denkleistung. Empfohlene Standardeinstellung für die meisten Aufgaben.</div>
+  </Card>
+  <Card
+    title={
+      <span className="inline-flex items-center gap-2">
+        <Brain className="h-4 w-4 text-muted-foreground" />
+        Erweitert
+      </span>
+    }
+  >
+    <div className="m-0 text-sm">Mehr Denkleistung für umfangreichere Workflows und komplexe Änderungen bei gleichzeitiger Leistungsfähigkeit.</div>
+  </Card>
+  <Card
+    title={
+      <span className="inline-flex items-center gap-2">
+        <BrainCircuit className="h-4 w-4 text-muted-foreground" />
+        Behemoth
+      </span>
+    }
+  >
+    <div className="m-0 text-sm">Maximale Denkleistung für tiefgreifende Planung, Fehlerbehebung und komplexe architektonische Änderungen.</div>
+  </Card>
+</Cards>
+
+### Modusauswahl-Oberfläche
+
+Du kannst einfach zwischen verschiedenen Denkmodi über den Modusauswähler in der Copilot-Oberfläche wechseln:
+
+<Image
+  src="/static/copilot/copilot-models.png"
+  alt="Copilot-Modusauswahl zeigt den erweiterten Modus mit MAX-Umschalter"
+  width={600}
+  height={300}
+/>
+
+Die Oberfläche ermöglicht dir:
+- **Denkebene auswählen**: Wähle zwischen Schnell, Auto, Erweitert oder Behemoth
+- **MAX-Modus aktivieren**: Umschalten für maximale Denkfähigkeiten, wenn du die gründlichste Analyse benötigst
+- **Modusbeschreibungen anzeigen**: Verstehe, wofür jeder Modus optimiert ist
+
+Wähle deinen Modus basierend auf der Komplexität deiner Aufgabe - verwende Schnell für einfache Fragen und Behemoth für komplexe architektonische Änderungen.
+
+## Abrechnung und Kostenberechnung
+
+### Wie Kosten berechnet werden
+
+Die Copilot-Nutzung wird pro Token vom zugrundeliegenden LLM abgerechnet:
+
+- **Eingabe-Tokens**: werden zum Basistarif des Anbieters berechnet (**zum Selbstkostenpreis**)
+- **Ausgabe-Tokens**: werden mit dem **1,5-fachen** des Basisausgabepreises des Anbieters berechnet
+
+```javascript
+copilotCost = (inputTokens × inputPrice + outputTokens × (outputPrice × 1.5)) / 1,000,000
+```
+
+| Komponente | Angewendeter Tarif    |
+|------------|------------------------|
+| Input      | inputPrice             |
+| Output     | outputPrice × 1,5      |
+
+<Callout type="warning">
+  Die angezeigten Preise spiegeln die Tarife vom 4. September 2025 wider. Überprüfen Sie die Anbieterdokumentation für aktuelle Preise.
+</Callout>
+
+<Callout type="info">
+  Modellpreise werden pro Million Token berechnet. Die Berechnung teilt durch 1.000.000, um die tatsächlichen Kosten zu ermitteln. Siehe <a href="/execution/costs">die Seite zur Kostenberechnung</a> für Hintergründe und Beispiele.
+</Callout>

apps/docs/content/docs/de/execution/api.mdx

@@ -0,0 +1,549 @@
+---
+title: Externe API
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Video } from '@/components/ui/video'
+
+Sim bietet eine umfassende externe API zum Abfragen von Workflow-Ausführungsprotokollen und zum Einrichten von Webhooks für Echtzeit-Benachrichtigungen, wenn Workflows abgeschlossen werden.
+
+## Authentifizierung
+
+Alle API-Anfragen erfordern einen API-Schlüssel, der im Header `x-api-key` übergeben wird:
+
+```bash
+curl -H "x-api-key: YOUR_API_KEY" \
+  https://sim.ai/api/v1/logs?workspaceId=YOUR_WORKSPACE_ID
+```
+
+Sie können API-Schlüssel in Ihren Benutzereinstellungen im Sim-Dashboard generieren.
+
+## Logs-API
+
+Alle API-Antworten enthalten Informationen über Ihre Workflow-Ausführungslimits und -nutzung:
+
+```json
+"limits": {
+  "workflowExecutionRateLimit": {
+    "sync": {
+      "limit": 60,        // Max sync workflow executions per minute
+      "remaining": 58,    // Remaining sync workflow executions
+      "resetAt": "..."    // When the window resets
+    },
+    "async": {
+      "limit": 60,        // Max async workflow executions per minute
+      "remaining": 59,    // Remaining async workflow executions
+      "resetAt": "..."    // When the window resets
+    }
+  },
+  "usage": {
+    "currentPeriodCost": 1.234,  // Current billing period usage in USD
+    "limit": 10,                  // Usage limit in USD
+    "plan": "pro",                // Current subscription plan
+    "isExceeded": false           // Whether limit is exceeded
+  }
+}
+```
+
+**Hinweis:** Die Ratenbegrenzungen in der Antwort beziehen sich auf Workflow-Ausführungen. Die Ratenbegrenzungen für den Aufruf dieses API-Endpunkts befinden sich in den Antwort-Headern (`X-RateLimit-*`).
+
+### Logs abfragen
+
+Fragen Sie Workflow-Ausführungsprotokolle mit umfangreichen Filteroptionen ab.
+
+<Tabs items={['Request', 'Response']}>
+  <Tab value="Request">
+
+    ```http
+    GET /api/v1/logs
+    ```
+
+    **Erforderliche Parameter:**
+    - `workspaceId` - Ihre Workspace-ID
+
+    **Optionale Filter:**
+    - `workflowIds` - Kommagetrennte Workflow-IDs
+    - `folderIds` - Kommagetrennte Ordner-IDs
+    - `triggers` - Kommagetrennte Auslösertypen: `api`, `webhook`, `schedule`, `manual`, `chat`
+    - `level` - Nach Level filtern: `info`, `error`
+    - `startDate` - ISO-Zeitstempel für den Beginn des Datumsbereichs
+    - `endDate` - ISO-Zeitstempel für das Ende des Datumsbereichs
+    - `executionId` - Exakte Übereinstimmung der Ausführungs-ID
+    - `minDurationMs` - Minimale Ausführungsdauer in Millisekunden
+    - `maxDurationMs` - Maximale Ausführungsdauer in Millisekunden
+    - `minCost` - Minimale Ausführungskosten
+    - `maxCost` - Maximale Ausführungskosten
+    - `model` - Nach verwendetem KI-Modell filtern
+
+    **Paginierung:**
+    - `limit` - Ergebnisse pro Seite (Standard: 100)
+    - `cursor` - Cursor für die nächste Seite
+    - `order` - Sortierreihenfolge: `desc`, `asc` (Standard: desc)
+
+    **Detailebene:**
+    - `details` - Detailebene der Antwort: `basic`, `full` (Standard: basic)
+    - `includeTraceSpans` - Trace-Spans einschließen (Standard: false)
+    - `includeFinalOutput` - Endgültige Ausgabe einschließen (Standard: false)
+  </Tab>
+  <Tab value="Response">
+
+    ```json
+    {
+      "data": [
+        {
+          "id": "log_abc123",
+          "workflowId": "wf_xyz789",
+          "executionId": "exec_def456",
+          "level": "info",
+          "trigger": "api",
+          "startedAt": "2025-01-01T12:34:56.789Z",
+          "endedAt": "2025-01-01T12:34:57.123Z",
+          "totalDurationMs": 334,
+          "cost": {
+            "total": 0.00234
+          },
+          "files": null
+        }
+      ],
+      "nextCursor": "eyJzIjoiMjAyNS0wMS0wMVQxMjozNDo1Ni43ODlaIiwiaWQiOiJsb2dfYWJjMTIzIn0",
+      "limits": {
+        "workflowExecutionRateLimit": {
+          "sync": {
+            "limit": 60,
+            "remaining": 58,
+            "resetAt": "2025-01-01T12:35:56.789Z"
+          },
+          "async": {
+            "limit": 60,
+            "remaining": 59,
+            "resetAt": "2025-01-01T12:35:56.789Z"
+          }
+        },
+        "usage": {
+          "currentPeriodCost": 1.234,
+          "limit": 10,
+          "plan": "pro",
+          "isExceeded": false
+        }
+      }
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+### Log-Details abrufen
+
+Rufen Sie detaillierte Informationen zu einem bestimmten Logeintrag ab.
+
+<Tabs items={['Request', 'Response']}>
+  <Tab value="Request">
+
+    ```http
+    GET /api/v1/logs/{id}
+    ```
+
+  </Tab>
+  <Tab value="Response">
+
+    ```json
+    {
+      "data": {
+        "id": "log_abc123",
+        "workflowId": "wf_xyz789",
+        "executionId": "exec_def456",
+        "level": "info",
+        "trigger": "api",
+        "startedAt": "2025-01-01T12:34:56.789Z",
+        "endedAt": "2025-01-01T12:34:57.123Z",
+        "totalDurationMs": 334,
+        "workflow": {
+          "id": "wf_xyz789",
+          "name": "My Workflow",
+          "description": "Process customer data"
+        },
+        "executionData": {
+          "traceSpans": [...],
+          "finalOutput": {...}
+        },
+        "cost": {
+          "total": 0.00234,
+          "tokens": {
+            "prompt": 123,
+            "completion": 456,
+            "total": 579
+          },
+          "models": {
+            "gpt-4o": {
+              "input": 0.001,
+              "output": 0.00134,
+              "total": 0.00234,
+              "tokens": {
+                "prompt": 123,
+                "completion": 456,
+                "total": 579
+              }
+            }
+          }
+        },
+        "limits": {
+          "workflowExecutionRateLimit": {
+            "sync": {
+              "limit": 60,
+              "remaining": 58,
+              "resetAt": "2025-01-01T12:35:56.789Z"
+            },
+            "async": {
+              "limit": 60,
+              "remaining": 59,
+              "resetAt": "2025-01-01T12:35:56.789Z"
+            }
+          },
+          "usage": {
+            "currentPeriodCost": 1.234,
+            "limit": 10,
+            "plan": "pro",
+            "isExceeded": false
+          }
+        }
+      }
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+### Ausführungsdetails abrufen
+
+Rufen Sie Ausführungsdetails einschließlich des Workflow-Zustandsschnappschusses ab.
+
+<Tabs items={['Request', 'Response']}>
+  <Tab value="Request">
+
+    ```http
+    GET /api/v1/logs/executions/{executionId}
+    ```
+
+  </Tab>
+  <Tab value="Response">
+
+    ```json
+    {
+      "executionId": "exec_def456",
+      "workflowId": "wf_xyz789",
+      "workflowState": {
+        "blocks": {...},
+        "edges": [...],
+        "loops": {...},
+        "parallels": {...}
+      },
+      "executionMetadata": {
+        "trigger": "api",
+        "startedAt": "2025-01-01T12:34:56.789Z",
+        "endedAt": "2025-01-01T12:34:57.123Z",
+        "totalDurationMs": 334,
+        "cost": {...}
+      }
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+## Webhook-Abonnements
+
+Erhalten Sie Echtzeitbenachrichtigungen, wenn Workflow-Ausführungen abgeschlossen werden. Webhooks werden über die Sim-Benutzeroberfläche im Workflow-Editor konfiguriert.
+
+### Konfiguration
+
+Webhooks können für jeden Workflow über die Benutzeroberfläche des Workflow-Editors konfiguriert werden. Klicken Sie auf das Webhook-Symbol in der Kontrollleiste, um Ihre Webhook-Abonnements einzurichten.
+
+<div className="mx-auto w-full overflow-hidden rounded-lg">
+  <Video src="configure-webhook.mp4" width={700} height={450} />
+</div>
+
+**Verfügbare Konfigurationsoptionen:**
+- `url`: Ihre Webhook-Endpunkt-URL
+- `secret`: Optionales Geheimnis für die HMAC-Signaturverifizierung
+- `includeFinalOutput`: Die endgültige Ausgabe des Workflows in die Nutzlast einschließen
+- `includeTraceSpans`: Detaillierte Ausführungs-Trace-Spans einschließen
+- `includeRateLimits`: Informationen zum Ratelimit des Workflow-Besitzers einschließen
+- `includeUsageData`: Nutzungs- und Abrechnungsdaten des Workflow-Besitzers einschließen
+- `levelFilter`: Array von Log-Ebenen, die empfangen werden sollen (`info`, `error`)
+- `triggerFilter`: Array von Auslösertypen, die empfangen werden sollen (`api`, `webhook`, `schedule`, `manual`, `chat`)
+- `active`: Webhook-Abonnement aktivieren/deaktivieren
+
+### Webhook-Nutzlast
+
+Wenn eine Workflow-Ausführung abgeschlossen ist, sendet Sim eine POST-Anfrage an Ihre Webhook-URL:
+
+```json
+{
+  "id": "evt_123",
+  "type": "workflow.execution.completed",
+  "timestamp": 1735925767890,
+  "data": {
+    "workflowId": "wf_xyz789",
+    "executionId": "exec_def456",
+    "status": "success",
+    "level": "info",
+    "trigger": "api",
+    "startedAt": "2025-01-01T12:34:56.789Z",
+    "endedAt": "2025-01-01T12:34:57.123Z",
+    "totalDurationMs": 334,
+    "cost": {
+      "total": 0.00234,
+      "tokens": {
+        "prompt": 123,
+        "completion": 456,
+        "total": 579
+      },
+      "models": {
+        "gpt-4o": {
+          "input": 0.001,
+          "output": 0.00134,
+          "total": 0.00234,
+          "tokens": {
+            "prompt": 123,
+            "completion": 456,
+            "total": 579
+          }
+        }
+      }
+    },
+    "files": null,
+    "finalOutput": {...},  // Only if includeFinalOutput=true
+    "traceSpans": [...],   // Only if includeTraceSpans=true
+    "rateLimits": {...},   // Only if includeRateLimits=true
+    "usage": {...}         // Only if includeUsageData=true
+  },
+  "links": {
+    "log": "/v1/logs/log_abc123",
+    "execution": "/v1/logs/executions/exec_def456"
+  }
+}
+```
+
+### Webhook-Header
+
+Jede Webhook-Anfrage enthält diese Header:
+
+- `sim-event`: Ereignistyp (immer `workflow.execution.completed`)
+- `sim-timestamp`: Unix-Zeitstempel in Millisekunden
+- `sim-delivery-id`: Eindeutige Lieferungs-ID für Idempotenz
+- `sim-signature`: HMAC-SHA256-Signatur zur Verifizierung (falls Secret konfiguriert)
+- `Idempotency-Key`: Identisch mit der Lieferungs-ID zur Erkennung von Duplikaten
+
+### Signaturverifizierung
+
+Wenn Sie ein Webhook-Secret konfigurieren, überprüfen Sie die Signatur, um sicherzustellen, dass der Webhook von Sim stammt:
+
+<Tabs items={['Node.js', 'Python']}>
+  <Tab value="Node.js">
+
+    ```javascript
+    import crypto from 'crypto';
+
+    function verifyWebhookSignature(body, signature, secret) {
+      const [timestampPart, signaturePart] = signature.split(',');
+      const timestamp = timestampPart.replace('t=', '');
+      const expectedSignature = signaturePart.replace('v1=', '');
+      
+      const signatureBase = `${timestamp}.${body}`;
+      const hmac = crypto.createHmac('sha256', secret);
+      hmac.update(signatureBase);
+      const computedSignature = hmac.digest('hex');
+      
+      return computedSignature === expectedSignature;
+    }
+
+    // In your webhook handler
+    app.post('/webhook', (req, res) => {
+      const signature = req.headers['sim-signature'];
+      const body = JSON.stringify(req.body);
+      
+      if (!verifyWebhookSignature(body, signature, process.env.WEBHOOK_SECRET)) {
+        return res.status(401).send('Invalid signature');
+      }
+      
+      // Process the webhook...
+    });
+    ```
+
+  </Tab>
+  <Tab value="Python">
+
+    ```python
+    import hmac
+    import hashlib
+    import json
+
+    def verify_webhook_signature(body: str, signature: str, secret: str) -> bool:
+        timestamp_part, signature_part = signature.split(',')
+        timestamp = timestamp_part.replace('t=', '')
+        expected_signature = signature_part.replace('v1=', '')
+        
+        signature_base = f"{timestamp}.{body}"
+        computed_signature = hmac.new(
+            secret.encode(),
+            signature_base.encode(),
+            hashlib.sha256
+        ).hexdigest()
+        
+        return hmac.compare_digest(computed_signature, expected_signature)
+
+    # In your webhook handler
+    @app.route('/webhook', methods=['POST'])
+    def webhook():
+        signature = request.headers.get('sim-signature')
+        body = json.dumps(request.json)
+        
+        if not verify_webhook_signature(body, signature, os.environ['WEBHOOK_SECRET']):
+            return 'Invalid signature', 401
+        
+        # Process the webhook...
+    ```
+
+  </Tab>
+</Tabs>
+
+### Wiederholungsrichtlinie
+
+Fehlgeschlagene Webhook-Zustellungen werden mit exponentiellem Backoff und Jitter wiederholt:
+
+- Maximale Versuche: 5
+- Wiederholungsverzögerungen: 5 Sekunden, 15 Sekunden, 1 Minute, 3 Minuten, 10 Minuten
+- Jitter: Bis zu 10% zusätzliche Verzögerung, um Überlastungen zu vermeiden
+- Nur HTTP 5xx und 429 Antworten lösen Wiederholungen aus
+- Zustellungen haben ein Timeout nach 30 Sekunden
+
+<Callout type="info">
+  Webhook-Zustellungen werden asynchron verarbeitet und beeinträchtigen nicht die Leistung der Workflow-Ausführung.
+</Callout>
+
+## Best Practices
+
+1. **Polling-Strategie**: Verwenden Sie beim Abfragen von Logs die cursorbasierte Paginierung mit `order=asc` und `startDate`, um neue Logs effizient abzurufen.
+
+2. **Webhook-Sicherheit**: Konfigurieren Sie immer ein Webhook-Secret und überprüfen Sie Signaturen, um sicherzustellen, dass Anfragen von Sim stammen.
+
+3. **Idempotenz**: Verwenden Sie den `Idempotency-Key`Header, um doppelte Webhook-Zustellungen zu erkennen und zu behandeln.
+
+4. **Datenschutz**: Standardmäßig werden `finalOutput` und `traceSpans` von den Antworten ausgeschlossen. Aktivieren Sie diese nur, wenn Sie die Daten benötigen und die Datenschutzauswirkungen verstehen.
+
+5. **Rate-Limiting**: Implementieren Sie exponentielles Backoff, wenn Sie 429-Antworten erhalten. Überprüfen Sie den `Retry-After`Header für die empfohlene Wartezeit.
+
+## Rate-Limiting
+
+Die API implementiert Rate-Limiting, um eine faire Nutzung zu gewährleisten:
+
+- **Kostenloser Plan**: 10 Anfragen pro Minute
+- **Pro-Plan**: 30 Anfragen pro Minute
+- **Team-Plan**: 60 Anfragen pro Minute
+- **Enterprise-Plan**: Individuelle Limits
+
+Informationen zum Rate-Limit sind in den Antwort-Headern enthalten:
+- `X-RateLimit-Limit`: Maximale Anfragen pro Zeitfenster
+- `X-RateLimit-Remaining`: Verbleibende Anfragen im aktuellen Zeitfenster
+- `X-RateLimit-Reset`: ISO-Zeitstempel, wann das Zeitfenster zurückgesetzt wird
+
+## Beispiel: Abfragen neuer Logs
+
+```javascript
+let cursor = null;
+const workspaceId = 'YOUR_WORKSPACE_ID';
+const startDate = new Date().toISOString();
+
+async function pollLogs() {
+  const params = new URLSearchParams({
+    workspaceId,
+    startDate,
+    order: 'asc',
+    limit: '100'
+  });
+  
+  if (cursor) {
+    params.append('cursor', cursor);
+  }
+  
+  const response = await fetch(
+    `https://sim.ai/api/v1/logs?${params}`,
+    {
+      headers: {
+        'x-api-key': 'YOUR_API_KEY'
+      }
+    }
+  );
+  
+  if (response.ok) {
+    const data = await response.json();
+    
+    // Process new logs
+    for (const log of data.data) {
+      console.log(`New execution: ${log.executionId}`);
+    }
+    
+    // Update cursor for next poll
+    if (data.nextCursor) {
+      cursor = data.nextCursor;
+    }
+  }
+}
+
+// Poll every 30 seconds
+setInterval(pollLogs, 30000);
+```
+
+## Beispiel: Verarbeitung von Webhooks
+
+```javascript
+import express from 'express';
+import crypto from 'crypto';
+
+const app = express();
+app.use(express.json());
+
+app.post('/sim-webhook', (req, res) => {
+  // Verify signature
+  const signature = req.headers['sim-signature'];
+  const body = JSON.stringify(req.body);
+  
+  if (!verifyWebhookSignature(body, signature, process.env.WEBHOOK_SECRET)) {
+    return res.status(401).send('Invalid signature');
+  }
+  
+  // Check timestamp to prevent replay attacks
+  const timestamp = parseInt(req.headers['sim-timestamp']);
+  const fiveMinutesAgo = Date.now() - (5 * 60 * 1000);
+  
+  if (timestamp < fiveMinutesAgo) {
+    return res.status(401).send('Timestamp too old');
+  }
+  
+  // Process the webhook
+  const event = req.body;
+  
+  switch (event.type) {
+    case 'workflow.execution.completed':
+      const { workflowId, executionId, status, cost } = event.data;
+      
+      if (status === 'error') {
+        console.error(`Workflow ${workflowId} failed: ${executionId}`);
+        // Handle error...
+      } else {
+        console.log(`Workflow ${workflowId} completed: ${executionId}`);
+        console.log(`Cost: $${cost.total}`);
+        // Process successful execution...
+      }
+      break;
+  }
+  
+  // Return 200 to acknowledge receipt
+  res.status(200).send('OK');
+});
+
+app.listen(3000, () => {
+  console.log('Webhook server listening on port 3000');
+});
+```

apps/docs/content/docs/de/execution/basics.mdx

@@ -0,0 +1,107 @@
+---
+title: Grundlagen
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Card, Cards } from 'fumadocs-ui/components/card'
+import { Image } from '@/components/ui/image'
+
+Das Verständnis der Workflow-Ausführung in Sim ist entscheidend für die Erstellung effizienter und zuverlässiger Automatisierungen. Die Ausführungs-Engine verwaltet automatisch Abhängigkeiten, Parallelität und Datenfluss, um sicherzustellen, dass Ihre Workflows reibungslos und vorhersehbar ablaufen.
+
+## Wie Workflows ausgeführt werden
+
+Die Ausführungs-Engine von Sim verarbeitet Workflows intelligent, indem sie Abhängigkeiten analysiert und Blöcke in der effizientesten Reihenfolge ausführt.
+
+### Parallele Ausführung als Standard
+
+Mehrere Blöcke werden gleichzeitig ausgeführt, wenn sie nicht voneinander abhängig sind. Diese parallele Ausführung verbessert die Leistung erheblich, ohne dass eine manuelle Konfiguration erforderlich ist.
+
+<Image
+  src="/static/execution/concurrency.png"
+  alt="Mehrere Blöcke, die nach dem Start-Block parallel ausgeführt werden"
+  width={800}
+  height={500}
+/>
+
+In diesem Beispiel werden sowohl der Kundensupport- als auch der Deep-Researcher-Agentenblock gleichzeitig nach dem Start-Block ausgeführt, was die Effizienz maximiert.
+
+### Automatische Ausgabekombination
+
+Wenn Blöcke mehrere Abhängigkeiten haben, wartet die Ausführungs-Engine automatisch auf den Abschluss aller Abhängigkeiten und stellt dann ihre kombinierten Ausgaben dem nächsten Block zur Verfügung. Keine manuelle Kombination erforderlich.
+
+<Image
+  src="/static/execution/combination.png"
+  alt="Funktionsblock, der automatisch Ausgaben von mehreren vorherigen Blöcken empfängt"
+  width={800}
+  height={500}
+/>
+
+Der Funktionsblock erhält Ausgaben von beiden Agentenblöcken, sobald diese abgeschlossen sind, sodass Sie die kombinierten Ergebnisse verarbeiten können.
+
+### Intelligentes Routing
+
+Workflows können sich in mehrere Richtungen verzweigen, indem sie Routing-Blöcke verwenden. Die Ausführungs-Engine unterstützt sowohl deterministisches Routing (mit Bedingungsblöcken) als auch KI-gesteuertes Routing (mit Router-Blöcken).
+
+<Image
+  src="/static/execution/routing.png"
+  alt="Workflow, der sowohl bedingte als auch router-basierte Verzweigungen zeigt"
+  width={800}
+  height={500}
+/>
+
+Dieser Workflow zeigt, wie die Ausführung unterschiedlichen Pfaden basierend auf Bedingungen oder KI-Entscheidungen folgen kann, wobei jeder Pfad unabhängig ausgeführt wird.
+
+## Blocktypen
+
+Sim bietet verschiedene Arten von Blöcken, die spezifische Zwecke in Ihren Workflows erfüllen:
+
+<Cards>
+  <Card title="Auslöser" href="/triggers">
+    **Starter-Blöcke** initiieren Workflows und **Webhook-Blöcke** reagieren auf externe Ereignisse. Jeder Workflow benötigt einen Auslöser, um die Ausführung zu beginnen.
+  </Card>
+  
+  <Card title="Verarbeitungsblöcke" href="/blocks">
+    **Agent-Blöcke** interagieren mit KI-Modellen, **Funktionsblöcke** führen benutzerdefinierten Code aus und **API-Blöcke** verbinden sich mit externen Diensten. Diese Blöcke transformieren und verarbeiten Ihre Daten.
+  </Card>
+  
+  <Card title="Kontrollfluss" href="/blocks">
+    **Router-Blöcke** nutzen KI, um Pfade zu wählen, **Bedingungsblöcke** verzweigen basierend auf Logik und **Schleifen-/Parallelblöcke** handhaben Iterationen und Nebenläufigkeit.
+  </Card>
+  
+  <Card title="Ausgabe & Antwort" href="/blocks">
+    **Antwortblöcke** formatieren endgültige Ausgaben für APIs und Chat-Schnittstellen und liefern strukturierte Ergebnisse aus Ihren Workflows.
+  </Card>
+</Cards>
+
+Alle Blöcke werden automatisch basierend auf ihren Abhängigkeiten ausgeführt - Sie müssen die Ausführungsreihenfolge oder das Timing nicht manuell verwalten.
+
+## Ausführungsüberwachung
+
+Wenn Workflows ausgeführt werden, bietet Sim Echtzeit-Einblick in den Ausführungsprozess:
+
+- **Live-Block-Status**: Sehen Sie, welche Blöcke gerade ausgeführt werden, abgeschlossen sind oder fehlgeschlagen sind
+- **Ausführungsprotokolle**: Detaillierte Protokolle erscheinen in Echtzeit und zeigen Eingaben, Ausgaben und eventuelle Fehler
+- **Leistungskennzahlen**: Verfolgen Sie die Ausführungszeit und Kosten für jeden Block
+- **Pfadvisualisierung**: Verstehen Sie, welche Ausführungspfade durch Ihren Workflow genommen wurden
+
+<Callout type="info">
+  Alle Ausführungsdetails werden erfasst und sind auch nach Abschluss der Workflows zur Überprüfung verfügbar, was bei der Fehlerbehebung und Optimierung hilft.
+</Callout>
+
+## Wichtige Ausführungsprinzipien
+
+Das Verständnis dieser Grundprinzipien wird Ihnen helfen, bessere Workflows zu erstellen:
+
+1. **Abhängigkeitsbasierte Ausführung**: Blöcke werden nur ausgeführt, wenn alle ihre Abhängigkeiten abgeschlossen sind
+2. **Automatische Parallelisierung**: Unabhängige Blöcke laufen ohne Konfiguration gleichzeitig
+3. **Intelligenter Datenfluss**: Ausgaben fließen automatisch zu verbundenen Blöcken
+4. **Fehlerbehandlung**: Fehlgeschlagene Blöcke stoppen ihren Ausführungspfad, beeinflussen aber keine unabhängigen Pfade
+5. **Zustandspersistenz**: Alle Blockausgaben und Ausführungsdetails werden für die Fehlerbehebung gespeichert
+
+## Nächste Schritte
+
+Nachdem Sie die Grundlagen der Ausführung verstanden haben, erkunden Sie:
+- **[Blocktypen](/blocks)** - Erfahren Sie mehr über spezifische Block-Funktionen
+- **[Protokollierung](/execution/logging)** - Überwachen Sie Workflow-Ausführungen und beheben Sie Probleme
+- **[Kostenberechnung](/execution/costs)** - Verstehen und optimieren Sie Workflow-Kosten
+- **[Trigger](/triggers)** - Richten Sie verschiedene Möglichkeiten ein, Ihre Workflows auszuführen

apps/docs/content/docs/de/execution/costs.mdx

@@ -0,0 +1,204 @@
+---
+title: Kostenberechnung
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Image } from '@/components/ui/image'
+
+Sim berechnet automatisch die Kosten für alle Workflow-Ausführungen und bietet transparente Preise basierend auf der Nutzung von KI-Modellen und Ausführungsgebühren. Das Verständnis dieser Kosten hilft Ihnen, Workflows zu optimieren und Ihr Budget effektiv zu verwalten.
+
+## Wie Kosten berechnet werden
+
+Jede Workflow-Ausführung umfasst zwei Kostenkomponenten:
+
+**Basis-Ausführungsgebühr**: 0,001 $ pro Ausführung
+
+**KI-Modellnutzung**: Variable Kosten basierend auf dem Token-Verbrauch
+
+```javascript
+modelCost = (inputTokens × inputPrice + outputTokens × outputPrice) / 1,000,000
+totalCost = baseExecutionCharge + modelCost
+```
+
+<Callout type="info">
+  KI-Modellpreise werden pro Million Token berechnet. Die Berechnung teilt durch 1.000.000, um die tatsächlichen Kosten zu ermitteln. Workflows ohne KI-Blöcke verursachen nur die Basis-Ausführungsgebühr.
+</Callout>
+
+## Modellaufschlüsselung in Logs
+
+Für Workflows mit KI-Blöcken können Sie detaillierte Kosteninformationen in den Logs einsehen:
+
+<div className="flex justify-center">
+  <Image
+    src="/static/logs/logs-cost.png"
+    alt="Modellaufschlüsselung"
+    width={600}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+Die Modellaufschlüsselung zeigt:
+- **Token-Nutzung**: Eingabe- und Ausgabe-Token-Anzahl für jedes Modell
+- **Kostenaufschlüsselung**: Einzelkosten pro Modell und Operation
+- **Modellverteilung**: Welche Modelle verwendet wurden und wie oft
+- **Gesamtkosten**: Gesamtkosten für die gesamte Workflow-Ausführung
+
+## Preisoptionen
+
+<Tabs items={['Gehostete Modelle', 'Eigener API-Schlüssel']}>
+  <Tab>
+    **Gehostete Modelle** - Sim stellt API-Schlüssel mit einem 2,5-fachen Preismultiplikator bereit:
+    
+    | Modell | Basispreis (Eingabe/Ausgabe) | Gehosteter Preis (Eingabe/Ausgabe) |
+    |-------|---------------------------|----------------------------|
+    | GPT-4o | 2,50 $ / 10,00 $ | 6,25 $ / 25,00 $ |
+    | GPT-4.1 | 2,00 $ / 8,00 $ | 5,00 $ / 20,00 $ |
+    | o1 | 15,00 $ / 60,00 $ | 37,50 $ / 150,00 $ |
+    | o3 | 2,00 $ / 8,00 $ | 5,00 $ / 20,00 $ |
+    | Claude 3.5 Sonnet | 3,00 $ / 15,00 $ | 7,50 $ / 37,50 $ |
+    | Claude Opus 4.0 | 15,00 $ / 75,00 $ | 37,50 $ / 187,50 $ |
+    
+    *Der 2,5-fache Multiplikator deckt Infrastruktur- und API-Verwaltungskosten ab.*
+  </Tab>
+  
+  <Tab>
+    **Ihre eigenen API-Schlüssel** - Nutzen Sie jedes Modell zum Basispreis:
+    
+    | Anbieter | Modelle | Eingabe / Ausgabe |
+    |----------|---------|----------------|
+    | Google | Gemini 2.5 | 0,15 $ / 0,60 $ |
+    | Deepseek | V3, R1 | 0,75 $ / 1,00 $ |
+    | xAI | Grok 4, Grok 3 | 5,00 $ / 25,00 $ |
+    | Groq | Llama 4 Scout | 0,40 $ / 0,60 $ |
+    | Cerebras | Llama 3.3 70B | 0,94 $ / 0,94 $ |
+    | Ollama | Lokale Modelle | Kostenlos |
+    
+    *Bezahlen Sie Anbieter direkt ohne Aufschlag*
+  </Tab>
+</Tabs>
+
+<Callout type="warning">
+  Die angezeigten Preise spiegeln die Tarife vom 10. September 2025 wider. Überprüfen Sie die Anbieterdokumentation für aktuelle Preise.
+</Callout>
+
+## Kostenoptimierungsstrategien
+
+- **Modellauswahl**: Wähle Modelle basierend auf der Komplexität der Aufgabe. Einfache Aufgaben können mit GPT-4.1-nano erledigt werden, während komplexes Denken möglicherweise o1 oder Claude Opus erfordert.
+- **Prompt-Engineering**: Gut strukturierte, präzise Prompts reduzieren den Token-Verbrauch ohne Qualitätseinbußen.
+- **Lokale Modelle**: Nutze Ollama für unkritische Aufgaben, um API-Kosten vollständig zu eliminieren.
+- **Caching und Wiederverwendung**: Speichere häufig verwendete Ergebnisse in Variablen oder Dateien, um wiederholte KI-Modellaufrufe zu vermeiden.
+- **Batch-Verarbeitung**: Verarbeite mehrere Elemente in einer einzigen KI-Anfrage anstatt einzelne Aufrufe zu tätigen.
+
+## Nutzungsüberwachung
+
+Überwachen Sie Ihre Nutzung und Abrechnung unter Einstellungen → Abonnement:
+
+- **Aktuelle Nutzung**: Echtzeit-Nutzung und Kosten für den aktuellen Zeitraum
+- **Nutzungslimits**: Plangrenzen mit visuellen Fortschrittsanzeigen
+- **Abrechnungsdetails**: Prognostizierte Gebühren und Mindestverpflichtungen
+- **Planverwaltung**: Upgrade-Optionen und Abrechnungsverlauf
+
+### Programmatische Nutzungsverfolgung
+
+Sie können Ihre aktuelle Nutzung und Limits programmatisch über die API abfragen:
+
+**Endpunkt:**
+
+```text
+GET /api/users/me/usage-limits
+```
+
+**Authentifizierung:**
+- Fügen Sie Ihren API-Schlüssel im `X-API-Key` Header hinzu
+
+**Beispielanfrage:**
+
+```bash
+curl -X GET -H "X-API-Key: YOUR_API_KEY" -H "Content-Type: application/json" https://sim.ai/api/users/me/usage-limits
+```
+
+**Beispielantwort:**
+
+```json
+{
+  "success": true,
+  "rateLimit": {
+    "sync": { "isLimited": false, "limit": 10, "remaining": 10, "resetAt": "2025-09-08T22:51:55.999Z" },
+    "async": { "isLimited": false, "limit": 50, "remaining": 50, "resetAt": "2025-09-08T22:51:56.155Z" },
+    "authType": "api"
+  },
+  "usage": {
+    "currentPeriodCost": 12.34,
+    "limit": 100,
+    "plan": "pro"
+  }
+}
+```
+
+**Antwortfelder:**
+- `currentPeriodCost` spiegelt die Nutzung im aktuellen Abrechnungszeitraum wider
+- `limit` wird aus individuellen Limits (Free/Pro) oder gepoolten Organisationslimits (Team/Enterprise) abgeleitet
+- `plan` ist der aktive Plan mit der höchsten Priorität, der mit Ihrem Benutzer verknüpft ist
+
+## Planlimits
+
+Verschiedene Abonnementpläne haben unterschiedliche Nutzungslimits:
+
+| Plan | Monatliches Nutzungslimit | Ratengrenze (pro Minute) |
+|------|-------------------|-------------------------|
+| **Free** | $10 | 5 sync, 10 async |
+| **Pro** | $100 | 10 sync, 50 async |
+| **Team** | $500 (gepoolt) | 50 sync, 100 async |
+| **Enterprise** | Individuell | Individuell |
+
+## Best Practices für Kostenmanagement
+
+1. **Regelmäßig überwachen**: Prüfen Sie Ihr Nutzungs-Dashboard häufig, um Überraschungen zu vermeiden
+2. **Budgets festlegen**: Nutzen Sie Planlimits als Leitplanken für Ihre Ausgaben
+3. **Workflows optimieren**: Überprüfen Sie kostenintensive Ausführungen und optimieren Sie Prompts oder Modellauswahl
+4. **Passende Modelle verwenden**: Stimmen Sie die Modellkomplexität auf die Aufgabenanforderungen ab
+5. **Ähnliche Aufgaben bündeln**: Kombinieren Sie wenn möglich mehrere Anfragen, um den Overhead zu reduzieren
+
+## Nächste Schritte
+
+- Überprüfen Sie Ihre aktuelle Nutzung unter [Einstellungen → Abonnement](https://sim.ai/settings/subscription)
+- Erfahren Sie mehr über [Logging](/execution/logging), um Ausführungsdetails zu verfolgen
+- Erkunden Sie die [Externe API](/execution/api) für programmatische Kostenüberwachung
+- Sehen Sie sich [Workflow-Optimierungstechniken](/blocks) an, um Kosten zu reduzieren
+
+**Team-Plan (40 $/Sitz/Monat):**
+- Gemeinsame Nutzung für alle Teammitglieder
+- Überschreitung wird anhand der Gesamtnutzung des Teams berechnet
+- Organisationsinhaber erhält eine Rechnung
+
+**Enterprise-Pläne:**
+- Fester monatlicher Preis, keine Überschreitungen
+- Benutzerdefinierte Nutzungslimits gemäß Vereinbarung
+
+### Schwellenwertabrechnung
+
+Wenn die nicht abgerechnete Überschreitung 50 $ erreicht, berechnet Sim automatisch den gesamten nicht abgerechneten Betrag.
+
+**Beispiel:**
+- Tag 10: 70 $ Überschreitung → Sofortige Abrechnung von 70 $
+- Tag 15: Zusätzliche Nutzung von 35 $ (insgesamt 105 $) → Bereits abgerechnet, keine Aktion
+- Tag 20: Weitere Nutzung von 50 $ (insgesamt 155 $, 85 $ nicht abgerechnet) → Sofortige Abrechnung von 85 $
+
+Dies verteilt hohe Überschreitungsgebühren über den Monat, anstatt eine große Rechnung am Ende des Abrechnungszeitraums zu stellen.
+
+## Best Practices für Kostenmanagement
+
+1. **Regelmäßige Überwachung**: Überprüfen Sie Ihr Nutzungs-Dashboard häufig, um Überraschungen zu vermeiden
+2. **Budgets festlegen**: Nutzen Sie Planlimits als Leitplanken für Ihre Ausgaben
+3. **Workflows optimieren**: Überprüfen Sie kostenintensive Ausführungen und optimieren Sie Prompts oder Modellauswahl
+4. **Geeignete Modelle verwenden**: Passen Sie die Modellkomplexität an die Aufgabenanforderungen an
+5. **Ähnliche Aufgaben bündeln**: Kombinieren Sie wenn möglich mehrere Anfragen, um den Overhead zu reduzieren
+
+## Nächste Schritte
+
+- Überprüfen Sie Ihre aktuelle Nutzung unter [Einstellungen → Abonnement](https://sim.ai/settings/subscription)
+- Erfahren Sie mehr über [Protokollierung](/execution/logging), um Ausführungsdetails zu verfolgen
+- Erkunden Sie die [externe API](/execution/api) für programmatische Kostenüberwachung
+- Sehen Sie sich [Workflow-Optimierungstechniken](/blocks) zur Kostenreduzierung an

apps/docs/content/docs/de/execution/index.mdx

@@ -0,0 +1,115 @@
+---
+title: Übersicht
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Card, Cards } from 'fumadocs-ui/components/card'
+import { Image } from '@/components/ui/image'
+
+Die Ausführungs-Engine von Sim bringt Ihre Workflows zum Leben, indem sie Blöcke in der richtigen Reihenfolge verarbeitet, den Datenfluss verwaltet und Fehler elegant behandelt, sodass Sie genau verstehen können, wie Workflows in Sim ausgeführt werden.
+
+<Callout type="info">
+  Jede Workflow-Ausführung folgt einem deterministischen Pfad, der auf Ihren Blockverbindungen und Ihrer Logik basiert, um vorhersehbare und zuverlässige Ergebnisse zu gewährleisten.
+</Callout>
+
+## Dokumentationsübersicht
+
+<Cards>
+  <Card title="Grundlagen der Ausführung" href="/execution/basics">
+    Erfahren Sie mehr über den grundlegenden Ausführungsablauf, Blocktypen und wie Daten durch Ihren
+    Workflow fließen
+  </Card>
+
+  <Card title="Protokollierung" href="/execution/logging">
+    Überwachen Sie Workflow-Ausführungen mit umfassender Protokollierung und Echtzeit-Sichtbarkeit
+  </Card>
+  
+  <Card title="Kostenberechnung" href="/execution/costs">
+    Verstehen Sie, wie die Kosten für Workflow-Ausführungen berechnet und optimiert werden
+  </Card>
+  
+  <Card title="Externe API" href="/execution/api">
+    Greifen Sie programmgesteuert über REST-API auf Ausführungsprotokolle zu und richten Sie Webhooks ein
+  </Card>
+</Cards>
+
+## Schlüsselkonzepte
+
+### Topologische Ausführung
+Blöcke werden in Abhängigkeitsreihenfolge ausgeführt, ähnlich wie eine Tabellenkalkulation Zellen neu berechnet. Die Ausführungs-Engine bestimmt automatisch, welche Blöcke basierend auf abgeschlossenen Abhängigkeiten ausgeführt werden können.
+
+### Pfadverfolgung
+Die Engine verfolgt aktiv Ausführungspfade durch Ihren Workflow. Router- und Bedingungsblöcke aktualisieren diese Pfade dynamisch und stellen sicher, dass nur relevante Blöcke ausgeführt werden.
+
+### Schichtbasierte Verarbeitung
+Anstatt Blöcke einzeln auszuführen, identifiziert die Engine Schichten von Blöcken, die parallel ausgeführt werden können, und optimiert so die Leistung für komplexe Workflows.
+
+### Ausführungskontext
+Jeder Workflow behält während der Ausführung einen umfangreichen Kontext bei, der Folgendes enthält:
+- Block-Ausgaben und -Zustände
+- Aktive Ausführungspfade
+- Verfolgung von Schleifen- und Paralleliterationen
+- Umgebungsvariablen
+- Routing-Entscheidungen
+
+## Deployment-Snapshots
+
+Alle öffentlichen Einstiegspunkte – API, Chat, Zeitplan, Webhook und manuelle Ausführungen – führen den aktiven Deployment-Snapshot des Workflows aus. Veröffentliche ein neues Deployment, wann immer du die Arbeitsfläche änderst, damit jeder Auslöser die aktualisierte Version verwendet.
+
+<div className='flex justify-center my-6'>
+  <Image
+    src='/static/execution/deployment-versions.png'
+    alt='Tabelle mit Deployment-Versionen'
+    width={500}
+    height={280}
+    className='rounded-xl border border-border shadow-sm'
+  />
+</div>
+
+Das Deploy-Modal behält eine vollständige Versionshistorie bei – untersuche jeden Snapshot, vergleiche ihn mit deinem Entwurf und führe Upgrades oder Rollbacks mit einem Klick durch, wenn du eine frühere Version wiederherstellen musst.
+
+## Programmatische Ausführung
+
+Führe Workflows aus deinen Anwendungen heraus mit unseren offiziellen SDKs aus:
+
+```bash
+# TypeScript/JavaScript
+npm install simstudio-ts-sdk
+
+# Python
+pip install simstudio-sdk
+```
+
+```typescript
+// TypeScript Example
+import { SimStudioClient } from 'simstudio-ts-sdk';
+
+const client = new SimStudioClient({ 
+  apiKey: 'your-api-key' 
+});
+
+const result = await client.executeWorkflow('workflow-id', {
+  input: { message: 'Hello' }
+});
+```
+
+## Best Practices
+
+### Design für Zuverlässigkeit
+- Behandle Fehler elegant mit geeigneten Fallback-Pfaden
+- Verwende Umgebungsvariablen für sensible Daten
+- Füge Logging zu Funktionsblöcken für Debugging hinzu
+
+### Optimiere Performance
+- Minimiere externe API-Aufrufe wo möglich
+- Nutze parallele Ausführung für unabhängige Operationen
+- Cache Ergebnisse mit Memory-Blöcken wenn angemessen
+
+### Überwache Ausführungen
+- Überprüfe Logs regelmäßig, um Leistungsmuster zu verstehen
+- Verfolge Kosten für KI-Modellnutzung
+- Verwende Workflow-Snapshots zur Fehlerbehebung
+
+## Was kommt als nächstes?
+
+Beginne mit [Ausführungsgrundlagen](/execution/basics), um zu verstehen, wie Workflows laufen, und erkunde dann [Logging](/execution/logging), um deine Ausführungen zu überwachen, sowie [Kostenberechnung](/execution/costs), um deine Ausgaben zu optimieren.

apps/docs/content/docs/de/execution/logging.mdx

@@ -0,0 +1,150 @@
+---
+title: Protokollierung
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import { Image } from '@/components/ui/image'
+
+Sim bietet umfassende Protokollierung für alle Workflow-Ausführungen und gibt Ihnen vollständige Transparenz darüber, wie Ihre Workflows laufen, welche Daten durch sie fließen und wo möglicherweise Probleme auftreten.
+
+## Protokollierungssystem
+
+Sim bietet zwei komplementäre Protokollierungsschnittstellen, die verschiedenen Workflows und Anwendungsfällen entsprechen:
+
+### Echtzeit-Konsole
+
+Während der manuellen oder Chat-Workflow-Ausführung erscheinen Protokolle in Echtzeit im Konsolen-Panel auf der rechten Seite des Workflow-Editors:
+
+<div className="flex justify-center">
+  <Image
+    src="/static/logs/console.png"
+    alt="Echtzeit-Konsolen-Panel"
+    width={400}
+    height={300}
+    className="my-6"
+  />
+</div>
+
+Die Konsole zeigt:
+- Fortschritt der Blockausführung mit Hervorhebung des aktiven Blocks
+- Echtzeit-Ausgaben nach Abschluss der Blöcke
+- Ausführungszeit für jeden Block
+- Erfolgs-/Fehlerstatusanzeigen
+
+### Protokollseite
+
+Alle Workflow-Ausführungen – ob manuell ausgelöst, über API, Chat, Zeitplan oder Webhook – werden auf der dedizierten Protokollseite protokolliert:
+
+<div className="flex justify-center">
+  <Image
+    src="/static/logs/logs.png"
+    alt="Protokollseite"
+    width={600}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+Die Protokollseite bietet:
+- Umfassende Filterung nach Zeitraum, Status, Auslösertyp, Ordner und Workflow
+- Suchfunktion über alle Protokolle
+- Live-Modus für Echtzeit-Updates
+- 7-tägige Protokollaufbewahrung (erweiterbar für längere Aufbewahrung)
+
+## Protokolldetails-Seitenleiste
+
+Durch Klicken auf einen Protokolleintrag öffnet sich eine detaillierte Seitenleistenansicht:
+
+<div className="flex justify-center">
+  <Image
+    src="/static/logs/logs-sidebar.png"
+    alt="Protokoll-Seitenleiste mit Details"
+    width={600}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+### Block-Eingabe/Ausgabe
+
+Sehen Sie den vollständigen Datenfluss für jeden Block mit Tabs zum Umschalten zwischen:
+
+<Tabs items={['Output', 'Input']}>
+  <Tab>
+    **Output-Tab** zeigt das Ausführungsergebnis des Blocks:
+    - Strukturierte Daten mit JSON-Formatierung
+    - Markdown-Rendering für KI-generierte Inhalte
+    - Kopierschaltfläche für einfache Datenextraktion
+  </Tab>
+  
+  <Tab>
+    **Input-Tab** zeigt, was an den Block übergeben wurde:
+    - Aufgelöste Variablenwerte
+    - Referenzierte Ausgaben anderer Blöcke
+    - Verwendete Umgebungsvariablen
+    - API-Schlüssel werden aus Sicherheitsgründen automatisch unkenntlich gemacht
+  </Tab>
+</Tabs>
+
+### Ausführungszeitlinie
+
+Für Workflow-übergreifende Protokolle, sehen Sie detaillierte Ausführungsmetriken:
+- Start- und Endzeitstempel
+- Gesamtdauer des Workflows
+- Ausführungszeiten einzelner Blöcke
+- Identifikation von Leistungsengpässen
+
+## Workflow-Snapshots
+
+Für jede protokollierte Ausführung klicken Sie auf "Snapshot anzeigen", um den exakten Workflow-Zustand zum Ausführungszeitpunkt zu sehen:
+
+<div className="flex justify-center">
+  <Image
+    src="/static/logs/logs-frozen-canvas.png"
+    alt="Workflow-Snapshot"
+    width={600}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+Der Snapshot bietet:
+- Eingefrorene Arbeitsfläche, die die Workflow-Struktur zeigt
+- Block-Zustände und Verbindungen, wie sie während der Ausführung waren
+- Klicken Sie auf einen beliebigen Block, um dessen Ein- und Ausgaben zu sehen
+- Nützlich zum Debuggen von Workflows, die seitdem geändert wurden
+
+<Callout type="info">
+  Workflow-Snapshots sind nur für Ausführungen verfügbar, die nach der Einführung des erweiterten Protokollierungssystems durchgeführt wurden. Ältere migrierte Protokolle zeigen die Meldung "Protokollierter Zustand nicht gefunden".
+</Callout>
+
+## Protokollaufbewahrung
+
+- **Kostenloser Plan**: 7 Tage Protokollaufbewahrung
+- **Pro-Plan**: 30 Tage Protokollaufbewahrung
+- **Team-Plan**: 90 Tage Protokollaufbewahrung
+- **Enterprise-Plan**: Individuelle Aufbewahrungszeiträume verfügbar
+
+## Best Practices
+
+### Für die Entwicklung
+- Verwenden Sie die Echtzeit-Konsole für sofortiges Feedback während des Testens
+- Überprüfen Sie Block-Ein- und Ausgaben, um den Datenfluss zu verifizieren
+- Nutzen Sie Workflow-Snapshots, um funktionierende mit fehlerhaften Versionen zu vergleichen
+
+### Für die Produktion
+- Überwachen Sie die Protokollseite regelmäßig auf Fehler oder Leistungsprobleme
+- Richten Sie Filter ein, um sich auf bestimmte Workflows oder Zeiträume zu konzentrieren
+- Verwenden Sie den Live-Modus während kritischer Bereitstellungen, um Ausführungen in Echtzeit zu beobachten
+
+### Für das Debugging
+- Überprüfen Sie immer die Ausführungszeitlinie, um langsame Blöcke zu identifizieren
+- Vergleichen Sie Eingaben zwischen funktionierenden und fehlerhaften Ausführungen
+- Verwenden Sie Workflow-Snapshots, um den genauen Zustand zu sehen, wenn Probleme aufgetreten sind
+
+## Nächste Schritte
+
+- Erfahren Sie mehr über die [Kostenberechnung](/execution/costs), um die Preisgestaltung von Workflows zu verstehen
+- Erkunden Sie die [externe API](/execution/api) für programmatischen Zugriff auf Protokolle
+- Richten Sie [Webhook-Benachrichtigungen](/execution/api#webhook-subscriptions) für Echtzeit-Warnungen ein

apps/docs/content/docs/de/getting-started/index.mdx

@@ -0,0 +1,196 @@
+---
+title: Erste Schritte
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Card, Cards } from 'fumadocs-ui/components/card'
+import { File, Files, Folder } from 'fumadocs-ui/components/files'
+import { Step, Steps } from 'fumadocs-ui/components/steps'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+import {
+  AgentIcon,
+  ApiIcon,
+  ChartBarIcon,
+  CodeIcon,
+  ConditionalIcon,
+  ConnectIcon,
+  ExaAIIcon,
+  FirecrawlIcon,
+  GmailIcon,
+  NotionIcon,
+  PerplexityIcon,
+  SlackIcon,
+} from '@/components/icons'
+import { Video } from '@/components/ui/video'
+import { Image } from '@/components/ui/image'
+
+Erstelle deinen ersten KI-Workflow in 10 Minuten. In diesem Tutorial wirst du einen Personenrecherche-Agenten erstellen, der fortschrittliche LLM-gestützte Suchwerkzeuge nutzt, um Informationen über Personen zu extrahieren und zu strukturieren.
+
+<Callout type="info">
+  Dieses Tutorial behandelt die wesentlichen Konzepte zum Erstellen von Workflows in Sim. Geschätzte Bearbeitungszeit: 10 Minuten.
+</Callout>
+
+## Was du erstellen wirst
+
+Einen Personenrecherche-Agenten, der:
+1. Benutzereingaben über eine Chat-Schnittstelle akzeptiert
+2. Das Web mit KI-gestützten Tools durchsucht (Exa und Linkup)
+3. Informationen über Personen extrahiert und strukturiert
+4. Formatierte JSON-Daten mit Standort, Beruf und Ausbildung zurückgibt
+
+<Image
+  src="/static/getting-started/started-1.png"
+  alt="Beispiel für erste Schritte"
+  width={800}
+  height={500}
+/>
+
+## Schritt-für-Schritt-Anleitung
+
+<Steps>
+  <Step title="Workflow erstellen und einen KI-Agenten hinzufügen">
+    Klicke im Dashboard auf **Neuer Workflow** und benenne ihn "Getting Started".
+    
+    Jeder neue Workflow enthält standardmäßig einen **Start-Block** – dies ist der Eingangspunkt, der Benutzereingaben empfängt. Da wir diesen Workflow über Chat auslösen werden, ist keine Konfiguration für den Start-Block erforderlich.
+    
+    Ziehe einen **Agenten-Block** aus dem linken Bereich auf die Arbeitsfläche und konfiguriere ihn:
+    - **Modell**: Wähle "OpenAI GPT-4o"
+    - **System-Prompt**: "Du bist ein Personenrecherche-Agent. Wenn dir ein Name einer Person gegeben wird, nutze deine verfügbaren Suchwerkzeuge, um umfassende Informationen über sie zu finden, einschließlich ihres Standorts, Berufs, Bildungshintergrunds und anderer relevanter Details."
+    - **Benutzer-Prompt**: Ziehe die Verbindung vom Ausgabefeld des Start-Blocks in dieses Feld, um `<start.input>` mit dem Benutzer-Prompt zu verbinden
+    
+    <div className="mx-auto w-full overflow-hidden rounded-lg">
+      <Video src="getting-started/started-2.mp4" width={700} height={450} />
+    </div>
+  </Step>
+  
+  <Step title="Suchwerkzeuge zum Agenten hinzufügen">
+    Erweitere deinen Agenten mit Websuche-Funktionen. Klicke auf den Agenten-Block, um ihn auszuwählen.
+    
+    Im Bereich **Tools**:
+    - Klicke auf **Tool hinzufügen**
+    - Wähle **Exa** und **Linkup** aus den verfügbaren Tools
+    - Gib deine API-Schlüssel für beide Tools ein, um Websuche und Datenzugriff zu ermöglichen
+    
+    <div className="mx-auto w-3/5 overflow-hidden rounded-lg">
+      <Video src="getting-started/started-3.mp4" width={700} height={450} />
+    </div>
+  </Step>
+  
+  <Step title="Workflow testen">
+    Teste deinen Workflow mit dem **Chat-Panel** auf der rechten Seite des Bildschirms.
+    
+    Im Chat-Panel:
+    - Klicke auf das Dropdown-Menü und wähle `agent1.content`, um die Ausgabe des Agenten anzuzeigen
+    - Gib eine Testnachricht ein: "John ist ein Softwareentwickler aus San Francisco, der Informatik an der Stanford University studiert hat."
+    - Klicke auf **Senden**, um den Workflow auszuführen
+    
+    Der Agent wird die Person analysieren und strukturierte Informationen zurückgeben.
+    
+    <div className="mx-auto w-full overflow-hidden rounded-lg">
+      <Video src="getting-started/started-4.mp4" width={700} height={450} />
+    </div>
+  </Step>
+  
+  <Step title="Strukturierte Ausgabe konfigurieren">
+    Konfiguriere deinen Agenten, um strukturierte JSON-Daten zurückzugeben. Klicke auf den Agenten-Block, um ihn auszuwählen.
+    
+    Im Bereich **Antwortformat**:
+    - Klicke auf das **Zauberstab-Symbol** (✨) neben dem Schema-Feld
+    - Gib den Prompt ein: "Erstelle ein Schema namens person, das Standort, Beruf und Ausbildung enthält"
+    - Die KI wird automatisch das JSON-Schema generieren
+    
+    <div className="mx-auto w-full overflow-hidden rounded-lg">
+      <Video src="getting-started/started-5.mp4" width={700} height={450} />
+    </div>
+  </Step>
+  
+  <Step title="Mit strukturierter Ausgabe testen">
+    Kehre zum **Chat-Panel** zurück, um das strukturierte Antwortformat zu testen.
+    
+    Mit dem konfigurierten Antwortformat sind jetzt neue Ausgabeoptionen verfügbar:
+    - Klicke auf das Dropdown-Menü und wähle die Option für strukturierte Ausgabe (das Schema, das du gerade erstellt hast)
+    - Gib eine Testnachricht ein: "Sarah ist eine Marketing-Managerin aus New York mit einem MBA von der Harvard Business School."
+    - Klicke auf **Senden**, um den Workflow auszuführen
+    
+    Der Agent wird nun strukturierte JSON-Ausgabe zurückgeben, wobei die Informationen der Person in die Felder Standort, Beruf und Ausbildung organisiert sind.
+    
+    <div className="mx-auto w-full overflow-hidden rounded-lg">
+      <Video src="getting-started/started-6.mp4" width={700} height={450} />
+    </div>
+  </Step>
+</Steps>
+
+## Was du erstellt hast
+
+Du hast erfolgreich einen KI-Workflow erstellt, der:
+- ✅ Benutzereingaben über eine Chat-Schnittstelle akzeptiert
+- ✅ Unstrukturierten Text mit KI verarbeitet
+- ✅ Externe Suchwerkzeuge integriert (Exa und Linkup)
+- ✅ Strukturierte JSON-Daten mit KI-generierten Schemas zurückgibt
+- ✅ Echtzeit-Tests und Iteration demonstriert
+- ✅ Die Leistungsfähigkeit der visuellen, codefreien Entwicklung zeigt
+
+## Wichtige Konzepte, die du gelernt hast
+
+### Verwendete Block-Typen
+
+<Files>
+  <File
+    name="Start Block"
+    icon={<ConnectIcon className="h-4 w-4" />}
+    annotation="Einstiegspunkt für Benutzereingaben (automatisch enthalten)"
+  />
+  <File
+    name="Agent Block"
+    icon={<AgentIcon className="h-4 w-4" />}
+    annotation="KI-Modell für Textverarbeitung und -analyse"
+  />
+</Files>
+
+### Grundlegende Workflow-Konzepte
+
+**Datenfluss**  
+Verbinde Blöcke durch Ziehen von Verbindungen, um Daten zwischen Workflow-Schritten zu übertragen
+
+**Chat-Schnittstelle**  
+Teste Workflows in Echtzeit mit dem Chat-Panel und wähle verschiedene Ausgabeoptionen
+
+**Tool-Integration**  
+Erweitere die Fähigkeiten des Agenten durch Integration externer Dienste wie Exa und Linkup
+
+**Variablenreferenzen**  
+Greife auf Block-Ausgaben mit der `<blockName.output>` Syntax zu
+
+**Strukturierte Ausgabe**  
+Definiere JSON-Schemas, um konsistente, formatierte Antworten von der KI zu gewährleisten
+
+**KI-generierte Schemas**  
+Verwende den Zauberstab (✨), um Schemas aus natürlichsprachigen Eingabeaufforderungen zu generieren
+
+**Iterative Entwicklung**  
+Erstelle, teste und verfeinere Workflows schnell mit sofortigem Feedback
+
+## Nächste Schritte
+
+<Cards>
+  <Card title="Workflow-Blöcke erkunden" href="/blocks">
+    Entdecke API-, Funktions-, Bedingungs- und andere Workflow-Blöcke
+  </Card>
+  <Card title="Integrationen durchsuchen" href="/tools">
+    Verbinde über 80 Dienste einschließlich Gmail, Slack, Notion und mehr
+  </Card>
+  <Card title="Benutzerdefinierte Logik hinzufügen" href="/blocks/function">
+    Schreibe benutzerdefinierte Funktionen für fortgeschrittene Datenverarbeitung
+  </Card>
+  <Card title="Deinen Workflow bereitstellen" href="/execution">
+    Mache deinen Workflow über REST API oder Webhooks zugänglich
+  </Card>
+</Cards>
+
+## Ressourcen
+
+**Brauchst du detaillierte Erklärungen?** Besuche die [Blocks-Dokumentation](/blocks) für umfassende Anleitungen zu jeder Komponente.
+
+**Suchst du nach Integrationen?** Erkunde die [Tools-Dokumentation](/tools), um alle 80+ verfügbaren Integrationen zu sehen.
+
+**Bereit für den Livebetrieb?** Erfahre mehr über [Ausführung und Bereitstellung](/execution), um deine Workflows produktionsreif zu machen.

apps/docs/content/docs/de/index.mdx

@@ -0,0 +1,57 @@
+---
+title: Dokumentation
+---
+
+import { Card, Cards } from 'fumadocs-ui/components/card'
+
+# Sim Dokumentation
+
+Willkommen bei Sim, einem visuellen Workflow-Builder für KI-Anwendungen. Erstellen Sie leistungsstarke KI-Agenten, Automatisierungs-Workflows und Datenverarbeitungs-Pipelines, indem Sie Blöcke auf einer Leinwand verbinden.
+
+## Schnellstart
+
+<Cards>
+  <Card title="Einführung" href="/introduction">
+    Erfahren Sie, was Sie mit Sim erstellen können
+  </Card>
+  <Card title="Erste Schritte" href="/getting-started">
+    Erstellen Sie Ihren ersten Workflow in 10 Minuten
+  </Card>
+  <Card title="Workflow-Blöcke" href="/blocks">
+    Lernen Sie die Bausteine kennen
+  </Card>
+  <Card title="Tools & Integrationen" href="/tools">
+    Entdecken Sie über 80 integrierte Schnittstellen
+  </Card>
+</Cards>
+
+## Kernkonzepte
+
+<Cards>
+  <Card title="Verbindungen" href="/connections">
+    Verstehen Sie, wie Daten zwischen Blöcken fließen
+  </Card>
+  <Card title="Variablen" href="/variables">
+    Arbeiten Sie mit Workflow- und Umgebungsvariablen
+  </Card>
+  <Card title="Ausführung" href="/execution">
+    Überwachen Sie Workflow-Ausführungen und verwalten Sie Kosten
+  </Card>
+  <Card title="Trigger" href="/triggers">
+    Starten Sie Workflows über API, Webhooks oder Zeitpläne
+  </Card>
+</Cards>
+
+## Erweiterte Funktionen
+
+<Cards>
+  <Card title="Team-Management" href="/permissions/roles-and-permissions">
+    Workspace-Rollen und Berechtigungen einrichten
+  </Card>
+  <Card title="MCP-Integration" href="/mcp">
+    Externe Dienste mit dem Model Context Protocol verbinden
+  </Card>
+  <Card title="SDKs" href="/sdks">
+    Sim in Ihre Anwendungen integrieren
+  </Card>
+</Cards>

apps/docs/content/docs/de/introduction/index.mdx

@@ -0,0 +1,87 @@
+---
+title: Einführung
+---
+
+import { Card, Cards } from 'fumadocs-ui/components/card'
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Image } from '@/components/ui/image'
+
+Sim ist ein Open-Source-Tool zur visuellen Workflow-Erstellung für die Entwicklung und Bereitstellung von KI-Agenten-Workflows. Entwerfen Sie intelligente Automatisierungssysteme mit einer No-Code-Oberfläche – verbinden Sie KI-Modelle, Datenbanken, APIs und Business-Tools über eine intuitive Drag-and-Drop-Oberfläche. Ob Sie Chatbots entwickeln, Geschäftsprozesse automatisieren oder komplexe Datenpipelines orchestrieren – Sim bietet die Werkzeuge, um Ihre KI-Workflows zum Leben zu erwecken.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/introduction.png"
+    alt="Sim visuelle Workflow-Leinwand"
+    width={700}
+    height={450}
+    className="my-6"
+  />
+</div>
+
+## Was Sie erstellen können
+
+**KI-Assistenten & Chatbots**  
+Entwickeln Sie intelligente Konversationsagenten, die sich in Ihre Tools und Daten integrieren lassen. Ermöglichen Sie Funktionen wie Websuche, Kalenderverwaltung, E-Mail-Automatisierung und nahtlose Interaktion mit Geschäftssystemen.
+
+**Automatisierung von Geschäftsprozessen**  
+Beseitigen Sie manuelle Aufgaben in Ihrer gesamten Organisation. Automatisieren Sie Dateneingaben, erstellen Sie Berichte, beantworten Sie Kundenanfragen und optimieren Sie Workflows zur Inhaltserstellung.
+
+**Datenverarbeitung & -analyse**  
+Verwandeln Sie Rohdaten in umsetzbare Erkenntnisse. Extrahieren Sie Informationen aus Dokumenten, führen Sie Datensatzanalysen durch, erstellen Sie automatisierte Berichte und synchronisieren Sie Daten über verschiedene Plattformen hinweg.
+
+**API-Integrations-Workflows**  
+Orchestieren Sie komplexe Interaktionen zwischen mehreren Diensten. Erstellen Sie einheitliche API-Endpunkte, implementieren Sie anspruchsvolle Geschäftslogik und bauen Sie ereignisgesteuerte Automatisierungssysteme.
+
+## Wie es funktioniert
+
+**Visueller Workflow-Editor**  
+Entwerfen Sie Workflows mit einer intuitiven Drag-and-Drop-Oberfläche. Verbinden Sie KI-Modelle, Datenbanken, APIs und Drittanbieterdienste über eine visuelle No-Code-Schnittstelle, die komplexe Automatisierungslogik leicht verständlich und wartbar macht.
+
+**Modulares Blocksystem**  
+Bauen Sie mit spezialisierten Komponenten: Verarbeitungsblöcke (KI-Agenten, API-Aufrufe, benutzerdefinierte Funktionen), Logikblöcke (bedingte Verzweigungen, Schleifen, Router) und Ausgabeblöcke (Antworten, Evaluatoren). Jeder Block übernimmt eine bestimmte Aufgabe in Ihrem Workflow.
+
+**Flexible Ausführungsauslöser**  
+Starten Sie Workflows über verschiedene Kanäle, darunter Chat-Schnittstellen, REST-APIs, Webhooks, geplante Cron-Jobs oder externe Ereignisse von Plattformen wie Slack und GitHub.
+
+**Echtzeit-Zusammenarbeit**  
+Ermöglichen Sie Ihrem Team die gemeinsame Entwicklung. Mehrere Benutzer können Workflows gleichzeitig bearbeiten, mit Live-Updates und granularen Berechtigungskontrollen.
+
+## Integrationen
+
+Sim bietet native Integrationen mit über 80 Diensten in verschiedenen Kategorien:
+
+- **KI-Modelle**: OpenAI, Anthropic, Google Gemini, Groq, Cerebras, lokale Modelle über Ollama
+- **Kommunikation**: Gmail, Slack, Microsoft Teams, Telegram, WhatsApp  
+- **Produktivität**: Notion, Google Workspace, Airtable, Monday.com
+- **Entwicklung**: GitHub, Jira, Linear, automatisierte Browser-Tests
+- **Suche & Daten**: Google Search, Perplexity, Firecrawl, Exa AI
+- **Datenbanken**: PostgreSQL, MySQL, Supabase, Pinecone, Qdrant
+
+Für benutzerdefinierte Integrationen nutzen Sie unsere [MCP (Model Context Protocol) Unterstützung](/mcp), um beliebige externe Dienste oder Tools anzubinden.
+
+## Bereitstellungsoptionen
+
+**Cloud-Hosting**  
+Starten Sie sofort bei [sim.ai](https://sim.ai) mit vollständig verwalteter Infrastruktur, automatischer Skalierung und integrierter Beobachtbarkeit. Konzentrieren Sie sich auf den Aufbau von Workflows, während wir den Betrieb übernehmen.
+
+**Self-Hosting**  
+Stellen Sie die Lösung auf Ihrer eigenen Infrastruktur mit Docker Compose oder Kubernetes bereit. Behalten Sie die vollständige Kontrolle über Ihre Daten mit Unterstützung für lokale KI-Modelle durch Ollama-Integration.
+
+## Nächste Schritte
+
+Bereit, Ihren ersten KI-Workflow zu erstellen?
+
+<Cards>
+  <Card title="Erste Schritte" href="/getting-started">
+    Erstellen Sie Ihren ersten Workflow in 10 Minuten
+  </Card>
+  <Card title="Workflow-Bausteine" href="/blocks">
+    Erfahren Sie mehr über die Bausteine
+  </Card>
+  <Card title="Tools & Integrationen" href="/tools">
+    Entdecken Sie über 80 integrierte Integrationen
+  </Card>
+  <Card title="Team-Berechtigungen" href="/permissions/roles-and-permissions">
+    Richten Sie Workspace-Rollen und Berechtigungen ein
+  </Card>
+</Cards>

apps/docs/content/docs/de/knowledgebase/index.mdx

@@ -0,0 +1,113 @@
+---
+title: Wissensdatenbank
+---
+
+import { Video } from '@/components/ui/video'
+import { Image } from '@/components/ui/image'
+
+Die Wissensdatenbank ermöglicht es Ihnen, Ihre Dokumente hochzuladen, zu verarbeiten und mit intelligenter Vektorsuche und Chunking zu durchsuchen. Dokumente verschiedener Typen werden automatisch verarbeitet, eingebettet und durchsuchbar gemacht. Ihre Dokumente werden intelligent in Chunks aufgeteilt, und Sie können sie mit natürlichsprachlichen Abfragen anzeigen, bearbeiten und durchsuchen.
+
+## Upload und Verarbeitung
+
+Laden Sie einfach Ihre Dokumente hoch, um zu beginnen. Sim verarbeitet sie automatisch im Hintergrund, extrahiert Text, erstellt Embeddings und teilt sie in durchsuchbare Chunks auf.
+
+<div className="mx-auto w-full overflow-hidden rounded-lg">
+  <Video src="knowledgebase-1.mp4" width={700} height={450} />
+</div>
+
+Das System übernimmt den gesamten Verarbeitungsprozess für Sie:
+
+1. **Textextraktion**: Inhalte werden aus Ihren Dokumenten mit spezialisierten Parsern für jeden Dateityp extrahiert
+2. **Intelligentes Chunking**: Dokumente werden in sinnvolle Chunks mit konfigurierbarer Größe und Überlappung aufgeteilt
+3. **Embedding-Generierung**: Vektoreinbettungen werden für semantische Suchfunktionen erstellt
+4. **Verarbeitungsstatus**: Verfolgen Sie den Fortschritt während Ihre Dokumente verarbeitet werden
+
+## Unterstützte Dateitypen
+
+Sim unterstützt PDF, Word (DOC/DOCX), Klartext (TXT), Markdown (MD), HTML, Excel (XLS/XLSX), PowerPoint (PPT/PPTX) und CSV-Dateien. Dateien können bis zu 100MB groß sein, wobei die optimale Leistung bei Dateien unter 50MB liegt. Sie können mehrere Dokumente gleichzeitig hochladen, und PDF-Dateien werden mit OCR-Verarbeitung für gescannte Dokumente unterstützt.
+
+## Anzeigen und Bearbeiten von Chunks
+
+Sobald Ihre Dokumente verarbeitet sind, können Sie die einzelnen Chunks anzeigen und bearbeiten. Dies gibt Ihnen volle Kontrolle darüber, wie Ihre Inhalte organisiert und durchsucht werden.
+
+<Image src="/static/knowledgebase/knowledgebase.png" alt="Dokumentchunk-Ansicht mit verarbeiteten Inhalten" width={800} height={500} />
+
+### Chunk-Konfiguration
+- **Standardgröße der Chunks**: 1.024 Zeichen
+- **Konfigurierbarer Bereich**: 100-4.000 Zeichen pro Chunk
+- **Intelligente Überlappung**: Standardmäßig 200 Zeichen zur Kontexterhaltung
+- **Hierarchische Aufteilung**: Respektiert Dokumentstruktur (Abschnitte, Absätze, Sätze)
+
+### Bearbeitungsfunktionen
+- **Chunk-Inhalt bearbeiten**: Textinhalt einzelner Chunks ändern
+- **Chunk-Grenzen anpassen**: Chunks bei Bedarf zusammenführen oder teilen
+- **Metadaten hinzufügen**: Chunks mit zusätzlichem Kontext anreichern
+- **Massenoperationen**: Effiziente Verwaltung mehrerer Chunks
+
+## Erweiterte PDF-Verarbeitung
+
+Für PDF-Dokumente bietet Sim erweiterte Verarbeitungsfunktionen:
+
+### OCR-Unterstützung
+Bei Konfiguration mit Azure oder [Mistral OCR](https://docs.mistral.ai/ocr/):
+- **Verarbeitung gescannter Dokumente**: Text aus bildbasierten PDFs extrahieren
+- **Umgang mit gemischten Inhalten**: Verarbeitung von PDFs mit Text und Bildern
+- **Hohe Genauigkeit**: Fortschrittliche KI-Modelle gewährleisten präzise Textextraktion
+
+## Verwendung des Wissensblocks in Workflows
+
+Sobald Ihre Dokumente verarbeitet sind, können Sie sie in Ihren KI-Workflows über den Wissensblock nutzen. Dies ermöglicht Retrieval-Augmented Generation (RAG), wodurch Ihre KI-Agenten auf Ihre Dokumentinhalte zugreifen und darüber nachdenken können, um genauere, kontextbezogene Antworten zu liefern.
+
+<Image src="/static/knowledgebase/knowledgebase-2.png" alt="Verwendung des Wissensblocks in Workflows" width={800} height={500} />
+
+### Funktionen des Wissensblocks
+- **Semantische Suche**: Relevante Inhalte mit natürlichsprachlichen Abfragen finden
+- **Kontextintegration**: Automatisches Einbinden relevanter Chunks in Agenten-Prompts
+- **Dynamischer Abruf**: Suche erfolgt in Echtzeit während der Workflow-Ausführung
+- **Relevanzbewertung**: Ergebnisse nach semantischer Ähnlichkeit geordnet
+
+### Integrationsoptionen
+- **System-Prompts**: Kontext für Ihre KI-Agenten bereitstellen
+- **Dynamischer Kontext**: Suche und Einbindung relevanter Informationen während Gesprächen
+- **Dokumentübergreifende Suche**: Abfrage über Ihre gesamte Wissensdatenbank
+- **Gefilterte Suche**: Kombination mit Tags für präzisen Inhaltsabruf
+
+## Vektorsuchtechnologie
+
+Sim verwendet Vektorsuche, die von [pgvector](https://github.com/pgvector/pgvector) unterstützt wird, um die Bedeutung und den Kontext Ihrer Inhalte zu verstehen:
+
+### Semantisches Verständnis
+- **Kontextuelle Suche**: Findet relevante Inhalte, auch wenn exakte Schlüsselwörter nicht übereinstimmen
+- **Konzeptbasierte Abfrage**: Versteht Beziehungen zwischen Ideen
+- **Mehrsprachige Unterstützung**: Funktioniert über verschiedene Sprachen hinweg
+- **Synonymerkennung**: Findet verwandte Begriffe und Konzepte
+
+### Suchfunktionen
+- **Natürlichsprachige Abfragen**: Stellen Sie Fragen in natürlicher Sprache
+- **Ähnlichkeitssuche**: Finden Sie konzeptionell ähnliche Inhalte
+- **Hybridsuche**: Kombiniert Vektor- und traditionelle Schlüsselwortsuche
+- **Konfigurierbare Ergebnisse**: Steuern Sie die Anzahl und den Relevanz-Schwellenwert der Ergebnisse
+
+## Dokumentenverwaltung
+
+### Organisationsfunktionen
+- **Massenupload**: Laden Sie mehrere Dateien gleichzeitig über die asynchrone API hoch
+- **Verarbeitungsstatus**: Echtzeit-Updates zum Dokumentenverarbeitungsprozess
+- **Suchen und Filtern**: Finden Sie Dokumente schnell in großen Sammlungen
+- **Metadaten-Tracking**: Automatische Erfassung von Dateiinformationen und Verarbeitungsdetails
+
+### Sicherheit und Datenschutz
+- **Sichere Speicherung**: Dokumente werden mit Sicherheit auf Unternehmensniveau gespeichert
+- **Zugriffskontrolle**: Workspace-basierte Berechtigungen
+- **Verarbeitungsisolierung**: Jeder Workspace hat eine isolierte Dokumentenverarbeitung
+- **Datenaufbewahrung**: Konfigurieren Sie Richtlinien zur Dokumentenaufbewahrung
+
+## Erste Schritte
+
+1. **Navigieren Sie zu Ihrer Wissensdatenbank**: Zugriff über Ihre Workspace-Seitenleiste
+2. **Dokumente hochladen**: Drag & Drop oder wählen Sie Dateien zum Hochladen aus
+3. **Verarbeitung überwachen**: Beobachten Sie, wie Dokumente verarbeitet und in Chunks aufgeteilt werden
+4. **Chunks erkunden**: Sehen und bearbeiten Sie die verarbeiteten Inhalte
+5. **Zu Workflows hinzufügen**: Verwenden Sie den Wissensblock, um ihn in Ihre KI-Agenten zu integrieren
+
+Die Wissensdatenbank verwandelt Ihre statischen Dokumente in eine intelligente, durchsuchbare Ressource, die Ihre KI-Workflows für fundiertere und kontextbezogenere Antworten nutzen können.

apps/docs/content/docs/de/knowledgebase/tags.mdx

@@ -0,0 +1,108 @@
+---
+title: Tags und Filterung
+---
+
+import { Video } from '@/components/ui/video'
+
+Tags bieten eine leistungsstarke Möglichkeit, Ihre Dokumente zu organisieren und präzise Filterungen für Ihre Vektorsuchen zu erstellen. Durch die Kombination von tag-basierter Filterung mit semantischer Suche können Sie genau die Inhalte aus Ihrer Wissensdatenbank abrufen, die Sie benötigen.
+
+## Tags zu Dokumenten hinzufügen
+
+Sie können jedem Dokument in Ihrer Wissensdatenbank benutzerdefinierte Tags hinzufügen, um Ihre Inhalte zu organisieren und zu kategorisieren und so leichter auffindbar zu machen.
+
+<div className="mx-auto w-full overflow-hidden rounded-lg">
+  <Video src="knowledgebase-tag.mp4" width={700} height={450} />
+</div>
+
+### Tag-Verwaltung
+- **Benutzerdefinierte Tags**: Erstellen Sie Ihr eigenes Tag-System, das zu Ihrem Arbeitsablauf passt
+- **Mehrere Tags pro Dokument**: Wenden Sie so viele Tags wie nötig auf jedes Dokument an, es stehen 7 Tag-Slots pro Wissensdatenbank zur Verfügung, die von allen Dokumenten in der Wissensdatenbank gemeinsam genutzt werden
+- **Tag-Organisation**: Gruppieren Sie verwandte Dokumente mit einheitlichen Tags
+
+### Best Practices für Tags
+- **Einheitliche Benennung**: Verwenden Sie standardisierte Tag-Namen für alle Ihre Dokumente
+- **Beschreibende Tags**: Verwenden Sie klare, aussagekräftige Tag-Namen
+- **Regelmäßige Bereinigung**: Entfernen Sie ungenutzte oder veraltete Tags regelmäßig
+
+## Verwendung von Tags in Wissensblöcken
+
+Tags werden besonders leistungsstark, wenn sie mit dem Wissensblock in Ihren Workflows kombiniert werden. Sie können Ihre Suchen auf bestimmte getaggte Inhalte filtern und so sicherstellen, dass Ihre KI-Agenten die relevantesten Informationen erhalten.
+
+<div className="mx-auto w-full overflow-hidden rounded-lg">
+  <Video src="knowledgebase-tag2.mp4" width={700} height={450} />
+</div>
+
+## Suchmodi
+
+Der Wissensblock unterstützt drei verschiedene Suchmodi, abhängig davon, was Sie angeben:
+
+### 1. Nur-Tag-Suche
+Wenn Sie **nur Tags angeben** (keine Suchanfrage):
+- **Direkter Abruf**: Ruft alle Dokumente ab, die die angegebenen Tags haben
+- **Keine Vektorsuche**: Ergebnisse basieren ausschließlich auf Tag-Übereinstimmung
+- **Schnelle Leistung**: Schneller Abruf ohne semantische Verarbeitung
+- **Exakte Übereinstimmung**: Nur Dokumente mit allen angegebenen Tags werden zurückgegeben
+
+**Anwendungsfall**: Wenn du alle Dokumente aus einer bestimmten Kategorie oder einem Projekt benötigst
+
+### 2. Nur Vektorsuche
+Wenn du **nur eine Suchanfrage angibst** (keine Tags):
+- **Semantische Suche**: Findet Inhalte basierend auf Bedeutung und Kontext
+- **Vollständige Wissensdatenbank**: Durchsucht alle Dokumente
+- **Relevanz-Ranking**: Ergebnisse nach semantischer Ähnlichkeit geordnet
+- **Natürliche Sprache**: Verwende Fragen oder Phrasen, um relevante Inhalte zu finden
+
+**Anwendungsfall**: Wenn du die relevantesten Inhalte unabhängig von der Organisation benötigst
+
+### 3. Kombinierte Tag-Filterung + Vektorsuche
+Wenn du **sowohl Tags als auch eine Suchanfrage angibst**:
+1. **Zuerst**: Filtere Dokumente auf solche mit den angegebenen Tags
+2. **Dann**: Führe eine Vektorsuche innerhalb dieser gefilterten Teilmenge durch
+3. **Ergebnis**: Semantisch relevante Inhalte nur aus deinen getaggten Dokumenten
+
+**Anwendungsfall**: Wenn du relevante Inhalte aus einer bestimmten Kategorie oder einem Projekt benötigst
+
+### Suchkonfiguration
+
+#### Tag-Filterung
+- **Mehrere Tags**: Verwende mehrere Tags für ODER-Logik (Dokument muss einen oder mehrere der Tags haben)
+- **Tag-Kombinationen**: Mische verschiedene Tag-Typen für präzise Filterung
+- **Groß-/Kleinschreibung**: Tag-Abgleich ist unabhängig von Groß-/Kleinschreibung
+- **Teilabgleich**: Exakte Übereinstimmung des Tag-Namens erforderlich
+
+#### Vektorsuche-Parameter
+- **Abfragekomplexität**: Fragen in natürlicher Sprache funktionieren am besten
+- **Ergebnislimits**: Konfiguriere, wie viele Chunks abgerufen werden sollen
+- **Relevanzschwelle**: Lege minimale Ähnlichkeitswerte fest
+- **Kontextfenster**: Passe die Chunk-Größe an deinen Anwendungsfall an
+
+## Integration mit Workflows
+
+### Konfiguration des Wissensblocks
+1. **Wissensdatenbank auswählen**: Wähle aus, welche Wissensdatenbank durchsucht werden soll
+2. **Tags hinzufügen**: Gib Filterungs-Tags an (optional)
+3. **Anfrage eingeben**: Füge deine Suchanfrage hinzu (optional)
+4. **Ergebnisse konfigurieren**: Lege die Anzahl der abzurufenden Chunks fest
+5. **Suche testen**: Sieh dir die Ergebnisse an, bevor du sie im Workflow verwendest
+
+### Dynamische Tag-Nutzung
+- **Variable Tags**: Verwenden Sie Workflow-Variablen als Tag-Werte
+- **Bedingte Filterung**: Wenden Sie verschiedene Tags basierend auf Workflow-Logik an
+- **Kontextbezogene Suche**: Passen Sie Tags basierend auf dem Gesprächskontext an
+- **Mehrstufige Filterung**: Verfeinern Sie Suchen durch Workflow-Schritte
+
+### Leistungsoptimierung
+- **Effiziente Filterung**: Tag-Filterung erfolgt vor der Vektorsuche für bessere Leistung
+- **Caching**: Häufig verwendete Tag-Kombinationen werden für Geschwindigkeit zwischengespeichert
+- **Parallele Verarbeitung**: Mehrere Tag-Suchen können gleichzeitig ausgeführt werden
+- **Ressourcenmanagement**: Automatische Optimierung der Suchressourcen
+
+## Erste Schritte mit Tags
+
+1. **Planen Sie Ihre Tag-Struktur**: Entscheiden Sie sich für einheitliche Namenskonventionen
+2. **Beginnen Sie mit dem Taggen**: Fügen Sie Ihren vorhandenen Dokumenten relevante Tags hinzu
+3. **Testen Sie Kombinationen**: Experimentieren Sie mit Tag- und Suchanfragekombinationen
+4. **Integration in Workflows**: Verwenden Sie den Knowledge-Block mit Ihrer Tagging-Strategie
+5. **Verfeinern Sie im Laufe der Zeit**: Passen Sie Ihren Tagging-Ansatz basierend auf Suchergebnissen an
+
+Tags verwandeln Ihre Wissensdatenbank von einem einfachen Dokumentenspeicher in ein präzise organisiertes, durchsuchbares Intelligenzsystem, das Ihre KI-Workflows mit chirurgischer Präzision navigieren können.