# madxgunman/vibe-cording architecture

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

- Interactive diagram: https://gitdiagram.com/madxgunman/vibe-cording
- Repository: https://github.com/madxgunman/vibe-cording

## Overview

Vibe Corder is an AI website builder: users submit a prompt, watch generated code stream, then preview and refine projects in the editor. Generation and revision routes invoke model providers and persist project conversations, code, and versions through Firestore. The README also describes responsive previews, community publishing, project management, and active-generation tracking; their UI paths are shown, but publishing internals are not present in the supplied tree. Edges reflect sampled route and provider behavior; unsampled page wiring is intentionally limited.

Main entry points: [`src/app/api/projects/stream/route.ts`](https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/projects/stream/route.ts) (Generation stream API), [`src/app/api/projects/revise-stream/route.ts`](https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/projects/revise-stream/route.ts) (Revision stream API), [`src/lib/firestore-admin.ts`](https://github.com/madxgunman/vibe-cording/blob/master/src/lib/firestore-admin.ts) (Server data access), [`src/lib/firestore.ts`](https://github.com/madxgunman/vibe-cording/blob/master/src/lib/firestore.ts) (Client data access)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Product experience"]
  node_generate["Generation workspace<br/>[page.tsx]"]
  node_editor["Visual editor<br/>[page.tsx]"]
  node_preview["Website preview<br/>[page.tsx]"]
  node_projects["My projects<br/>[page.tsx]"]
  node_community["Community gallery<br/>[page.tsx]"]
  node_active["Active generations<br/>[page.tsx]"]
  node_generation_state["Generation tracking"]
end

subgraph group_generation["AI generation"]
  node_stream_route["Generation stream API<br/>[route.ts]"]
  node_create_route["Project creation API<br/>[route.ts]"]
  node_revise_route["Revision API<br/>[route.ts]"]
  node_revise_stream["Revision stream API<br/>[route.ts]"]
  node_ai["AI generation services<br/>[ai.ts]"]
  node_prompts["Generation prompts<br/>[index.ts]"]
  node_models["Model catalog<br/>[models.ts]"]
end

subgraph group_identity["Identity"]
  node_login["Sign-in and signup<br/>[page.tsx]"]
  node_auth_provider["Authentication state<br/>[AuthProvider.tsx]"]
  node_send_otp["Send verification code<br/>[route.ts]"]
  node_verify_otp["Verify code<br/>[route.ts]"]
end

subgraph group_data["Persistence"]
  node_firestore_admin["Server data access<br/>[firestore-admin.ts]"]
  node_firestore_client["Client data access<br/>[firestore.ts]"]
  node_firebase_admin["Firebase admin services<br/>[firebase-admin.ts]"]
end

node_user(("Website creator"))
node_model_providers{{"AI model providers"}}
node_auth_service{{"Firebase authentication"}}
node_email_service{{"Resend email"}}
node_firestore[("Cloud Firestore")]

node_user -->|"submits prompt"| node_generate
node_generate -->|"requests stream"| node_stream_route
node_generate -->|"tracks progress"| node_generation_state
node_stream_route -->|"selects model"| node_models
node_stream_route -->|"loads instructions"| node_prompts
node_stream_route -->|"generates stream"| node_model_providers
node_stream_route -->|"saves project"| node_firestore_admin
node_create_route -->|"enhances and generates"| node_ai
node_create_route -->|"saves project"| node_firestore_admin
node_editor -->|"requests revision"| node_revise_route
node_editor -->|"requests revision stream"| node_revise_stream
node_revise_route -->|"enhances and revises"| node_ai
node_revise_route -->|"loads and saves"| node_firestore_admin
node_revise_stream -->|"selects model"| node_models
node_revise_stream -->|"loads instructions"| node_prompts
node_revise_stream -->|"generates stream"| node_model_providers
node_revise_stream -->|"loads and saves"| node_firestore_admin
node_ai -->|"calls models"| node_model_providers
node_login -->|"uses auth"| node_auth_provider
node_auth_provider -->|"authenticates user"| node_auth_service
node_auth_provider -->|"loads user profile"| node_firestore_client
node_firestore_client -->|"reads and writes"| node_firestore
node_login -->|"requests code"| node_send_otp
node_login -->|"submits code"| node_verify_otp
node_send_otp -->|"checks and stores code"| node_firebase_admin
node_send_otp -->|"sends code"| node_email_service
node_verify_otp -->|"checks code"| node_firebase_admin
node_firebase_admin -->|"accesses records"| node_firestore
node_firestore_admin -->|"reads and writes"| node_firestore
node_projects -->|"loads projects"| node_firestore_client
node_community -->|"loads gallery"| node_firestore_client
node_active -->|"shows activity"| node_generation_state
node_user -->|"edits project"| node_editor
node_user -->|"manages projects"| node_projects
node_user -->|"explores projects"| node_community
node_user -->|"checks activity"| node_active
node_user -->|"views website"| node_preview

click node_generate "https://github.com/madxgunman/vibe-cording/blob/master/src/app/generate/page.tsx"
click node_editor "https://github.com/madxgunman/vibe-cording/blob/master/src/app/editor/%5Bid%5D/page.tsx"
click node_preview "https://github.com/madxgunman/vibe-cording/blob/master/src/app/preview/%5Bid%5D/page.tsx"
click node_projects "https://github.com/madxgunman/vibe-cording/blob/master/src/app/projects/page.tsx"
click node_community "https://github.com/madxgunman/vibe-cording/blob/master/src/app/community/page.tsx"
click node_active "https://github.com/madxgunman/vibe-cording/blob/master/src/app/active/page.tsx"
click node_generation_state "https://github.com/madxgunman/vibe-cording/blob/master/src/components/ActiveGenerationsProvider.tsx"
click node_stream_route "https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/projects/stream/route.ts"
click node_create_route "https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/projects/create/route.ts"
click node_revise_route "https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/projects/revise/route.ts"
click node_revise_stream "https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/projects/revise-stream/route.ts"
click node_ai "https://github.com/madxgunman/vibe-cording/blob/master/src/lib/ai.ts"
click node_prompts "https://github.com/madxgunman/vibe-cording/blob/master/src/prompts/index.ts"
click node_models "https://github.com/madxgunman/vibe-cording/blob/master/src/lib/models.ts"
click node_login "https://github.com/madxgunman/vibe-cording/blob/master/src/app/login/page.tsx"
click node_auth_provider "https://github.com/madxgunman/vibe-cording/blob/master/src/components/AuthProvider.tsx"
click node_send_otp "https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/auth/send-otp/route.ts"
click node_verify_otp "https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/auth/verify-otp/route.ts"
click node_firestore_admin "https://github.com/madxgunman/vibe-cording/blob/master/src/lib/firestore-admin.ts"
click node_firestore_client "https://github.com/madxgunman/vibe-cording/blob/master/src/lib/firestore.ts"
click node_firebase_admin "https://github.com/madxgunman/vibe-cording/blob/master/src/lib/firebase-admin.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_generate,node_editor,node_preview,node_projects,node_community,node_active,node_generation_state toneBlue
class node_stream_route,node_create_route,node_revise_route,node_revise_stream,node_ai,node_prompts,node_models,node_firestore toneAmber
class node_login,node_auth_provider,node_send_otp,node_verify_otp toneMint
class node_firestore_admin,node_firestore_client,node_firebase_admin toneRose
class node_user,node_model_providers,node_auth_service,node_email_service toneIndigo
```

## Components

### Product experience

- [Generation workspace](https://github.com/madxgunman/vibe-cording/blob/master/src/app/generate/page.tsx): `src/app/generate/page.tsx`
- [Visual editor](https://github.com/madxgunman/vibe-cording/blob/master/src/app/editor/%5Bid%5D/page.tsx): `src/app/editor/[id]/page.tsx`
- [Website preview](https://github.com/madxgunman/vibe-cording/blob/master/src/app/preview/%5Bid%5D/page.tsx): `src/app/preview/[id]/page.tsx`
- [My projects](https://github.com/madxgunman/vibe-cording/blob/master/src/app/projects/page.tsx): `src/app/projects/page.tsx`
- [Community gallery](https://github.com/madxgunman/vibe-cording/blob/master/src/app/community/page.tsx): `src/app/community/page.tsx`
- [Active generations](https://github.com/madxgunman/vibe-cording/blob/master/src/app/active/page.tsx): `src/app/active/page.tsx`
- [Generation tracking](https://github.com/madxgunman/vibe-cording/blob/master/src/components/ActiveGenerationsProvider.tsx): `src/components/ActiveGenerationsProvider.tsx`

### AI generation

- [Generation stream API](https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/projects/stream/route.ts): `src/app/api/projects/stream/route.ts`
- [Project creation API](https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/projects/create/route.ts): `src/app/api/projects/create/route.ts`
- [Revision API](https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/projects/revise/route.ts): `src/app/api/projects/revise/route.ts`
- [Revision stream API](https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/projects/revise-stream/route.ts): `src/app/api/projects/revise-stream/route.ts`
- [AI generation services](https://github.com/madxgunman/vibe-cording/blob/master/src/lib/ai.ts): `src/lib/ai.ts`
- [Generation prompts](https://github.com/madxgunman/vibe-cording/blob/master/src/prompts/index.ts): `src/prompts/index.ts`
- [Model catalog](https://github.com/madxgunman/vibe-cording/blob/master/src/lib/models.ts): `src/lib/models.ts`

### Identity

- [Sign-in and signup](https://github.com/madxgunman/vibe-cording/blob/master/src/app/login/page.tsx): `src/app/login/page.tsx`
- [Authentication state](https://github.com/madxgunman/vibe-cording/blob/master/src/components/AuthProvider.tsx): `src/components/AuthProvider.tsx`
- [Send verification code](https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/auth/send-otp/route.ts): `src/app/api/auth/send-otp/route.ts`
- [Verify code](https://github.com/madxgunman/vibe-cording/blob/master/src/app/api/auth/verify-otp/route.ts): `src/app/api/auth/verify-otp/route.ts`

### Persistence

- [Server data access](https://github.com/madxgunman/vibe-cording/blob/master/src/lib/firestore-admin.ts): `src/lib/firestore-admin.ts`
- [Client data access](https://github.com/madxgunman/vibe-cording/blob/master/src/lib/firestore.ts): `src/lib/firestore.ts`
- [Firebase admin services](https://github.com/madxgunman/vibe-cording/blob/master/src/lib/firebase-admin.ts): `src/lib/firebase-admin.ts`

### Other components

- **Website creator**
- **AI model providers**
- **Firebase authentication**
- **Resend email**
- **Cloud Firestore**

## Connections

- Website creator → Generation workspace: submits prompt
- Generation workspace → Generation stream API: requests stream
- Generation workspace → Generation tracking: tracks progress
- Generation stream API → Model catalog: selects model
- Generation stream API → Generation prompts: loads instructions
- Generation stream API → AI model providers: generates stream
- Generation stream API → Server data access: saves project
- Project creation API → AI generation services: enhances and generates
- Project creation API → Server data access: saves project
- Visual editor → Revision API: requests revision
- Visual editor → Revision stream API: requests revision stream
- Revision API → AI generation services: enhances and revises
- Revision API → Server data access: loads and saves
- Revision stream API → Model catalog: selects model
- Revision stream API → Generation prompts: loads instructions
- Revision stream API → AI model providers: generates stream
- Revision stream API → Server data access: loads and saves
- AI generation services → AI model providers: calls models
- Sign-in and signup → Authentication state: uses auth
- Authentication state → Firebase authentication: authenticates user
- Authentication state → Client data access: loads user profile
- Client data access → Cloud Firestore: reads and writes
- Sign-in and signup → Send verification code: requests code
- Sign-in and signup → Verify code: submits code
- Send verification code → Firebase admin services: checks and stores code
- Send verification code → Resend email: sends code
- Verify code → Firebase admin services: checks code
- Firebase admin services → Cloud Firestore: accesses records
- Server data access → Cloud Firestore: reads and writes
- My projects → Client data access: loads projects
- Community gallery → Client data access: loads gallery
- Active generations → Generation tracking: shows activity
- Website creator → Visual editor: edits project
- Website creator → My projects: manages projects
- Website creator → Community gallery: explores projects
- Website creator → Active generations: checks activity
- Website creator → Website preview: views website