Bolt.diy Architecture

graph TD
    subgraph User["User Layer"]
        BROWSER["Browser Client"]
        ELECTRON["Electron Desktop App"]
    end

    subgraph Frontend["Frontend · Remix + React"]
        CHAT["Chat Interface"]
        WB["Workbench Panel"]
        EDITOR["CodeMirror Editor"]
        TERM["Integrated Terminal"]
        PREVIEW["Live Preview"]
    end

    subgraph Server["Server Layer · Remix SSR"]
        API_CHAT["api.chat Action"]
        API_MODELS["api.models Route"]
        API_DEPLOY["api.deploy Routes"]
        API_GIT["api.git Routes"]
    end

    subgraph LLM["LLM Provider Layer"]
        MGR["LLM Manager"]
        REG["Provider Registry"]
        STREAM["Stream Text Engine"]
        PROVIDERS["22 Provider Adapters"]
    end

    subgraph Runtime["Runtime Engine"]
        PARSER["Message Parser"]
        RUNNER["Action Runner"]
    end

    subgraph Sandbox["WebContainer Sandbox"]
        FS["Virtual Filesystem"]
        NODE["Node.js Runtime"]
        DEV["Dev Server"]
    end

    subgraph Deploy["Deploy Targets"]
        NETLIFY["Netlify"]
        VERCEL["Vercel"]
        GHPAGES["GitHub Pages"]
    end

    BROWSER --> CHAT
    ELECTRON --> CHAT
    CHAT --> API_CHAT
    API_CHAT --> MGR
    MGR --> REG
    MGR --> STREAM
    STREAM --> PROVIDERS
    STREAM --> PARSER
    PARSER --> RUNNER
    RUNNER --> FS
    NODE --> DEV
    DEV --> PREVIEW
    WB --> EDITOR
    WB --> TERM
    WB --> PREVIEW
    EDITOR --> FS
    API_DEPLOY --> NETLIFY
    API_DEPLOY --> VERCEL
    API_DEPLOY --> GHPAGES
                

sequenceDiagram
    participant U as User
    participant C as Chat UI
    participant S as Remix Server
    participant L as LLM Provider
    participant P as Message Parser
    participant R as Action Runner
    participant W as WebContainer

    U->>C: Types prompt
    C->>S: POST /api/chat
    S->>S: Extract model + provider from message
    S->>S: Optional: summarize context + select files
    S->>L: streamText() via Vercel AI SDK
    L-->>S: Streaming response chunks
    S-->>C: Data stream with progress annotations
    C->>P: Feed streaming tokens to StreamingMessageParser
    P->>P: Detect boltArtifact and boltAction tags
    P->>R: Emit actions (file, shell, start, build, supabase)
    R->>W: Write files to virtual filesystem
    R->>W: Spawn shell commands (npm install, etc.)
    W->>W: Node.js compiles + runs dev server
    W-->>C: Preview iframe shows running app
    C-->>U: Live app preview + editable code
                

graph LR
    subgraph Registry["Provider Registry"]
        BP["BaseProvider"]
        REG["registry.ts"]
        MGR["LLMManager"]
    end

    subgraph Cloud["Cloud Providers"]
        OAI["OpenAI"]
        ANT["Anthropic"]
        GGL["Google Gemini"]
        GRQ["Groq"]
        DS["DeepSeek"]
        MST["Mistral"]
        COH["Cohere"]
        TOG["Together"]
        PPX["Perplexity"]
        HF["HuggingFace"]
        OR["OpenRouter"]
        XAI["xAI"]
        MS["Moonshot"]
        HYP["Hyperbolic"]
        FW["Fireworks"]
        GH["GitHub Models"]
        BED["Amazon Bedrock"]
        ZAI["z.AI"]
        CEL["Cerebras"]
    end

    subgraph Local["Local Providers"]
        OLL["Ollama"]
        LMS["LM Studio"]
        OAL["OpenAI-Like"]
    end

    subgraph SDK["Vercel AI SDK"]
        ST["streamText()"]
        MC["Model Config"]
    end

    BP --> OAI & ANT & GGL & GRQ & DS
    BP --> MST & COH & TOG & PPX & HF
    BP --> OR & XAI & MS & HYP & FW
    BP --> GH & BED & ZAI & CEL
    BP --> OLL & LMS & OAL
    MGR --> REG
    REG --> BP
    MGR --> ST
    ST --> MC
                

