# subbu6699/reactai architecture

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

- Interactive diagram: https://gitdiagram.com/subbu6699/reactai
- Repository: https://github.com/subbu6699/reactai

## Overview

ReactAI is a web app for generating React components from prompts, previewing and editing the resulting code, and publishing shareable examples. The primary flow runs from the generator page through a streaming generation API to an LLM, then into the Sandpack-based code viewer; publishing is initiated by that page through a server action. The README also documents a Next.js code-generation endpoint and Prisma-backed persistence. The action and share-page implementations were not sampled, so their precise database operations are uncertain.

Main entry points: [`app/(main)/page.tsx`](https://github.com/subbu6699/reactai/blob/main/app/(main)/page.tsx) (Generator UI), [`app/api/generateCode/route.ts`](https://github.com/subbu6699/reactai/blob/main/app/api/generateCode/route.ts) (React API), [`lib/prisma.ts`](https://github.com/subbu6699/reactai/blob/main/lib/prisma.ts) (Prisma client), [`app/api/generateNextjsCode/route.ts`](https://github.com/subbu6699/reactai/blob/main/app/api/generateNextjsCode/route.ts) (Next.js API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_generation["Generation"]
  node_generator["Generator UI<br/>[page.tsx]"]
  node_reactapi["React API<br/>[route.ts]"]
  node_nextapi["Next.js API<br/>[route.ts]"]
  node_componentdocs["Component guidance<br/>[index.ts]"]
end

subgraph group_preview["Preview and sharing"]
  node_codeviewer["Code viewer<br/>[code-viewer.tsx]"]
  node_shareaction["Share action<br/>[actions.ts]"]
  node_sharepage["Shared app page<br/>[page.tsx]"]
end

subgraph group_platform["App platform"]
  node_prismaclient["Prisma client<br/>[prisma.ts]"]
  node_og["Open Graph image<br/>[route.tsx]"]
  node_rootlayout["Root layout<br/>[layout.tsx]"]
end

subgraph group_identity["Identity"]
  node_authprovider["Clerk provider<br/>[layout.tsx]"]
  node_signin["Sign-in page<br/>[page.tsx]"]
  node_signup["Sign-up page<br/>[page.tsx]"]
  node_middleware["Auth middleware<br/>[middleware.ts]"]
end

node_user(("Prompt author"))
node_llm{{"Claude-compatible LLM"}}
node_sandpack["Sandpack runtime"]
node_database[("Postgres database")]

node_user -->|"enters prompt"| node_generator
node_generator -->|"requests generation"| node_reactapi
node_reactapi -->|"streams completion"| node_llm
node_reactapi -->|"loads guidance"| node_componentdocs
node_reactapi -->|"returns code stream"| node_generator
node_generator -->|"renders code"| node_codeviewer
node_codeviewer -->|"runs preview"| node_sandpack
node_generator -->|"publishes app"| node_shareaction
node_sharepage -->|"loads shared app"| node_prismaclient
node_shareaction -->|"uses client"| node_prismaclient
node_prismaclient -->|"accesses data"| node_database
node_user -.->|"requests Next.js code"| node_nextapi
node_nextapi -->|"streams completion"| node_llm
node_generator -.->|"requests image"| node_og
node_rootlayout -->|"wraps app"| node_authprovider
node_user -.->|"signs in"| node_signin
node_user -.->|"registers"| node_signup
node_middleware -.->|"uses auth"| node_authprovider

click node_generator "https://github.com/subbu6699/reactai/blob/main/app/(main)/page.tsx"
click node_reactapi "https://github.com/subbu6699/reactai/blob/main/app/api/generateCode/route.ts"
click node_nextapi "https://github.com/subbu6699/reactai/blob/main/app/api/generateNextjsCode/route.ts"
click node_componentdocs "https://github.com/subbu6699/reactai/blob/main/utils/shadcn-docs/index.ts"
click node_codeviewer "https://github.com/subbu6699/reactai/blob/main/components/code-viewer.tsx"
click node_shareaction "https://github.com/subbu6699/reactai/blob/main/app/(main)/actions.ts"
click node_sharepage "https://github.com/subbu6699/reactai/blob/main/app/share/%5Bid%5D/page.tsx"
click node_prismaclient "https://github.com/subbu6699/reactai/blob/main/lib/prisma.ts"
click node_og "https://github.com/subbu6699/reactai/blob/main/app/api/og/route.tsx"
click node_rootlayout "https://github.com/subbu6699/reactai/blob/main/app/layout.tsx"
click node_authprovider "https://github.com/subbu6699/reactai/blob/main/app/layout.tsx"
click node_signin "https://github.com/subbu6699/reactai/blob/main/app/sign-in/%5B%5B...sign-in%5D%5D/page.tsx"
click node_signup "https://github.com/subbu6699/reactai/blob/main/app/sign-up/%5B%5B...sign-up%5D%5D/page.tsx"
click node_middleware "https://github.com/subbu6699/reactai/blob/main/middleware.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_generator,node_reactapi,node_nextapi,node_componentdocs toneBlue
class node_codeviewer,node_shareaction,node_sharepage,node_database toneAmber
class node_prismaclient,node_og,node_rootlayout toneMint
class node_authprovider,node_signin,node_signup,node_middleware toneRose
class node_user,node_llm,node_sandpack toneIndigo
```

## Components

### Generation

- [Generator UI](https://github.com/subbu6699/reactai/blob/main/app/(main)/page.tsx): `app/(main)/page.tsx`
- [React API](https://github.com/subbu6699/reactai/blob/main/app/api/generateCode/route.ts): `app/api/generateCode/route.ts`
- [Next.js API](https://github.com/subbu6699/reactai/blob/main/app/api/generateNextjsCode/route.ts): `app/api/generateNextjsCode/route.ts`
- [Component guidance](https://github.com/subbu6699/reactai/blob/main/utils/shadcn-docs/index.ts): `utils/shadcn-docs/index.ts`

### Preview and sharing

- [Code viewer](https://github.com/subbu6699/reactai/blob/main/components/code-viewer.tsx): `components/code-viewer.tsx`
- [Share action](https://github.com/subbu6699/reactai/blob/main/app/(main)/actions.ts): `app/(main)/actions.ts`
- [Shared app page](https://github.com/subbu6699/reactai/blob/main/app/share/%5Bid%5D/page.tsx): `app/share/[id]/page.tsx`

### App platform

- [Prisma client](https://github.com/subbu6699/reactai/blob/main/lib/prisma.ts): `lib/prisma.ts`
- [Open Graph image](https://github.com/subbu6699/reactai/blob/main/app/api/og/route.tsx): `app/api/og/route.tsx`
- [Root layout](https://github.com/subbu6699/reactai/blob/main/app/layout.tsx): `app/layout.tsx`

### Identity

- [Clerk provider](https://github.com/subbu6699/reactai/blob/main/app/layout.tsx): `app/layout.tsx`
- [Sign-in page](https://github.com/subbu6699/reactai/blob/main/app/sign-in/%5B%5B...sign-in%5D%5D/page.tsx): `app/sign-in/[[...sign-in]]/page.tsx`
- [Sign-up page](https://github.com/subbu6699/reactai/blob/main/app/sign-up/%5B%5B...sign-up%5D%5D/page.tsx): `app/sign-up/[[...sign-up]]/page.tsx`
- [Auth middleware](https://github.com/subbu6699/reactai/blob/main/middleware.ts): `middleware.ts`

### Other components

- **Prompt author**
- **Claude-compatible LLM**
- **Sandpack runtime**
- **Postgres database**

## Connections

- Prompt author → Generator UI: enters prompt
- Generator UI → React API: requests generation
- React API → Claude-compatible LLM: streams completion
- React API → Component guidance: loads guidance
- React API → Generator UI: returns code stream
- Generator UI → Code viewer: renders code
- Code viewer → Sandpack runtime: runs preview
- Generator UI → Share action: publishes app
- Shared app page → Prisma client: loads shared app
- Share action → Prisma client: uses client
- Prisma client → Postgres database: accesses data
- Prompt author → Next.js API: requests Next.js code
- Next.js API → Claude-compatible LLM: streams completion
- Generator UI → Open Graph image: requests image
- Root layout → Clerk provider: wraps app
- Prompt author → Sign-in page: signs in
- Prompt author → Sign-up page: registers
- Auth middleware → Clerk provider: uses auth