AI product · Next.js · Gemini · Cline SDK
Agentic AI App Builder
A prompt-driven React app builder that generates code into a live Sandpack preview, persists workspaces and chat history, and lets an agent improve files iteratively.
Overview
A prompt-driven React app builder that generates code into a live Sandpack preview, persists workspaces and chat history, and lets an agent improve files iteratively.
System architecture
A high-level view of the components and boundaries described by the project source and documentation.
User and data flow
Submit a natural-language app request and optional image
Gemini streams status and structured files/dependencies
Render generated React code in the Sandpack browser
Pro user asks the Cline agent to patch files one by one
Product capabilities
Prompt-to-preview generation
- Create React app files from natural-language requests and display the result in a live browser preview.
- Keep a split workspace with chat on one side and code/preview on the other; generated conversations and project files persist across visits.
- Upload reference images to Supabase Storage and include their accessible image URL in the generation context.
Streaming workspace
- Stream assistant text and status updates while generation is in progress.
- Inspect generated source in a read-only CodeMirror editor and switch between the preview and code views.
- Export a runnable project ZIP; browse and delete saved workspaces from the projects area.
Improve and fix loops
- A plan-gated Cline SDK agent can call update_file to replace complete files and stream each patch into the running Sandpack preview.
- Preview runtime or compilation errors can be passed back into an AI repair flow.
- Generated dependency names are checked against the npm registry before they are accepted.
Plans and credits
- The README describes free, Starter, and Pro credit allocations; generation and improvement consume credits.
- Generation checks available credit on the server and persists the workspace update and credit deduction in a database transaction.
- Plan changes can top up credits; the Pro-only improvement flow enforces plan and ownership checks server-side.
Data model and domain
Persistent workspace
A user owns many workspaces; each workspace stores conversation messages and generated files/dependencies. Image assets are stored separately and referenced in prompts.
Fast data retrieval and page delivery
This portfolio case study is statically generated at build time, so opening it does not wait for a case-study API or database query. The notes below describe the project's own data path; they distinguish implemented behavior from scale-up opportunities.
Indexed workspace ownership
The Prisma schema indexes Workspace.userId, supporting account-scoped workspace retrieval without scanning every user's saved projects.
Persistent project reads
Messages and generated files are stored with each workspace; the projects view can retrieve saved sessions without regenerating them with Gemini.
Keep reads separate from AI latency
Workspace/database reads are distinct from generation and improvement, which wait on remote AI providers and streamed work. The repository does not publish end-to-end latency benchmarks.
HTTP API surface
Generate application
POST /api/gen-ai-code · streams structured assistant output, title, generated files, and dependencies
Improve application
POST /api/improve · Pro/Starter-gated Cline file-update workflow streamed to the workspace
Engineering decisions
Server-side authorization
Generation and improvement routes derive the authenticated Clerk identity, validate workspace ownership, and enforce plan/credit requirements.
Structured, streamed responses
The generation endpoint streams server-sent events and returns a defined response shape for assistant text, title, files, and dependencies.
Agent tool boundary
The Cline agent receives the current app files and two narrow tools: update an entire file and signal completion. Each patch is streamed back into the preview.
Transactional accounting
The generated workspace state and corresponding credit decrement are committed together so an accepted generation does not leave those writes split.
Setup and delivery
- The README documents Node.js 22+, Clerk, Supabase/PostgreSQL, and a Google AI Studio key as prerequisites.
- Prisma client generation and database schema push precede starting the Next.js development server.
- Server credentials such as Clerk secret, database URL, Gemini key, and Arcjet key stay in server environment configuration; publishable values are not interchangeable with secrets.
Technology
Explore the project
Open the project links above to review its source, documentation, or available deployment.