stateDiagram-v2
    [*] --> Scanning: Token arrives
    Scanning --> QuickAction: Detect bolt-quick-actions tag
    Scanning --> ArtifactOpen: Detect boltArtifact tag
    QuickAction --> Scanning: Close tag
    ArtifactOpen --> ActionScan: Extract title + type
    ActionScan --> ActionOpen: Detect boltAction tag
    ActionOpen --> ActionStreaming: Stream content
    ActionStreaming --> ActionClose: Detect close tag
    ActionClose --> ActionScan: More actions?
    ActionScan --> ArtifactClose: Detect close boltArtifact
    ArtifactClose --> Scanning: Continue parsing
    Scanning --> [*]: Stream ends
                

graph TD
    subgraph Input["Parser Output"]
        PA["Parsed Action"]
    end

    subgraph Queue["Action Queue"]
        ADD["addAction()"]
        CHAIN["Promise Chain"]
        EXEC["executeAction()"]
    end

    subgraph Dispatch["Type Dispatcher"]
        FILE["runFileAction()"]
        SHELL["runShellAction()"]
        BUILD["runBuildAction()"]
        START["runStartAction()"]
        SUPA["runSupabaseAction()"]
    end

    subgraph WC["WebContainer"]
        VFS["Virtual FS Write"]
        SPAWN["spawn() Process"]
        DEVS["Dev Server"]
    end

    subgraph State["Action State"]
        PENDING["pending"]
        RUNNING["running"]
        COMPLETE["complete"]
        FAILED["failed"]
        ABORTED["aborted"]
    end

    PA --> ADD
    ADD --> PENDING
    ADD --> CHAIN
    CHAIN --> EXEC
    EXEC --> RUNNING
    EXEC --> FILE & SHELL & BUILD & START & SUPA
    FILE --> VFS
    SHELL --> SPAWN
    BUILD --> SPAWN
    START --> DEVS
    SUPA --> SPAWN
    VFS --> COMPLETE
    SPAWN --> COMPLETE
    SPAWN --> FAILED
    DEVS --> COMPLETE
                

