v0.5.11: stt, videogen, vllm, billing fixes, new models

Author: waleedlatif1

apps/docs/components/icons.tsx

@@ -4085,7 +4085,29 @@ export function CalendlyIcon(props: SVGProps<SVGSVGElement>) {
   )
 }
 
-export function AudioWaveformIcon(props: SVGProps<SVGSVGElement>) {
+export function STTIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    >
+      <path d='m15 16 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16' />
+      <path d='M15.697 14h5.606' />
+      <path d='m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16' />
+      <path d='M3.304 13h6.392' />
+    </svg>
+  )
+}
+
+export function TTSIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       {...props}
@@ -4108,3 +4130,23 @@ export function AudioWaveformIcon(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function VideoIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    >
+      <path d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5' />
+      <rect x='2' y='6' width='14' height='12' rx='2' />
+    </svg>
+  )
+}

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

@@ -8,7 +8,6 @@ import {
   ApolloIcon,
   ArxivIcon,
   AsanaIcon,
-  AudioWaveformIcon,
   BrainIcon,
   BrowserUseIcon,
   CalendlyIcon,
@@ -63,15 +62,18 @@ import {
   SalesforceIcon,
   SerperIcon,
   SlackIcon,
+  STTIcon,
   StagehandIcon,
   StripeIcon,
   SupabaseIcon,
   TavilyIcon,
   TelegramIcon,
   TranslateIcon,
   TrelloIcon,
+  TTSIcon,
   TwilioIcon,
   TypeformIcon,
+  VideoIcon,
   WealthboxIcon,
   WebflowIcon,
   WhatsAppIcon,
@@ -92,16 +94,18 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   webflow: WebflowIcon,
   wealthbox: WealthboxIcon,
   vision: EyeIcon,
+  video_generator: VideoIcon,
   typeform: TypeformIcon,
   twilio_voice: TwilioIcon,
   twilio_sms: TwilioIcon,
+  tts: TTSIcon,
   trello: TrelloIcon,
   translate: TranslateIcon,
   thinking: BrainIcon,
   telegram: TelegramIcon,
   tavily: TavilyIcon,
   supabase: SupabaseIcon,
-  stt: AudioWaveformIcon,
+  stt: STTIcon,
   stripe: StripeIcon,
   stagehand_agent: StagehandIcon,
   stagehand: StagehandIcon,

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

@@ -5,6 +5,7 @@ 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'
+import { Video } from '@/components/ui/video'
 
 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.
 
@@ -76,7 +77,7 @@ Definiert die Felder, die Genehmigende bei der Antwort ausfüllen. Diese Daten w
 }
 ```
 
-Greifen Sie in nachfolgenden Blöcken mit `<blockId.resumeInput.fieldName>` auf Fortsetzungsdaten zu.
+Greifen Sie in nachgelagerten Blöcken auf Wiederaufnahmedaten mit `<blockId.resumeInput.fieldName>` zu. 
 
 ## Genehmigungsmethoden
 
@@ -174,8 +175,14 @@ Zugriff über `<blockId.resumeInput.fieldName>`.
 <approval1.resumeInput.approved> === true
 ```
 
+Das Beispiel unten zeigt ein Genehmigungsportal, wie es von einem Genehmiger gesehen wird, nachdem der Workflow angehalten wurde. Genehmiger können die Daten überprüfen und Eingaben als Teil der Workflow-Wiederaufnahme bereitstellen. Auf das Genehmigungsportal kann direkt über die eindeutige URL, `<blockId.url>`, zugegriffen werden.
+
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="hitl-resume.mp4" width={700} height={450} />
+</div>
+
 ## Verwandte Blöcke
 
 - **[Bedingung](/blocks/condition)** - Verzweigung basierend auf Genehmigungsentscheidungen
-- **[Variablen](/blocks/variables)** - Speicherung von Genehmigungsverlauf und Metadaten
+- **[Variablen](/blocks/variables)** - Speichern von Genehmigungsverlauf und Metadaten
 - **[Antwort](/blocks/response)** - Rückgabe von Workflow-Ergebnissen an API-Aufrufer

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

@@ -4,6 +4,7 @@ title: Grundlagen
 
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Step, Steps } from 'fumadocs-ui/components/steps'
+import { Video } from '@/components/ui/video'
 
 ## Wie Verbindungen funktionieren
 
@@ -28,7 +29,11 @@ Verbindungen sind die Pfade, die den Datenfluss zwischen Blöcken in Ihrem Workf
   </Step>
 </Steps>
 
-### Verbindungsfluss
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="connections-build.mp4" width={700} height={450} />
+</div>
+
+### Verbindungsablauf
 
 Der Datenfluss durch Verbindungen folgt diesen Prinzipien:
 

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

@@ -71,6 +71,16 @@ Diese kontextbezogenen Informationen helfen Copilot, genauere und relevantere Un
   </Card>
 </Cards>
 
+<div className="flex justify-center">
+  <Image
+    src="/static/copilot/copilot-mode.png"
+    alt="Copilot-Modusauswahl-Oberfläche"
+    width={600}
+    height={400}
+    className="my-6"
+  />
+</div>
+
 ## Tiefenebenen
 
 <Cards>
@@ -82,7 +92,7 @@ Diese kontextbezogenen Informationen helfen Copilot, genauere und relevantere Un
       </span>
     }
   >
-    <div className="m-0 text-sm">Am schnellsten und günstigsten. Ideal für kleine Änderungen, einfache Workflows und geringfügige Anpassungen.</div>
+    <div className="m-0 text-sm">Am schnellsten und günstigsten. Ideal für kleine Änderungen, einfache Arbeitsabläufe und geringfügige Anpassungen.</div>
   </Card>
   <Card
     title={
@@ -102,7 +112,7 @@ Diese kontextbezogenen Informationen helfen Copilot, genauere und relevantere Un
       </span>
     }
   >
