Skip to content
Stavily Docs

System Interactions

The Web UI serves as the user-facing layer that interacts with multiple backend systems to provide a unified experience. It communicates with the Orchestrator, agents, and external services through various protocols and APIs.

Interaction Architecture

Section titled “Interaction Architecture”

The Web UI acts as the central hub connecting users to the entire Stavily ecosystem, providing seamless communication between frontend and backend components while maintaining real-time synchronization and robust error handling.

Primary Interactions

Section titled “Primary Interactions”

Orchestrator Communication

Section titled “Orchestrator Communication”

The Web UI primarily interacts with the Orchestrator through REST APIs and WebSocket connections for real-time data.

REST API

Standard HTTP endpoints for CRUD operations on workflows, agents, and configurations. Provides reliable, stateless communication for data management.

WebSocket

Real-time bidirectional communication for live updates and monitoring. Enables instant notifications and live data streaming.

GraphQL

Efficient data fetching with reduced over-fetching for complex queries. Allows clients to request exactly the data they need.

flowchart TD
    A[Web UI] --> B[Orchestrator API Gateway]
    B --> C[Workflow Service]
    B --> D[Agent Service]
    B --> E[Plugin Service]
    B --> F[Authentication Service]

    A --> G[WebSocket Server]
    G --> H[Real-time Updates]
    G --> I[Live Monitoring]
    G --> J[Event Streaming]

Agent Communication (Indirect)

Section titled “Agent Communication (Indirect)”

While agents don’t communicate directly with the Web UI, the UI manages agent operations through the Orchestrator.

Agent Instructions Interface

  • Agent registration and status monitoring
  • Configuration deployment and updates
  • Health checks and diagnostics

Data Flow Patterns

Section titled “Data Flow Patterns”

Workflow Creation Flow

Section titled “Workflow Creation Flow”
sequenceDiagram
    participant U as User
    participant W as Web UI
    participant O as Orchestrator
    participant DB as Database

    U->>W: Create Workflow
    W->>W: Validate Input
    W->>O: Submit Workflow
    O->>O: Process & Validate
    O->>DB: Store Workflow
    DB->>O: Confirmation
    O->>W: Success Response
    W->>U: Workflow Created

Real-time Monitoring Flow

Section titled “Real-time Monitoring Flow”
flowchart LR
    A[Agent] --> B[Orchestrator]
    B --> C[WebSocket Server]
    C --> D[Web UI Client]
    D --> E[User Dashboard]

    F[Workflow Execution] --> B
    G[Plugin Updates] --> B
    H[System Events] --> B

Plugin Marketplace

Section titled “Plugin Marketplace”

Direct integration with the plugin ecosystem for discovery and management.

flowchart TD
    A[Web UI] --> B[Plugin Marketplace API]
    B --> C[Plugin Registry]
    C --> D[Git Repositories]
    C --> E[Plugin Metadata]

    A --> F[Plugin Installation]
    F --> G[Orchestrator]
    G --> H[Agent Deployment]

State Management

Section titled “State Management”

Client-Side State

Section titled “Client-Side State”

The Web UI manages complex state for user interactions and real-time data.

mindmap
  root((State Management))
    User State
      Authentication
      Profile
      Preferences
    Application State
      Workflows
      Agents
      Plugins
    UI State
      Navigation
      Modals
      Forms
    Real-time State
      Live Updates
      Notifications
      Monitoring

Security Interactions

Section titled “Security Interactions”

Authentication Flow

Section titled “Authentication Flow”

Multi-layered security for all interactions.

flowchart TD
    A[User Login] --> B[JWT Token]
    B --> C[API Requests]
    C --> D[Token Validation]
    D --> E[Permission Check]
    E --> F[Resource Access]

    G[WebSocket] --> H[Token Auth]
    H --> I[Session Validation]
    I --> J[Real-time Access]

Data Protection

Section titled “Data Protection”

Comprehensive security measures for data handling.

  • TLS 1.3 encryption for all communications
  • Certificate pinning for API endpoints
  • Secure WebSocket connections (WSS)

Performance Optimization

Section titled “Performance Optimization”

Caching Strategies

Section titled “Caching Strategies”

Multiple caching layers for optimal performance.

Browser Cache

HTTP caching headers and service worker caching.

API Cache

Redis-based caching for frequently accessed data.

CDN

Global content delivery for static assets.

Monitoring & Analytics

Section titled “Monitoring & Analytics”

Comprehensive monitoring of system interactions.

flowchart LR
    A[Web UI] --> B[Performance Metrics]
    A --> C[Error Tracking]
    A --> D[User Analytics]

    B --> E[Monitoring Dashboard]
    C --> F[Alert System]
    D --> G[Usage Insights]

Error Handling & Recovery

Section titled “Error Handling & Recovery”

Graceful Degradation

Section titled “Graceful Degradation”

Maintains functionality during system issues.

  • Offline mode with cached data
  • Retry mechanisms for failed requests
  • User-friendly error messages