---
# System prepended metadata

title: Asimov Humanoid Robot Platform - Deep Dive Tutorial

---

# Asimov Humanoid Robot Platform - Deep Dive Tutorial

Created on with Claude Code on 10-Sep-2025

This tutorial will teach you the Asimov codebase from the ground up. It's a sophisticated robotics platform with real-time WebRTC streaming, gRPC communication, and multi-component architecture.

## Table of Contents

1. [System Architecture Overview](#system-architecture-overview)
2. [Robot Components Deep Dive](#robot-components-deep-dive)
3. [Communication Patterns](#communication-patterns)
4. [WebRTC Media Streaming](#webrtc-media-streaming)
5. [Frontend Web Interface](#frontend-web-interface)
6. [Build Systems and Development](#build-systems-and-development)
7. [Data Flow Examples](#data-flow-examples)
8. [Getting Started Walkthrough](#getting-started-walkthrough)

## System Architecture Overview

The Asimov platform consists of four main components that work together to create a complete robotics system:

```mermaid
graph TB
    subgraph "Web Layer"
        FE[Frontend<br/>Next.js React App<br/>WebRTC Video Player]
        BE[Backend<br/>Mediasoup Server<br/>WebSocket Signaling]
    end
    
    subgraph "Robot Hardware Layer"
        subgraph "Robot Processes"
            N[Nucleus<br/>Media Processing<br/>WebRTC Producer]
            L[Link<br/>Hardware Interface<br/>Motor Control]
            C[Cortex<br/>High-Level AI<br/>Decision Making]
        end
        
        subgraph "Hardware"
            CAM[Cameras<br/>RealSense/USB]
            MIC[Microphones]
            ROBOT[Unitree G1<br/>Humanoid Robot]
        end
    end
    
    subgraph "Development Tools"
        DOCS[Documentation<br/>Astro Starlight]
        SIM[Isaac Sim<br/>Robot Simulation]
    end
    
    %% Data Flow
    FE <--> BE
    BE <--> N
    N <--> L
    L <--> ROBOT
    N --> CAM
    N --> MIC
    C <--> N
    C <--> L
    
    %% Styling
    classDef robotProcess fill:#ff6b6b,color:#fff
    classDef webLayer fill:#4ecdc4,color:#fff
    classDef hardware fill:#45b7d1,color:#fff
    classDef tools fill:#96ceb4,color:#fff
    
    class N,L,C robotProcess
    class FE,BE webLayer
    class CAM,MIC,ROBOT hardware
    class DOCS,SIM tools
```

### Key Design Principles

1. **Separation of Concerns**: Each component has a specific responsibility
2. **Real-time Communication**: WebRTC for low-latency video, gRPC for commands
3. **Modular Architecture**: Components can be developed and tested independently
4. **Safety First**: Multiple communication layers with fallbacks

## Robot Components Deep Dive

### Nucleus - Media Processing Core

**Location**: `robot/nucleus/`
**Language**: C with GStreamer
**Purpose**: Handles video/audio capture and WebRTC streaming

```mermaid
graph LR
    subgraph "Nucleus Process (main.c)"
        INIT[Initialize Modules]
        LOOP[Processing Loop<br/>100Hz]
        
        subgraph "Core Modules"
            MS[Mediasoup<br/>WebRTC Transport]
            TEL[Telemetry<br/>Metrics Export]
            TO[Teleop<br/>gRPC Client]
            IPC[IPC<br/>Shared Memory]
        end
        
        subgraph "Media Pipeline"
            CAP[Video Capture<br/>GStreamer]
            ENC[Encoding<br/>VP8/Opus]
            SEND[Frame Sender]
        end
    end
    
    INIT --> LOOP
    LOOP --> MS
    LOOP --> TEL
    LOOP --> TO
    LOOP --> IPC
    
    MS --> CAP
    CAP --> ENC
    ENC --> SEND
    
    classDef process fill:#ff6b6b,color:#fff
    classDef module fill:#ffa726,color:#fff
    classDef media fill:#66bb6a,color:#fff
    
    class INIT,LOOP process
    class MS,TEL,TO,IPC module
    class CAP,ENC,SEND media
```

**Key Files**:
- `main.c`: Entry point with initialization and main loop
- `mediasoup/`: WebRTC transport using Mediasoup library
- `teleop/`: gRPC client for receiving commands
- `config.yaml`: Runtime configuration

**Configuration Example**:
```yaml
# WebRTC streaming
server_url: "ws://localhost:8080"
room_name: "test-room"

# Camera settings  
width: 848
height: 480
fps: 30
device_path: "/dev/video4"

# Teleoperation
teleop_enabled: true
teleop_server: "localhost:50051"
robot_id: "nucleus-robot"
```

### Link - Hardware Interface

**Location**: `robot/link/`
**Language**: C
**Purpose**: Direct communication with robot hardware (Unitree G1)

```mermaid
graph TD
    subgraph "Link Process (main.c)"
        LINIT[Initialize IPC + Robot Interface]
        LLOOP[Processing Loop<br/>100Hz]
        
        subgraph "Communication"
            RECV[Receive Commands<br/>from Nucleus]
            EXEC[Execute on Robot<br/>Joint Control]
            STATE[Read Robot State<br/>Sensors/Position]
            SEND[Send State<br/>to Nucleus]
        end
        
        subgraph "Robot Interface"
            G1[Unitree G1 SDK<br/>Motor Commands]
            SAFETY[Safety Checks<br/>Limits/Emergency]
        end
    end
    
    LINIT --> LLOOP
    LLOOP --> RECV
    RECV --> EXEC
    EXEC --> G1
    G1 --> SAFETY
    LLOOP --> STATE
    STATE --> SEND
    
    classDef process fill:#ff6b6b,color:#fff
    classDef comm fill:#4ecdc4,color:#fff
    classDef robot fill:#45b7d1,color:#fff
    
    class LINIT,LLOOP process
    class RECV,EXEC,STATE,SEND comm
    class G1,SAFETY robot
```

**Key Files**:
- `main.c`: Main processing loop
- `robot_interface/unitree_g1/`: Hardware-specific drivers
- Inter-process communication with Nucleus via shared memory

### Cortex - AI Decision Making

**Location**: `robot/cortex/`
**Status**: Planned/Future component
**Purpose**: High-level AI, path planning, behavior control

## Communication Patterns

The system uses multiple communication protocols optimized for different use cases:

```mermaid
sequenceDiagram
    participant F as Frontend<br/>(Browser)
    participant B as Backend<br/>(Mediasoup)
    participant N as Nucleus<br/>(Robot)
    participant L as Link<br/>(Hardware)
    participant R as Robot<br/>(G1)
    
    Note over F,R: WebRTC Video Streaming Setup
    F->>B: WebSocket Connect
    B->>N: WebSocket Connect  
    F->>B: Join Room Request
    B->>F: Available Producers
    F->>B: Create WebRTC Transport
    B->>F: Transport Parameters
    F->>B: Start Consuming Video
    N->>B: Produce Video Stream
    B->>F: Video Frames (WebRTC)
    
    Note over N,R: Robot Command Flow
    N->>L: Command via Shared Memory IPC
    L->>R: Motor Commands (Unitree SDK)
    R->>L: State/Sensor Data
    L->>N: Robot State via IPC
    N->>B: Telemetry Data (optional)
    
    Note over F,R: User Control Example
    F->>B: User Input (WebSocket)
    B->>N: gRPC Command
    N->>L: Motion Command (IPC)
    L->>R: Joint Movements
```

### Protocol Breakdown

| Protocol | Use Case | Latency | Reliability |
|----------|----------|---------|-------------|
| **WebRTC** | Video streaming | ~50-100ms | Best-effort |
| **WebSocket** | Signaling, UI commands | ~10-50ms | Reliable |
| **gRPC** | Robot commands | ~1-10ms | Reliable |
| **Shared Memory** | Inter-process (Nucleus↔Link) | ~0.1ms | Reliable |
| **Unitree SDK** | Hardware control | ~0.1ms | Critical |

## WebRTC Media Streaming

The video streaming system uses a sophisticated WebRTC implementation:

```mermaid
graph TB
    subgraph "Robot Side (Nucleus)"
        CAM[Camera Capture<br/>RealSense/USB]
        GST[GStreamer Pipeline<br/>Capture → Encode]
        MS_PROD[Mediasoup Producer<br/>WebRTC Sender]
    end
    
    subgraph "Network Transport"
        INET[Internet/Network<br/>UDP/RTP packets]
    end
    
    subgraph "Server Side (Backend)"
        MS_SFU[Mediasoup SFU<br/>Selective Forwarding]
        WS_SIG[WebSocket Signaling<br/>SDP/ICE Exchange]
    end
    
    subgraph "Browser Side (Frontend)"
        MS_CONS[Mediasoup Consumer<br/>WebRTC Receiver]
        VIDEO[HTML Video Element<br/>Display]
        STATS[Statistics<br/>Bitrate/Latency]
    end
    
    CAM --> GST
    GST --> MS_PROD
    MS_PROD --> INET
    INET --> MS_SFU
    MS_SFU --> INET
    INET --> MS_CONS
    MS_CONS --> VIDEO
    MS_CONS --> STATS
    
    WS_SIG <--> MS_SFU
    WS_SIG <--> MS_CONS
    
    classDef robot fill:#ff6b6b,color:#fff
    classDef server fill:#4ecdc4,color:#fff
    classDef browser fill:#45b7d1,color:#fff
    classDef network fill:#96ceb4,color:#fff
    
    class CAM,GST,MS_PROD robot
    class MS_SFU,WS_SIG server
    class MS_CONS,VIDEO,STATS browser
    class INET network
```

### Video Pipeline Details

1. **Capture**: Camera frames captured via GStreamer
2. **Encoding**: VP8 video codec for WebRTC compatibility
3. **Transport**: RTP packets over UDP with SRTP encryption
4. **SFU Routing**: Mediasoup server routes streams to multiple viewers
5. **Display**: Browser receives and displays video with minimal latency

## Frontend Web Interface

The React/Next.js frontend provides a modern web interface:

```mermaid
graph TD
    subgraph "Next.js Application (frontend/)"
        subgraph "Pages"
            HOME[page.tsx<br/>Main Video Player]
        end
        
        subgraph "Components"
            VP[VideoPlayer<br/>WebRTC Display]
            STATS[StatsDisplay<br/>Metrics/Latency]
            UI[UI Components<br/>Radix + Tailwind]
        end
        
        subgraph "Services"
            WS_CLIENT[WebSocketClient<br/>Mediasoup Integration]
            MS_CLIENT[Mediasoup Client<br/>WebRTC Consumer]
        end
        
        subgraph "State Management"
            HOOKS[React Hooks<br/>useState/useEffect]
            STREAM_STATE[Stream State<br/>Producers/Consumers]
        end
    end
    
    HOME --> VP
    HOME --> STATS
    VP --> WS_CLIENT
    WS_CLIENT --> MS_CLIENT
    MS_CLIENT --> STREAM_STATE
    STREAM_STATE --> HOOKS
    HOOKS --> HOME
    
    classDef page fill:#4ecdc4,color:#fff
    classDef component fill:#45b7d1,color:#fff
    classDef service fill:#96ceb4,color:#fff
    classDef state fill:#ffa726,color:#fff
    
    class HOME page
    class VP,STATS,UI component
    class WS_CLIENT,MS_CLIENT service
    class HOOKS,STREAM_STATE state
```

### Key Frontend Features

- **Real-time Video**: WebRTC video consumption with MediaStream API
- **Statistics**: Live bitrate, latency, and connection metrics
- **Responsive Design**: Works on desktop and mobile devices
- **Room Management**: Multi-user rooms with participant tracking

## Build Systems and Development

The project uses multiple build systems for different components:

```mermaid
graph LR
    subgraph "Robot Code (C/C++)"
        BAZEL[Bazel Build<br/>BUILD.bazel files]
        CC[GCC Compiler<br/>System Libraries]
        DEPS[Dependencies<br/>GStreamer, gRPC]
    end
    
    subgraph "Backend (TypeScript)"
        BUN_BE[Bun Runtime<br/>Fast TypeScript]
        NPM_BE[npm packages<br/>mediasoup, ws]
    end
    
    subgraph "Frontend (React)"
        NEXT[Next.js Build<br/>Turbo Mode]
        NPM_FE[npm packages<br/>React, Tailwind]
    end
    
    subgraph "Documentation"
        ASTRO[Astro Build<br/>Static Site]
        STAR[Starlight Theme<br/>Documentation]
    end
    
    BAZEL --> CC
    CC --> DEPS
    BUN_BE --> NPM_BE
    NEXT --> NPM_FE
    ASTRO --> STAR
    
    classDef robot fill:#ff6b6b,color:#fff
    classDef web fill:#4ecdc4,color:#fff
    classDef docs fill:#96ceb4,color:#fff
    
    class BAZEL,CC,DEPS robot
    class BUN_BE,NPM_BE,NEXT,NPM_FE web
    class ASTRO,STAR docs
```

### Development Workflow

```bash
# Robot code development
bazel build //robot/nucleus:nucleus_gst
bazel test //robot/nucleus/test:all

# Backend development  
cd backend
bun install
bun start

# Frontend development
cd frontend
npm run dev

# Documentation
cd docs
bun run dev
```

## Data Flow Examples

### Example 1: Video Streaming Session

```mermaid
sequenceDiagram
    participant User as User<br/>(Browser)
    participant FE as Frontend
    participant BE as Backend<br/>(Mediasoup)
    participant N as Nucleus<br/>(Robot)
    participant Cam as Camera
    
    User->>FE: Opens robot page
    FE->>BE: WebSocket connect
    N->>BE: Register as producer
    N->>Cam: Start video capture
    Cam->>N: Video frames
    N->>BE: Produce video stream
    
    User->>FE: Click "Watch Stream"
    FE->>BE: Request to consume video
    BE->>FE: WebRTC transport setup
    FE->>BE: Connect transport
    BE->>FE: Start consuming
    N->>FE: Video frames (via BE)
    FE->>User: Display video
    
    loop Every 2 seconds
        FE->>FE: Collect WebRTC stats
        FE->>User: Update bitrate/latency display
    end
```

### Example 2: Robot Command Execution

```mermaid
sequenceDiagram
    participant UI as Web UI
    participant gRPC as gRPC Server<br/>(External)
    participant N as Nucleus
    participant L as Link
    participant Robot as Unitree G1
    
    UI->>gRPC: Send robot command
    gRPC->>N: gRPC NucleusControl.SendCommand
    
    Note over N: Command validation & processing
    N->>L: Forward command (IPC)
    
    Note over L: Safety checks & conversion
    L->>Robot: Unitree SDK commands
    Robot->>L: Joint feedback
    L->>N: Robot state update (IPC)
    
    Note over N: State processing
    N->>gRPC: Command response
    gRPC->>UI: Success/failure
    
    loop Every 10ms (100Hz)
        L->>Robot: Control loop
        Robot->>L: Sensor data
    end
```

## Getting Started Walkthrough

### 1. Environment Setup

First, understand the development environment:

```bash
# Check repository structure
ls -la
# You'll see: robot/ backend/ frontend/ docs/

# Install system dependencies for robot code
sudo apt-get install gstreamer1.0-tools libgstreamer1.0-dev

# Install Bazel for robot builds
# (Follow Bazel installation guide)
```

### 2. Backend Setup (Mediasoup Server)

```bash
cd backend
bun install  # Install dependencies
bun start    # Start signaling server on port 9095
```

The backend handles:
- WebSocket signaling for WebRTC
- Mediasoup SFU (Selective Forwarding Unit)
- Room management for multiple viewers

### 3. Frontend Setup (React App)

```bash
cd frontend  
npm install
npm run dev  # Starts on http://localhost:3000
```

The frontend provides:
- Video player interface
- WebRTC consumer implementation
- Real-time statistics display

### 4. Robot Code (Nucleus)

```bash
# Build the main nucleus binary
bazel build //robot/nucleus:nucleus

# Configure camera and streaming settings
nano robot/nucleus/config.yaml

# Run nucleus (requires camera hardware)
./bazel-bin/robot/nucleus/nucleus
```

### 5. Testing the Full System

1. **Start Backend**: `cd backend && bun start`
2. **Start Frontend**: `cd frontend && npm run dev`
3. **Start Robot**: `./bazel-bin/robot/nucleus/nucleus`
4. **Open Browser**: Navigate to `http://localhost:3000`
5. **Join Room**: Enter username and room name
6. **Watch Stream**: Click "Watch Stream" to see robot camera

### 6. Development Tips

- **Robot Logs**: Check `journalctl -f | grep NUCLEUS` for robot logs
- **WebRTC Debug**: Enable browser DevTools Network tab for WebRTC stats
- **Hot Reload**: Frontend has hot reload, backend restarts automatically
- **Configuration**: Modify `config.yaml` files for different settings

## Understanding the Codebase Structure

```
asimov/
├── robot/                  # C/C++ robot code (Bazel)
│   ├── nucleus/           # Media processing & WebRTC
│   ├── link/              # Hardware interface  
│   ├── cortex/            # AI/high-level control
│   ├── common/            # Shared libraries
│   │   ├── protos/        # gRPC protocol definitions
│   │   ├── ipc/           # Inter-process communication
│   │   └── utils/         # Common utilities
│   └── simulation/        # Isaac Sim integration
├── backend/               # TypeScript WebRTC server (Bun)
│   ├── index.ts          # Main server entry point
│   └── package.json      # Dependencies
├── frontend/              # Next.js React app (npm)
│   ├── app/              # Next.js App Router
│   ├── components/       # React components
│   └── lib/              # Utility functions
└── docs/                  # Astro documentation site
```

This architecture enables:
- **Modular Development**: Each component can be developed independently
- **Language Optimization**: C for performance-critical robot code, TypeScript for web services
- **Scalable Streaming**: Multiple viewers can watch robot feeds simultaneously  
- **Real-time Control**: Low-latency command execution and feedback

The system is designed for robotics research, telepresence applications, and remote robot operation with emphasis on safety, performance, and user experience.

---

*This tutorial covers the essential concepts needed to understand and contribute to the Asimov robotics platform. Each component builds upon the others to create a complete system for humanoid robot control and monitoring.*