-    <div className="m-0 text-sm">Mehr Denkleistung für umfangreichere Workflows und komplexe Änderungen bei gleichzeitiger Leistungsfähigkeit.</div>
+    <div className="m-0 text-sm">Mehr Denkleistung für umfangreichere Arbeitsabläufe und komplexe Änderungen bei gleichzeitiger Leistungsfähigkeit.</div>
   </Card>
   <Card
     title={
@@ -118,7 +128,7 @@ Diese kontextbezogenen Informationen helfen Copilot, genauere und relevantere Un
 
 ### Modusauswahl-Oberfläche
 
-Du kannst einfach zwischen verschiedenen Denkmodi über den Modusauswähler in der Copilot-Oberfläche wechseln:
+Du kannst einfach zwischen verschiedenen Denkmodi über die Modusauswahl in der Copilot-Oberfläche wechseln:
 
 <Image
   src="/static/copilot/copilot-models.png"
@@ -140,22 +150,22 @@ Wähle deinen Modus basierend auf der Komplexität deiner Aufgabe - verwende Sch
 
 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
+- **Eingabe-Tokens**: werden zum Basispreis des Anbieters berechnet (**zum Selbstkostenpreis**)
+- **Ausgabe-Tokens**: werden mit dem **1,5-fachen** des Basis-Ausgabepreises des Anbieters berechnet
 
 ```javascript
 copilotCost = (inputTokens × inputPrice + outputTokens × (outputPrice × 1.5)) / 1,000,000
 ```
 
 | Komponente | Angewendeter Tarif    |
 |------------|------------------------|
-| Input      | inputPrice             |
-| Output     | outputPrice × 1,5      |
+| Eingabe    | inputPrice             |
+| Ausgabe    | 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.
+  Die angezeigten Preise spiegeln die Tarife vom 4. September 2025 wider. Überprüfen Sie die Anbieter-Dokumentation 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.
+  Modellpreise werden pro Million Tokens angegeben. 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/introduction/index.mdx

@@ -5,6 +5,7 @@ title: Einführung
 import { Card, Cards } from 'fumadocs-ui/components/card'
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Image } from '@/components/ui/image'
+import { Video } from '@/components/ui/video'
 
 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.
 
@@ -32,19 +33,27 @@ Verwandeln Sie Rohdaten in umsetzbare Erkenntnisse. Extrahieren Sie Informatione
 **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.
 
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="introduction/chat-workflow.mp4" width={700} height={450} />
+</div>
+
 ## 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.
+Entwerfen Sie Workflows mit einer intuitiven Drag-and-Drop-Oberfläche. Verbinden Sie KI-Modelle, Datenbanken, APIs und Dienste von Drittanbietern ü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.
+Starten Sie Workflows über mehrere Kanäle, einschließlich 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.
+Ermöglichen Sie Ihrem Team, gemeinsam zu arbeiten. Mehrere Benutzer können Workflows gleichzeitig bearbeiten, mit Live-Updates und detaillierten Berechtigungskontrollen.
+
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="introduction/build-workflow.mp4" width={700} height={450} />
+</div>
 
 ## Integrationen
 
@@ -57,7 +66,28 @@ Sim bietet native Integrationen mit über 80 Diensten in verschiedenen Kategorie
 - **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.
+Für benutzerdefinierte Integrationen nutzen Sie unsere [MCP (Model Context Protocol)-Unterstützung](/mcp), um beliebige externe Dienste oder Tools anzubinden.
+
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="introduction/integrations-sidebar.mp4" width={700} height={450} />
+</div>
+
+## KI-gesteuerter Copilot
+
+**Fragen stellen & Anleitung erhalten**  
+Der Copilot beantwortet Fragen zu Sim, erklärt Ihre Workflows und gibt Verbesserungsvorschläge. Verwenden Sie das `@` Symbol, um auf Workflows, Blöcke, Dokumentation, Wissen und Protokolle für kontextbezogene Unterstützung zu verweisen.
+
+**Workflows erstellen & bearbeiten**  
+Wechseln Sie in den Agent-Modus, damit der Copilot Änderungen direkt auf Ihrer Arbeitsfläche vorschlagen und anwenden kann. Fügen Sie Blöcke hinzu, konfigurieren Sie Einstellungen, verbinden Sie Variablen und strukturieren Sie Workflows mit natürlichsprachlichen Befehlen um.
+
+**Adaptive Reasoning-Stufen**  
+Wählen Sie zwischen den Modi Schnell, Auto, Erweitert oder Behemoth, je nach Komplexität der Aufgabe. Beginnen Sie mit Schnell für einfache Fragen und steigern Sie sich bis zu Behemoth für komplexe architektonische Änderungen und tiefgehendes Debugging.
+
+Erfahren Sie mehr über [Copilot-Funktionen](/copilot) und wie Sie die Produktivität mit KI-Unterstützung maximieren können.
+
+<div className="mx-auto w-full overflow-hidden rounded-lg my-6">
+  <Video src="introduction/copilot-workflow.mp4" width={700} height={450} />
+</div>
 
 ## Bereitstellungsoptionen
 
@@ -75,7 +105,7 @@ Bereit, Ihren ersten KI-Workflow zu erstellen?
   <Card title="Erste Schritte" href="/getting-started">
     Erstellen Sie Ihren ersten Workflow in 10 Minuten
   </Card>
-  <Card title="Workflow-Bausteine" href="/blocks">
+  <Card title="Workflow-Blöcke" href="/blocks">
     Erfahren Sie mehr über die Bausteine
   </Card>
   <Card title="Tools & Integrationen" href="/tools">