DYNO-UI

2 Squirrels AI

Technology Stack

AI Engine Claude AI
Framework Vercel AI SDK
Frontend Next.js + React
Styling Tailwind CSS
Components shadcn/ui

Architecture Note: AI-powered React component generator with live preview, virtual file system, and iterative refinement through conversational UI.

System Components

🤖
Claude AI
Component Generation
📁
Virtual FS
In-Memory File System
⚡
Live Preview
Hot Reload Sandbox
💬
Chat Interface
Iterative Refinement

AI Component Generation Pipeline

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart LR
    subgraph Input["📥 User Request"]
        UR["💬 Component Description"]
        REF["📸 Reference Image"]
    end

    subgraph Process["⚙️ AI Processing"]
        SP["📝 System Prompt
React + Tailwind Expert"]
        CL["🤖 Claude AI
Anthropic API"]
        ST["📡 Streaming Response"]
    end

    subgraph Parse["🔧 Code Extraction"]
        PE["📦 Parse TSX Blocks"]
        VL["✅ Validate Syntax"]
    end

    subgraph Output["📤 Generated Code"]
        RC["⚛️ React Component"]
        TW["🎨 Tailwind Styles"]
        TS["📝 TypeScript Types"]
    end

    UR --> SP
    REF --> SP
    SP --> CL
    CL --> ST
    ST --> PE
    PE --> VL
    VL --> RC
    VL --> TW
    VL --> TS

Virtual File System Architecture

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart TB
    subgraph Generate["🤖 AI Generation"]
        AI["🤖 Claude Response"]
        CODE["📝 Generated TSX"]
    end

    subgraph VFS["📁 Virtual File System"]
        MAP[("🗺️ File Map
In-Memory")]
        IDX["📋 File Index"]
        VER["🔢 Version Control"]
    end

    subgraph Files["📄 Virtual Files"]
        COMP["⚛️ components/*.tsx"]
        UTIL["🔧 utils/*.ts"]
        STYLE["🎨 styles/*.css"]
    end

    subgraph Preview["⚡ Preview Engine"]
        SAND["📦 Sandpack"]
        HOT["🔥 Hot Reload"]
    end

    AI --> CODE
    CODE --> MAP
    MAP --> IDX
    MAP --> VER
    IDX --> COMP
    IDX --> UTIL
    IDX --> STYLE
    COMP --> SAND
    UTIL --> SAND
    STYLE --> SAND
    SAND --> HOT

Conversational UI Flow

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart TB
    subgraph User["👤 User Interface"]
        MSG["💬 Chat Message"]
        IMG["📸 Image Upload"]
    end

    subgraph Chat["💬 Chat Engine"]
        HIS[("💾 Chat History")]
        CTX["📋 Context Builder"]
    end

    subgraph AI["🤖 Vercel AI SDK"]
        STR["📡 useChat Hook"]
        CL["🧠 Claude API"]
        TOK["📊 Token Stream"]
    end

    subgraph Render["🖥️ UI Render"]
        MD["📝 Markdown Parser"]
        CB["📦 Code Blocks"]
        PRV["⚡ Live Preview"]
    end

    MSG --> HIS
    IMG --> HIS
    HIS --> CTX
    CTX --> STR
    STR --> CL
    CL --> TOK
    TOK --> MD
    MD --> CB
    CB --> PRV

Live Preview Engine

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart LR
    subgraph Code["📝 Generated Code"]
        TSX["⚛️ Component TSX"]
        CSS["🎨 Tailwind Classes"]
    end

    subgraph Bundle["📦 Bundler"]
        ESB["⚡ ESBuild/SWC"]
        DEP["📚 Resolve Deps"]
    end

    subgraph Sandbox["🏖️ Sandpack Runtime"]
        IF["📄 iframe Sandbox"]
        RC["⚛️ React Runtime"]
        TW["🎨 Tailwind CDN"]
    end

    subgraph Display["🖥️ Preview"]
        RND["🎯 Rendered UI"]
        ERR["⚠️ Error Boundary"]
        ACT["🖱️ Interactive"]
    end

    TSX --> ESB
    CSS --> ESB
    ESB --> DEP
    DEP --> IF
    IF --> RC
    IF --> TW
    RC --> RND
    RC --> ERR
    RND --> ACT

Iterative Refinement Loop

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart TB
    subgraph Initial["📥 Initial Request"]
        REQ["💬 Create component"]
    end

    subgraph Generate["🤖 Generation"]
        GEN["🧠 Claude generates"]
        V1["📦 Version 1"]
    end

    subgraph Preview["⚡ Preview"]
        PRV["🖥️ Live Preview"]
        CHK{"✅ Satisfied?"}
    end

    subgraph Refine["🔄 Refinement"]
        FB["💬 User Feedback"]
        CTX["📋 Context + History"]
        UPD["🔧 Update Code"]
    end

    subgraph Final["📤 Output"]
        EXP["📦 Export Code"]
        DL["⬇️ Download"]
    end

    REQ --> GEN
    GEN --> V1
    V1 --> PRV
    PRV --> CHK
    CHK -->|"No"| FB
    FB --> CTX
    CTX --> UPD
    UPD --> PRV
    CHK -->|"Yes"| EXP
    EXP --> DL

Complete System Architecture

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart TB
    subgraph Client["🖥️ Next.js Frontend"]
        UI["💬 Chat UI"]
        PV["⚡ Preview Panel"]
        ED["📝 Code Editor"]
    end

    subgraph API["🔌 API Routes"]
        CH["💬 /api/chat"]
        GN["🤖 /api/generate"]
    end

    subgraph AI["🧠 AI Layer"]
        VER["📦 Vercel AI SDK"]
        CL["🤖 Claude API
Anthropic"]
    end

    subgraph State["💾 State Management"]
        VFS[("📁 Virtual FS")]
        HIST[("💬 Chat History")]
    end

    subgraph Preview["🏖️ Sandpack"]
        SB["📦 Sandbox Runtime"]
        HMR["🔥 Hot Module Reload"]
    end

    UI <--> CH
    UI --> GN
    CH --> VER
    GN --> VER
    VER <--> CL
    VER --> VFS
    CH --> HIST
    VFS --> SB
    SB --> HMR
    HMR --> PV
    VFS --> ED