How subbu6699/reactai works
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: page.tsx Generator UI · generateCode/route.ts React API · prisma.ts Prisma client · generateNextjsCode/route.ts Next.js API
Components 18
Generation
- Generator UI
app/(main)/page.tsx - React API
app/api/generateCode/route.ts - Next.js API
app/api/generateNextjsCode/route.ts - Component guidance
utils/shadcn-docs/index.ts
Preview and sharing
- Code viewer
components/code-viewer.tsx - Share action
app/(main)/actions.ts - Shared app page
app/share/[id]/page.tsx
App platform
- Prisma client
lib/prisma.ts - Open Graph image
app/api/og/route.tsx - Root layout
app/layout.tsx
Identity
- Clerk provider
app/layout.tsx - Sign-in page
app/sign-in/[[...sign-in]]/page.tsx - Sign-up page
app/sign-up/[[...sign-up]]/page.tsx - Auth middleware
middleware.ts
Other components
- Prompt author
- Claude-compatible LLM
- Sandpack runtime
- Postgres database
Connections 18
- 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