# richarrrd53/storyboardai2 architecture

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

- Interactive diagram: https://gitdiagram.com/richarrrd53/storyboardai2
- Repository: https://github.com/richarrrd53/storyboardai2

## Overview

Storyboard AI is a web app that helps short-video creators turn story ideas into editable, image-backed storyboards, while also supporting project management, reusable templates, and YouTube video discovery. The main flow runs from the creator UI through the Express API to AI generation and saved projects; discovery separately searches and analyzes videos before converting them into templates. The graph reflects README-documented capabilities and sampled module references; unsampled frontend wiring and database details are shown only where documented, not inferred from naming.

Main entry points: [`server.js`](https://github.com/richarrrd53/storyboardai2/blob/main/server.js) (Express API), [`public/js/main.js`](https://github.com/richarrrd53/storyboardai2/blob/main/public/js/main.js) (Storyboard SPA), [`lib/ai/copilot.js`](https://github.com/richarrrd53/storyboardai2/blob/main/lib/ai/copilot.js) (Creative copilot), [`lib/ai/generation.js`](https://github.com/richarrrd53/storyboardai2/blob/main/lib/ai/generation.js) (Storyboard generation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Creator experience"]
  node_webapp["Storyboard SPA<br/>[main.js]"]
  node_creation_ui["Creation workflow<br/>[creation.js]"]
  node_projects_ui["Project management UI<br/>[projects.js]"]
  node_templates_ui["Template browser<br/>[templates.js]"]
  node_discovery_ui["Discovery UI<br/>[discovery.js]"]
end

subgraph group_projects["Accounts and projects"]
  node_auth["Authentication<br/>[auth-service.js]"]
  node_project_ops["Project operations<br/>[projects.js]"]
end

subgraph group_production["AI creation"]
  node_copilot["Creative copilot<br/>[copilot.js]"]
  node_storyboard["Storyboard generation<br/>[generation.js]"]
  node_ai_config["AI model settings<br/>[model-config.js]"]
  node_creative_policy["Creative request policy"]
end

subgraph group_discovery["Discovery and templates"]
  node_youtube["YouTube search"]
  node_video_analysis["Video analysis<br/>[video-analyzer.js]"]
  node_structure_analysis["Structure extraction"]
  node_template_builder["Discovery template builder"]
  node_template_catalog["Template catalog"]
end

subgraph group_platform["Services and storage"]
  node_api["Express API<br/>[server.js]"]
  node_project_store[("Project and shot data<br/>[prisma.ts]")]
end

node_creator(("Creator"))
node_google_ai{{"Google AI services"}}
node_youtube_api{{"YouTube Data API"}}
node_postgres[("PostgreSQL")]

node_creator -->|"uses"| node_webapp
node_webapp -->|"opens creation"| node_creation_ui
node_webapp -->|"manages projects"| node_projects_ui
node_webapp -->|"browses templates"| node_templates_ui
node_webapp -->|"explores videos"| node_discovery_ui
node_creation_ui -->|"requests creation"| node_api
node_projects_ui -->|"requests project actions"| node_api
node_webapp -->|"supports login"| node_auth
node_auth -->|"authenticates via"| node_api
node_api -->|"reads and writes"| node_project_store
node_project_store -->|"persists data"| node_postgres
node_api -->|"routes copilot requests"| node_copilot
node_api -->|"routes generation"| node_storyboard
node_copilot -->|"parses responses"| node_storyboard
node_copilot -->|"gets model settings"| node_ai_config
node_copilot -->|"applies request policy"| node_creative_policy
node_storyboard -->|"gets model settings"| node_ai_config
node_storyboard -->|"generates text and images"| node_google_ai
node_api -->|"routes searches"| node_youtube
node_api -->|"routes analysis"| node_video_analysis
node_api -->|"routes template creation"| node_template_builder
node_youtube -->|"searches videos"| node_youtube_api
node_video_analysis -->|"analyzes video"| node_google_ai
node_video_analysis -.->|"uses structure rules"| node_structure_analysis
node_template_builder -.->|"creates reusable templates"| node_template_catalog
node_templates_ui -->|"requests templates"| node_api
node_discovery_ui -->|"requests discovery"| node_api

click node_webapp "https://github.com/richarrrd53/storyboardai2/blob/main/public/js/main.js"
click node_creation_ui "https://github.com/richarrrd53/storyboardai2/blob/main/public/js/features/creation.js"
click node_projects_ui "https://github.com/richarrrd53/storyboardai2/blob/main/public/js/features/projects.js"
click node_templates_ui "https://github.com/richarrrd53/storyboardai2/blob/main/public/js/pages/templates.js"
click node_discovery_ui "https://github.com/richarrrd53/storyboardai2/blob/main/public/js/discovery.js"
click node_api "https://github.com/richarrrd53/storyboardai2/blob/main/server.js"
click node_auth "https://github.com/richarrrd53/storyboardai2/blob/main/public/js/features/auth-service.js"
click node_project_ops "https://github.com/richarrrd53/storyboardai2/blob/main/public/js/features/projects.js"
click node_project_store "https://github.com/richarrrd53/storyboardai2/blob/main/lib/prisma.ts"
click node_copilot "https://github.com/richarrrd53/storyboardai2/blob/main/lib/ai/copilot.js"
click node_storyboard "https://github.com/richarrrd53/storyboardai2/blob/main/lib/ai/generation.js"
click node_ai_config "https://github.com/richarrrd53/storyboardai2/blob/main/lib/ai/model-config.js"
click node_creative_policy "https://github.com/richarrrd53/storyboardai2/blob/main/lib/ai/creative-request.js"
click node_youtube "https://github.com/richarrrd53/storyboardai2/blob/main/lib/discovery/youtube-collector.js"
click node_video_analysis "https://github.com/richarrrd53/storyboardai2/blob/main/lib/discovery/video-analyzer.js"
click node_structure_analysis "https://github.com/richarrrd53/storyboardai2/blob/main/lib/discovery/analyzers/short-video-template-lab.js"
click node_template_builder "https://github.com/richarrrd53/storyboardai2/blob/main/lib/discovery/template-builder.js"
click node_template_catalog "https://github.com/richarrrd53/storyboardai2/blob/main/lib/template-catalog.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_creation_ui,node_projects_ui,node_templates_ui,node_discovery_ui toneBlue
class node_auth,node_project_ops,node_postgres toneAmber
class node_copilot,node_storyboard,node_ai_config,node_creative_policy,node_youtube_api toneMint
class node_youtube,node_video_analysis,node_structure_analysis,node_template_builder,node_template_catalog toneRose
class node_api,node_project_store,node_creator,node_google_ai toneIndigo
```

## Components

### Creator experience

- [Storyboard SPA](https://github.com/richarrrd53/storyboardai2/blob/main/public/js/main.js): `public/js/main.js`
- [Creation workflow](https://github.com/richarrrd53/storyboardai2/blob/main/public/js/features/creation.js): `public/js/features/creation.js`
- [Project management UI](https://github.com/richarrrd53/storyboardai2/blob/main/public/js/features/projects.js): `public/js/features/projects.js`
- [Template browser](https://github.com/richarrrd53/storyboardai2/blob/main/public/js/pages/templates.js): `public/js/pages/templates.js`
- [Discovery UI](https://github.com/richarrrd53/storyboardai2/blob/main/public/js/discovery.js): `public/js/discovery.js`

### Accounts and projects

- [Authentication](https://github.com/richarrrd53/storyboardai2/blob/main/public/js/features/auth-service.js): `public/js/features/auth-service.js`
- [Project operations](https://github.com/richarrrd53/storyboardai2/blob/main/public/js/features/projects.js): `public/js/features/projects.js`

### AI creation

- [Creative copilot](https://github.com/richarrrd53/storyboardai2/blob/main/lib/ai/copilot.js): `lib/ai/copilot.js`
- [Storyboard generation](https://github.com/richarrrd53/storyboardai2/blob/main/lib/ai/generation.js): `lib/ai/generation.js`
- [AI model settings](https://github.com/richarrrd53/storyboardai2/blob/main/lib/ai/model-config.js): `lib/ai/model-config.js`
- [Creative request policy](https://github.com/richarrrd53/storyboardai2/blob/main/lib/ai/creative-request.js): `lib/ai/creative-request.js`

### Discovery and templates

- [YouTube search](https://github.com/richarrrd53/storyboardai2/blob/main/lib/discovery/youtube-collector.js): `lib/discovery/youtube-collector.js`
- [Video analysis](https://github.com/richarrrd53/storyboardai2/blob/main/lib/discovery/video-analyzer.js): `lib/discovery/video-analyzer.js`
- [Structure extraction](https://github.com/richarrrd53/storyboardai2/blob/main/lib/discovery/analyzers/short-video-template-lab.js): `lib/discovery/analyzers/short-video-template-lab.js`
- [Discovery template builder](https://github.com/richarrrd53/storyboardai2/blob/main/lib/discovery/template-builder.js): `lib/discovery/template-builder.js`
- [Template catalog](https://github.com/richarrrd53/storyboardai2/blob/main/lib/template-catalog.js): `lib/template-catalog.js`

### Services and storage

- [Express API](https://github.com/richarrrd53/storyboardai2/blob/main/server.js): `server.js`
- [Project and shot data](https://github.com/richarrrd53/storyboardai2/blob/main/lib/prisma.ts): `lib/prisma.ts`

### Other components

- **Creator**
- **Google AI services**
- **YouTube Data API**
- **PostgreSQL**

## Connections

- Creator → Storyboard SPA: uses (evidence: `README.md`)
- Storyboard SPA → Creation workflow: opens creation (evidence: `README.md`)
- Storyboard SPA → Project management UI: manages projects (evidence: `README.md`)
- Storyboard SPA → Template browser: browses templates (evidence: `README.md`)
- Storyboard SPA → Discovery UI: explores videos (evidence: `README.md`)
- Creation workflow → Express API: requests creation (evidence: `README.md`)
- Project management UI → Express API: requests project actions (evidence: `README.md`)
- Storyboard SPA → Authentication: supports login (evidence: `README.md`)
- Authentication → Express API: authenticates via (evidence: `README.md`)
- Express API → Project and shot data: reads and writes (evidence: `README.md`)
- Project and shot data → PostgreSQL: persists data (evidence: `README.md`)
- Express API → Creative copilot: routes copilot requests (evidence: `server.js`)
- Express API → Storyboard generation: routes generation (evidence: `server.js`)
- Creative copilot → Storyboard generation: parses responses (evidence: `lib/ai/copilot.js`)
- Creative copilot → AI model settings: gets model settings (evidence: `lib/ai/copilot.js`)
- Creative copilot → Creative request policy: applies request policy (evidence: `lib/ai/copilot.js`)
- Storyboard generation → AI model settings: gets model settings (evidence: `lib/ai/generation.js`)
- Storyboard generation → Google AI services: generates text and images (evidence: `README.md`)
- Express API → YouTube search: routes searches (evidence: `server.js`)
- Express API → Video analysis: routes analysis (evidence: `server.js`)
- Express API → Discovery template builder: routes template creation (evidence: `server.js`)
- YouTube search → YouTube Data API: searches videos (evidence: `lib/discovery/youtube-collector.js`)
- Video analysis → Google AI services: analyzes video (evidence: `README.md`)
- Video analysis → Structure extraction: uses structure rules
- Discovery template builder → Template catalog: creates reusable templates
- Template browser → Express API: requests templates (evidence: `README.md`)
- Discovery UI → Express API: requests discovery (evidence: `README.md`)