SUI Dynamic Component Generation Flow - breadboard-ai/breadboard GitHub Wiki

sequenceDiagram
    participant Host as Host Environment / Renderer
    participant PromptBuilder as Prompt Builder (in Host)
    participant LLM as Generator LLM
    participant Sandbox as Sandbox Environment
    participant GenCode as Generated Code (in Sandbox)
    participant User

    %% Step 1: Prompt Assembly
    Host->>PromptBuilder: Provide component definitions & data
    PromptBuilder->>LLM: Send complete prompt (API spec, component def, data, task)
    
    %% Step 2: Code Generation & Execution
    LLM-->>Host: Return TypeScript code string ("function createProfileCard() { ... }")
    Host->>Sandbox: Inject and execute `createProfileCard()` function
    
    %% Step 3: Initial Render
    activate GenCode
    GenCode->>Sandbox: suip.create('Card')
    GenCode->>Sandbox: suip.render(cardComponent)
    deactivate GenCode
    
    activate Sandbox
    Sandbox->>Host: JSON-RPC Request: suip/handshake
    Host-->>Sandbox: JSON-RPC Response
    Sandbox->>Host: JSON-RPC Notification: suip/append, suip/replace, etc.
    deactivate Sandbox

    activate Host
    Host->>User: Display rendered card UI
    deactivate Host
    
    %% Step 4: User Interaction Loop
    User->>Host: Click "Accept" button
    activate Host
    Host->>Sandbox: JSON-RPC Request: suip/event (handler: 'onClick_accept', ...)
    deactivate Host
    
    activate Sandbox
    Sandbox->>GenCode: Invoke onClick handler
    deactivate Sandbox
    
    activate GenCode
    GenCode->>GenCode: Modify statusText.content
    GenCode->>Sandbox: suip.update(statusText)
    deactivate GenCode
    
    activate Sandbox
    Sandbox->>Host: JSON-RPC Notification: suip/replace (for statusText)
    deactivate Sandbox
    
    activate Host
    Host->>User: Update UI to show "Status: Accepted!"
    deactivate Host

sequenceDiagram
    participant Host as Host Environment / Renderer
    participant PromptBuilder as Prompt Builder (in Host)
    participant LLM as Generator LLM
    participant Sandbox as Sandbox Environment
    participant GenCode as Generated Code (in Sandbox)
    participant User

    %% Steps 1 & 2 are largely the same
    Host->>PromptBuilder: Provide component definitions & data
    PromptBuilder->>LLM: Send complete prompt
    LLM-->>Host: Return TypeScript code string
    Host->>Sandbox: Inject and execute `createProfileCard()` function
    
    %% Step 3: Optimized Initial Render
    activate GenCode
    GenCode->>Sandbox: suip.render(cardComponent)
    deactivate GenCode
    
    activate Sandbox
    Note over Sandbox, Host: Handshake can happen earlier/in parallel
    Sandbox->>Host: JSON-RPC Request: suip/batchRender (sends entire initial tree)
    deactivate Sandbox

    activate Host
    Host->>User: Display rendered card UI
    deactivate Host
    
    %% Step 4: OPTIMIZED User Interaction Loop
    User->>Host: Click "Accept" button
    
    activate Host
    Host->>Sandbox: JSON-RPC Request: suip/event (handler: 'onClick_accept', ...)
    deactivate Host
    
    activate Sandbox
    Sandbox->>GenCode: Invoke onClick handler
    
    activate GenCode
    GenCode->>GenCode: Modify statusText.content
    GenCode-->>Sandbox: return operations: [{op: 'replace', ...}]
    deactivate GenCode
    
    Sandbox-->>Host: JSON-RPC Response (result contains UI operations)
    deactivate Sandbox
    
    activate Host
    Host->>Host: Apply operations from response
    Host->>User: Update UI to show "Status: Accepted!"
    deactivate Host