graph TD
    subgraph Browser["Browser Environment"]
        APP["Bolt.diy App"]
        SW["Service Worker"]
        WASM["WebAssembly Runtime"]
    end

    subgraph WC["WebContainer"]
        VFS["Virtual Filesystem
(in-memory)"]
        NODE["Node.js Process"]
        NPM["npm / pnpm"]
        VITE["Vite / Next.js / etc."]
    end

    subgraph IO["I/O Layer"]
        TERM["Terminal Stream"]
        PREV["Preview iframe"]
        EDIT["Editor Sync"]
    end

    APP -->|"boot()"| WASM
    WASM --> VFS
    WASM --> NODE
    APP -->|"writeFile()"| VFS
    APP -->|"spawn()"| NODE
    NODE --> NPM
    NPM -->|"install deps"| VFS
    NODE --> VITE
    VITE -->|"dev server"| SW
    SW -->|"localhost proxy"| PREV
    NODE -->|"stdout/stderr"| TERM
    VFS -->|"file changes"| EDIT
                

graph LR
    subgraph Header["Header Bar"]
        LOGO["Logo + Nav"]
        PROV["Provider Selector"]
        SETTINGS["Settings"]
    end

    subgraph Left["Left Panel"]
        SIDEBAR["Chat History Sidebar"]
        CHATUI["Chat Messages"]
        INPUT["Prompt Input + File Attach"]
    end

    subgraph Right["Right Panel · Workbench"]
        subgraph Tabs["Tab Bar"]
            CODE["Code Tab"]
            PREVTAB["Preview Tab"]
        end
        subgraph Editor["Code Editor"]
            CM["CodeMirror"]
            FILETREE["File Tree"]
            DIFF["Diff View"]
        end
        subgraph Bottom["Bottom Panel"]
            TERMINAL["Terminal"]
            LOGS["Console Output"]
        end
        subgraph Preview["Preview Panel"]
            IFRAME["Live Preview iframe"]
            QRCODE["QR Code (Mobile)"]
        end
    end

    CHATUI --> Right
    CM --> FILETREE
    IFRAME --> QRCODE
                

graph LR
    subgraph Build["Build Phase"]
        BA["Build Action"]
        WC["WebContainer"]
        OUT["Build Output
(dist/ or build/)"]
    end

    subgraph Package["Package Phase"]
        ZIP["ZIP Archive"]
        API["Deploy API Routes"]
    end

    subgraph Targets["Deploy Targets"]
        N["Netlify
api.netlify-deploy"]
        V["Vercel
api.vercel-deploy"]
        G["GitHub Pages
api.git Routes"]
    end

    subgraph Auth["Auth Routes"]
        NA["api.netlify-user"]
        VA["api.vercel-user"]
        GA["api.github-*"]
    end

    BA --> WC --> OUT
    OUT --> ZIP
    ZIP --> API
    API --> N & V & G
    NA --> N
    VA --> V
    GA --> G
                

graph TD
    subgraph Core["Core Stores"]
        CHAT["chat.ts
Conversation state"]
        FILES["files.ts
Project files"]
        EDITOR["editor.ts
Editor config"]
        WB["workbench.ts
Workspace layout"]
        TERM["terminal.ts
Terminal output"]
    end

    subgraph Integration["Integration Stores"]
        GH["github.ts"]
        GHC["githubConnection.ts"]
        GLC["gitlabConnection.ts"]
        NET["netlify.ts"]
        VER["vercel.ts"]
        SUP["supabase.ts"]
    end

    subgraph Feature["Feature Stores"]
        SET["settings.ts"]
        THM["theme.ts"]
        PRF["profile.ts"]
        LOG["logs.ts"]
        STR["streaming.ts"]
    end

    subgraph UI["UI Stores"]
        PRV["previews.ts"]
        QR["qrCodeStore.ts"]
        MCP["mcp.ts"]
        TAB["tabConfigurationStore.ts"]
    end

    CHAT --> FILES
    CHAT --> STR
    FILES --> EDITOR
    FILES --> WB
    WB --> PRV
    WB --> TERM
    SET --> THM
                

graph TD
    subgraph Root["Repository Root"]
        PKG["package.json"]
        VITE["vite.config.ts"]
        DOCKER["Dockerfile + docker-compose"]
        ELEC["electron/"]
        FN["functions/"]
    end

    subgraph App["app/"]
        ENTRY_C["entry.client.tsx"]
        ENTRY_S["entry.server.tsx"]
        ROOT_TSX["root.tsx"]
    end

    subgraph Routes["app/routes/ · 38 routes"]
        R_IDX["_index.tsx"]
        R_CHAT["chat.$id.tsx"]
        R_API["api.chat.ts"]
        R_MOD["api.models.ts"]
        R_DEP["api.*-deploy.ts"]
        R_GIT["api.git*.ts"]
        R_WC["webcontainer.*.tsx"]
    end

    subgraph Components["app/components/"]
        C_CHAT["chat/"]
        C_WB["workbench/"]
        C_ED["editor/codemirror/"]
        C_DEP["deploy/"]
        C_GIT["git/"]
        C_SET["@settings/"]
        C_HEAD["header/"]
        C_SIDE["sidebar/"]
        C_UI["ui/"]
    end

    subgraph Lib["app/lib/"]
        L_SRV[".server/llm/"]
        L_MOD["modules/llm/"]
        L_RT["runtime/"]
        L_WC["webcontainer/"]
        L_STORE["stores/ (20 files)"]
        L_SVC["services/"]
        L_HOOKS["hooks/"]
        L_PERSIST["persistence/"]
    end

    App --> Routes
    App --> Components
    App --> Lib
    Routes --> L_SRV
    Components --> L_STORE
    L_RT --> L_WC
    L_SRV --> L_MOD