livepeer · rickstaa · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/docs.json b/docs.json
@@ -16,22 +16,52 @@
           {
             "group": "Get Started",
             "pages": [
-              "technical/getting-started/introduction",
-              "technical/getting-started/install-comfystream"
+              "technical/get-started/introduction",
+              "technical/get-started/install",
+              "technical/get-started/quickstart",
+              "technical/get-started/streaming"
+            ]
+          }
+        ]
+      },
+      {
+        "tab": "Knowledge Base",
+        "groups": [
+          {
+            "group": "Get Started",
+            "pages": [
+              "knowledge-base/get-started/introduction",
+              "knowledge-base/get-started/core-components",
+              "knowledge-base/get-started/optimize-performance",
+              "knowledge-base/get-started/optimize-quality"
             ]
           },
           {
-            "group": "Custom Nodes",
+            "group": "Use Cases",
             "pages": [
-              "technical/reference/available-nodes",
-              "technical/reference/advanced-node-usage",
-              "technical/reference/performance-recommendations"
+              "knowledge-base/use-cases/introduction",
+              "knowledge-base/use-cases/facial-tracking",
+              "knowledge-base/use-cases/background-augmentation"
+            ]
+          }
+        ]
+      },
+      {
+        "tab": "ComfyUI Stream Pack",
+        "groups": [
+          {
+            "group": "Getting Started",
+            "pages": [
+              "stream-pack/get-started/introduction",
+              "stream-pack/get-started/install",
+              "stream-pack/get-started/quickstart"
             ]
           },
           {
-            "group": "Reference",
+            "group": "Custom Nodes",
             "pages": [
-              "technical/reference/download-models"
+              "stream-pack/custom-nodes/available-nodes",
+              "stream-pack/custom-nodes/third-party-nodes"
             ]
           }
         ]

diff --git a/knowledge-base/get-started/core-components.mdx b/knowledge-base/get-started/core-components.mdx
@@ -0,0 +1,5 @@
+---
+title: Core Components
+description: "Explore the essential building blocks for creating realtime AI workflows with ComfyStream"
+icon: 'gear'
+---
diff --git a/knowledge-base/get-started/introduction.mdx b/knowledge-base/get-started/introduction.mdx
@@ -0,0 +1,5 @@
+---
+title: What is a Realtime AI?
+description: "Learn about the Realtime AI ecosystem"
+icon: 'book'
+---
diff --git a/knowledge-base/get-started/optimize-performance.mdx b/knowledge-base/get-started/optimize-performance.mdx
@@ -0,0 +1,5 @@
+---
+title: Optimizing Performance
+description: "Techniques for reducing latency and improving throughput in realtime AI workflows"
+icon: 'bold'
+---
diff --git a/knowledge-base/get-started/optimize-quality.mdx b/knowledge-base/get-started/optimize-quality.mdx
@@ -0,0 +1,5 @@
+---
+title: Optimizing Output Quality
+description: "Strategies for improving visual and audio quality in realtime AI workflows while balancing performance"
+icon: 'wand-magic-sparkles'
+---
diff --git a/knowledge-base/use-cases/background-augmentation.mdx b/knowledge-base/use-cases/background-augmentation.mdx
@@ -0,0 +1,5 @@
+---
+title: Background Augmentation
+description: "Use segmentation models to remove, blur, or replace video backgrounds in real-time AI workflows."
+icon: "image"
+---
diff --git a/knowledge-base/use-cases/facial-tracking.mdx b/knowledge-base/use-cases/facial-tracking.mdx
@@ -0,0 +1,5 @@
+---
+title: Facial Tracking
+description: "Detect and track facial landmarks in real time using ComfyStream and ComfyUI nodes."
+icon: "user"
+---
diff --git a/knowledge-base/use-cases/introduction.mdx b/knowledge-base/use-cases/introduction.mdx
@@ -0,0 +1,5 @@
+---
+title: Use Cases
+description: "Explore real-world applications of ComfyStream, from facial tracking to background effects, with ready-to-run workflows."
+icon: "lightbulb"
+---
diff --git a/stream-pack/custom-nodes/available-nodes.mdx b/stream-pack/custom-nodes/available-nodes.mdx
@@ -0,0 +1,5 @@
+---
+title: "Available Nodes"
+description: "Explore the StreamPack custom nodes for ComfyUI and their functionality in real-time AI workflows."
+icon: "server"
+---
diff --git a/stream-pack/custom-nodes/third-party-nodes.mdx b/stream-pack/custom-nodes/third-party-nodes.mdx
@@ -0,0 +1,5 @@
+---
+title: "Third-Party Nodes"
+description: "Discover third-party nodes that can enhance your real-time AI workflows in ComfyUI."
+icon: "puzzle-piece"
+---
diff --git a/stream-pack/get-started/install.mdx b/stream-pack/get-started/install.mdx
@@ -0,0 +1,5 @@
+---
+title: "Install Nodes"
+description: "Learn how to install the StreamPack custom nodes for ComfyUI to enable real-time AI workflows."
+icon: "download"
+---
diff --git a/stream-pack/get-started/introduction.mdx b/stream-pack/get-started/introduction.mdx
@@ -0,0 +1,5 @@
+---
+title: Introduction
+description: "Learn about the ComfyUI Stream Pack"
+icon: 'book'
+---
diff --git a/stream-pack/get-started/quickstart.mdx b/stream-pack/get-started/quickstart.mdx
@@ -0,0 +1,5 @@
+---
+title: "Quickstart Guide"
+description: "Get started with StreamPack by building your first real-time AI audio and video workflow in ComfyUI."
+icon: "rocket"
+---
diff --git a/...l/getting-started/install-comfystream.mdx → technical/get-started/install.mdx b/...l/getting-started/install-comfystream.mdx → technical/get-started/install.mdx
diff --git a/technical/get-started/introduction.mdx b/technical/get-started/introduction.mdx
@@ -0,0 +1,72 @@
+---
+title: Introduction
+description: "Build real-time AI video and audio workflows using the ComfyStream toolkit for ComfyUI."
+icon: "rocket"
+---
+
+<iframe
+  width="100%"
+  height="480"
+  src="https://www.youtube.com/embed/rhiWCRTTmDk"
+  title="Livepeer video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+/>
+
+## Overview
+
+The **ComfyStream toolkit** adds powerful real-time video and audio capabilities to [ComfyUI](https://www.comfy.org/), making it easy to build interactive, AI-powered media workflows. It extends ComfyUI with specialized tools for streaming, live processing, and on-the-fly workflow updates, including:
+
+- **[ComfyStream](https://github.com/livepeer/comfystream)** – A custom node that streams audio and video from your webcam and microphone into ComfyUI for real-time AI processing, then returns the processed output.
+- **[ComfyUI-Stream-Pack](https://github.com/livepeer/ComfyUI-Stream-Pack)** – A collection of custom nodes designed to support advanced real-time audio and video workflows.
+
+To help you get started, ComfyStream also includes a [knowledge base](https://docs.comfystream.com/) with foundational workflows, optimization tips, and in-depth guides on all tools and nodes.
+
+## Getting Started
+
+To get started, follow the installation guide below or explore the stream pack for additional nodes.
+
+<CardGroup cols={2}>
+  <Card title="Install ComfyStream" icon="download" href="install-comfystream">
+    Step-by-step instructions to install ComfyStream and start creating
+    real-time workflows.
+  </Card>
+  <Card
+    title="Check out the ComfyUI-Stream-Pack"
+    icon="cube"
+    href="https://github.com/livepeer/ComfyUI-Stream-Pack"
+  >
+    A collection of custom nodes for building realtime audio and video
+    workflows.
+  </Card>
+</CardGroup>
+
+## How It Works
+
+ComfyStream enables real-time processing of audio and video streams by integrating a [WebRTC](https://webrtc.org/) server for low-latency, bidirectional communication, a custom tensor-based pipeline for converting media frames to and from tensors, and ComfyUI's [EmbeddedComfyClient](https://github.com/hiddenswitch/ComfyUI/blob/ffc1912eff10cf57aec4fee358a5b6946e74a9e5/comfy/client/embedded_comfy_client.py#L123) for AI inference.
+
+### Data Flow Overview
+
+Here's how the system processes live audio and video end-to-end:
+
+1. **Input:** WebRTC receives video, audio, and control data from the client.
+2. **Workflow Injection:** The pipeline dynamically modifies the ComfyUI workflow by replacing standard input/output nodes with custom tensor nodes.
+3. **Inference:** The EmbeddedComfyClient processes incoming tensors in real-time using the updated workflow.
+4. **Output Conversion:** Processed tensors are converted back to video and audio, and streamed back to the client via WebRTC.
+5. **Live Control:** A control channel allows the client to update the workflow or modify parameters on the fly, without restarting the session.
+
+This high-level overview is visualized below:
+
+```mermaid
+flowchart TD
+    A[Client Input] --> B[WebRTC Receiver]
+    B --> C[Media to Tensor Conversion]
+    C --> D[Embedded ComfyUI Client]
+    D --> E[Tensor to Media Conversion]
+    E --> F[WebRTC Sender]
+
+    subgraph Control Channel
+        A2[Live Workflow Updates] --> D
+    end
+```
diff --git a/...ical/getting-started/publish-pipeline.mdx → technical/get-started/publish-pipeline.mdx b/...ical/getting-started/publish-pipeline.mdx → technical/get-started/publish-pipeline.mdx
diff --git a/technical/get-started/quickstart.mdx b/technical/get-started/quickstart.mdx
@@ -0,0 +1,5 @@
+---
+title: Run First Workflow
+description: "un your first real-time AI workflow with ComfyStream and see it live in ComfyUI."
+icon: "play"
+---
diff --git a/technical/get-started/streaming.mdx b/technical/get-started/streaming.mdx
@@ -0,0 +1,5 @@
+---
+title: Stream using OBS
+description: "Stream your realtime AI workflows using OBS"
+icon: "video"
+---
diff --git a/technical/getting-started/introduction.mdx b/technical/getting-started/introduction.mdx