# yc-2018/claude-cli-ui architecture

> Architecture diagram of the GitHub repository yc-2018/claude-cli-ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/yc-2018/claude-cli-ui
- Repository: https://github.com/yc-2018/claude-cli-ui

## Overview

claude-cli-UI is a local Electron desktop client for Claude CLI. Users select or create a project workspace, choose a conversation, compose a prompt with model/command options and attachments, then follow the streamed Claude response and tool activity. Projects and app state persist locally; CLI-backed conversations can refresh from Claude history and synchronize titles or branches. The main process also owns desktop notifications and settings, while update handling is a separate capability. The excerpts show the IPC boundary and selected persistence logic; some feature wiring is supported by the README rather than sampled implementation.

Main entry points: [`src/App.tsx`](https://github.com/yc-2018/claude-cli-ui/blob/main/src/App.tsx) (App coordinator), [`electron/main.ts`](https://github.com/yc-2018/claude-cli-ui/blob/main/electron/main.ts) (Desktop main process), [`electron/preload.ts`](https://github.com/yc-2018/claude-cli-ui/blob/main/electron/preload.ts) (IPC bridge), [`src/Composer.tsx`](https://github.com/yc-2018/claude-cli-ui/blob/main/src/Composer.tsx) (Prompt composer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_renderer["Desktop interface"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_sidebar["Projects and settings<br/>[Sidebar.tsx]"]
  node_composer["Prompt composer<br/>[Composer.tsx]"]
  node_conversation["Response timeline"]
  node_attachment["Attachment preview"]
  node_renderer_entry["Renderer entry<br/>[main.tsx]"]
end

subgraph group_bridge["Electron runtime"]
  node_preload["IPC bridge<br/>[preload.ts]"]
  node_main["Desktop main process<br/>[main.ts]"]
end

subgraph group_history["Conversation state"]
  node_storage[("Project state<br/>[storage.ts]")]
  node_claude_history[("Claude history files")]
end

subgraph group_updates["App updates"]
  node_update_manager["Update manager<br/>[update-manager.ts]"]
end

node_user(("User"))
node_cli["Claude CLI"]
node_os["Windows desktop"]
node_local_storage[("Browser local storage")]
node_workspace[("Project workspace")]
node_github["GitHub Releases"]

node_user -->|"uses"| node_app
node_renderer_entry -->|"renders"| node_app
node_app -->|"renders"| node_sidebar
node_app -->|"renders"| node_composer
node_app -->|"renders"| node_conversation
node_composer -->|"previews"| node_attachment
node_app -->|"loads and saves"| node_storage
node_storage -->|"reads and writes"| node_local_storage
node_app -->|"invokes IPC"| node_preload
node_preload -->|"forwards requests"| node_main
node_main -->|"sends events"| node_preload
node_preload -->|"delivers events"| node_app
node_main -->|"runs commands"| node_cli
node_main -->|"reads and updates"| node_claude_history
node_main -->|"accesses files"| node_workspace
node_main -->|"notifies and opens"| node_os
node_main -.->|"manages updates"| node_update_manager
node_update_manager -.->|"checks and downloads"| node_github

click node_app "https://github.com/yc-2018/claude-cli-ui/blob/main/src/App.tsx"
click node_sidebar "https://github.com/yc-2018/claude-cli-ui/blob/main/src/Sidebar.tsx"
click node_composer "https://github.com/yc-2018/claude-cli-ui/blob/main/src/Composer.tsx"
click node_conversation "https://github.com/yc-2018/claude-cli-ui/blob/main/src/ConversationView.tsx"
click node_attachment "https://github.com/yc-2018/claude-cli-ui/blob/main/src/AttachmentPreview.tsx"
click node_renderer_entry "https://github.com/yc-2018/claude-cli-ui/blob/main/src/main.tsx"
click node_preload "https://github.com/yc-2018/claude-cli-ui/blob/main/electron/preload.ts"
click node_main "https://github.com/yc-2018/claude-cli-ui/blob/main/electron/main.ts"
click node_storage "https://github.com/yc-2018/claude-cli-ui/blob/main/src/storage.ts"
click node_update_manager "https://github.com/yc-2018/claude-cli-ui/blob/main/electron/update-manager.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_sidebar,node_composer,node_conversation,node_attachment,node_renderer_entry,node_user toneBlue
class node_preload,node_main,node_local_storage,node_workspace toneAmber
class node_storage,node_claude_history toneMint
class node_update_manager toneRose
class node_cli,node_os,node_github toneIndigo
```

## Components

### Desktop interface

- [App coordinator](https://github.com/yc-2018/claude-cli-ui/blob/main/src/App.tsx): `src/App.tsx`
- [Projects and settings](https://github.com/yc-2018/claude-cli-ui/blob/main/src/Sidebar.tsx): `src/Sidebar.tsx`
- [Prompt composer](https://github.com/yc-2018/claude-cli-ui/blob/main/src/Composer.tsx): `src/Composer.tsx`
- [Response timeline](https://github.com/yc-2018/claude-cli-ui/blob/main/src/ConversationView.tsx): `src/ConversationView.tsx`
- [Attachment preview](https://github.com/yc-2018/claude-cli-ui/blob/main/src/AttachmentPreview.tsx): `src/AttachmentPreview.tsx`
- [Renderer entry](https://github.com/yc-2018/claude-cli-ui/blob/main/src/main.tsx): `src/main.tsx`

### Electron runtime

- [IPC bridge](https://github.com/yc-2018/claude-cli-ui/blob/main/electron/preload.ts): `electron/preload.ts`
- [Desktop main process](https://github.com/yc-2018/claude-cli-ui/blob/main/electron/main.ts): `electron/main.ts`

### Conversation state

- [Project state](https://github.com/yc-2018/claude-cli-ui/blob/main/src/storage.ts): `src/storage.ts`
- **Claude history files**

### App updates

- [Update manager](https://github.com/yc-2018/claude-cli-ui/blob/main/electron/update-manager.ts): `electron/update-manager.ts`

### Other components

- **User**
- **Claude CLI**
- **Windows desktop**
- **Browser local storage**
- **Project workspace**
- **GitHub Releases**

## Connections

- User → App coordinator: uses
- Renderer entry → App coordinator: renders
- App coordinator → Projects and settings: renders
- App coordinator → Prompt composer: renders
- App coordinator → Response timeline: renders
- Prompt composer → Attachment preview: previews
- App coordinator → Project state: loads and saves
- Project state → Browser local storage: reads and writes
- App coordinator → IPC bridge: invokes IPC
- IPC bridge → Desktop main process: forwards requests
- Desktop main process → IPC bridge: sends events
- IPC bridge → App coordinator: delivers events
- Desktop main process → Claude CLI: runs commands
- Desktop main process → Claude history files: reads and updates
- Desktop main process → Project workspace: accesses files
- Desktop main process → Windows desktop: notifies and opens
- Desktop main process → Update manager: manages updates
- Update manager → GitHub Releases: checks and downloads