# vm2526867-rgb/clippack architecture

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

- Interactive diagram: https://gitdiagram.com/vm2526867-rgb/clippack
- Repository: https://github.com/vm2526867-rgb/clippack

## Overview

ClipPack is a browser-based video creator assistant: users provide a clip or note, receive platform-specific publishing suggestions, and can prepare thumbnail imagery. Account status, licensing, and usage limits support the generation features. The frontend-to-generation and frontend-to-thumbnail request details are not visible in the excerpts, so those links are marked unverified; the backend’s documented and sampled calls are shown directly.

Main entry points: [`functions/api/generate.js`](https://github.com/vm2526867-rgb/clippack/blob/main/functions/api/generate.js) (Generate endpoint), [`functions/lib/limits.js`](https://github.com/vm2526867-rgb/clippack/blob/main/functions/lib/limits.js) (Plan and quota logic), [`app.js`](https://github.com/vm2526867-rgb/clippack/blob/main/app.js) (ClipPack interface), [`functions/api/thumbnail.js`](https://github.com/vm2526867-rgb/clippack/blob/main/functions/api/thumbnail.js) (Thumbnail endpoint)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Creator experience"]
  node_webapp["ClipPack interface<br/>[app.js]"]
  node_media["Media preparation<br/>[app.js]"]
  node_suggestions["Publishing suggestions<br/>[app.js]"]
  node_thumbui["Thumbnail editor<br/>[app.js]"]
  node_accountui["Account controls<br/>[app.js]"]
end

subgraph group_api["Backend features"]
  node_generate["Generate endpoint<br/>[generate.js]"]
  node_research["Trend research<br/>[generate.js]"]
  node_thumbnail["Thumbnail endpoint<br/>[thumbnail.js]"]
  node_account["Account endpoint<br/>[account.js]"]
end

subgraph group_entitlements["Plans and usage"]
  node_limits["Plan and quota logic<br/>[limits.js]"]
  node_usage[("Usage storage")]
end

subgraph group_integrations["External services"]
  node_gemini["Gemini API"]
  node_search["Google Search"]
  node_workersai["Workers AI"]
  node_lemon["Lemon Squeezy"]
end

node_creator(("Creator"))

node_creator -->|"provides input"| node_webapp
node_webapp -->|"prepares media"| node_media
node_media -.->|"submits frames"| node_generate
node_webapp -.->|"requests suggestions"| node_generate
node_generate -->|"runs first pass"| node_research
node_research -->|"searches trends"| node_gemini
node_research -->|"uses search tool"| node_search
node_generate -->|"generates results"| node_gemini
node_generate -.->|"returns results"| node_suggestions
node_suggestions -.->|"edits thumbnail"| node_thumbui
node_thumbui -.->|"requests image"| node_thumbnail
node_thumbnail -->|"generates image"| node_workersai
node_webapp -->|"opens account controls"| node_accountui
node_accountui -->|"fetches account"| node_account
node_generate -->|"checks and commits quota"| node_limits
node_thumbnail -->|"checks and commits quota"| node_limits
node_account -->|"reads plan and usage"| node_limits
node_limits -->|"reads and writes counts"| node_usage
node_limits -->|"validates licenses"| node_lemon

click node_webapp "https://github.com/vm2526867-rgb/clippack/blob/main/app.js"
click node_media "https://github.com/vm2526867-rgb/clippack/blob/main/app.js"
click node_suggestions "https://github.com/vm2526867-rgb/clippack/blob/main/app.js"
click node_thumbui "https://github.com/vm2526867-rgb/clippack/blob/main/app.js"
click node_generate "https://github.com/vm2526867-rgb/clippack/blob/main/functions/api/generate.js"
click node_research "https://github.com/vm2526867-rgb/clippack/blob/main/functions/api/generate.js"
click node_thumbnail "https://github.com/vm2526867-rgb/clippack/blob/main/functions/api/thumbnail.js"
click node_accountui "https://github.com/vm2526867-rgb/clippack/blob/main/app.js"
click node_account "https://github.com/vm2526867-rgb/clippack/blob/main/functions/api/account.js"
click node_limits "https://github.com/vm2526867-rgb/clippack/blob/main/functions/lib/limits.js"

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_webapp,node_media,node_suggestions,node_thumbui,node_accountui toneBlue
class node_generate,node_research,node_thumbnail,node_account toneAmber
class node_limits,node_usage toneMint
class node_gemini,node_search,node_workersai,node_lemon toneRose
class node_creator toneIndigo
```

## Components

### Creator experience

- [ClipPack interface](https://github.com/vm2526867-rgb/clippack/blob/main/app.js): `app.js`
- [Media preparation](https://github.com/vm2526867-rgb/clippack/blob/main/app.js): `app.js`
- [Publishing suggestions](https://github.com/vm2526867-rgb/clippack/blob/main/app.js): `app.js`
- [Thumbnail editor](https://github.com/vm2526867-rgb/clippack/blob/main/app.js): `app.js`
- [Account controls](https://github.com/vm2526867-rgb/clippack/blob/main/app.js): `app.js`

### Backend features

- [Generate endpoint](https://github.com/vm2526867-rgb/clippack/blob/main/functions/api/generate.js): `functions/api/generate.js`
- [Trend research](https://github.com/vm2526867-rgb/clippack/blob/main/functions/api/generate.js): `functions/api/generate.js`
- [Thumbnail endpoint](https://github.com/vm2526867-rgb/clippack/blob/main/functions/api/thumbnail.js): `functions/api/thumbnail.js`
- [Account endpoint](https://github.com/vm2526867-rgb/clippack/blob/main/functions/api/account.js): `functions/api/account.js`

### Plans and usage

- [Plan and quota logic](https://github.com/vm2526867-rgb/clippack/blob/main/functions/lib/limits.js): `functions/lib/limits.js`
- **Usage storage**

### External services

- **Gemini API**
- **Google Search**
- **Workers AI**
- **Lemon Squeezy**

### Other components

- **Creator**

## Connections

- Creator → ClipPack interface: provides input (evidence: `app.js`)
- ClipPack interface → Media preparation: prepares media (evidence: `app.js`)
- Media preparation → Generate endpoint: submits frames
- ClipPack interface → Generate endpoint: requests suggestions
- Generate endpoint → Trend research: runs first pass (evidence: `functions/api/generate.js`)
- Trend research → Gemini API: searches trends (evidence: `functions/api/generate.js`)
- Trend research → Google Search: uses search tool (evidence: `functions/api/generate.js`)
- Generate endpoint → Gemini API: generates results (evidence: `functions/api/generate.js`)
- Generate endpoint → Publishing suggestions: returns results
- Publishing suggestions → Thumbnail editor: edits thumbnail (evidence: `app.js`)
- Thumbnail editor → Thumbnail endpoint: requests image
- Thumbnail endpoint → Workers AI: generates image (evidence: `functions/api/thumbnail.js`)
- ClipPack interface → Account controls: opens account controls (evidence: `app.js`)
- Account controls → Account endpoint: fetches account (evidence: `app.js`)
- Generate endpoint → Plan and quota logic: checks and commits quota (evidence: `functions/api/generate.js`)
- Thumbnail endpoint → Plan and quota logic: checks and commits quota (evidence: `functions/api/thumbnail.js`)
- Account endpoint → Plan and quota logic: reads plan and usage (evidence: `functions/api/account.js`)
- Plan and quota logic → Usage storage: reads and writes counts (evidence: `functions/lib/limits.js`)
- Plan and quota logic → Lemon Squeezy: validates licenses (evidence: `functions/lib/limits.js`)