AI-powered React UI generation workspace for turning prompts into editable product interfaces.
Aether is a full-stack Next.js workspace that converts natural language prompts into previewable React UIs with persistent project organization, version history, prompt traceability, manual code editing, and export workflows. It is designed for fast interface prototyping without losing the control, auditability, and reusability developers need in a serious product workflow.
Live Demo: Aether
Repository: ayushxt25/Aether
Aether focuses on a common gap in AI UI tooling: generating code is easy, but iterating on it in a reliable product workflow is usually not.
UI prototyping is often slow because design exploration, implementation, and iteration are split across multiple tools. Many AI-generated UI experiences also stop at one-off output, making it hard to edit code manually, inspect prompt intent, compare versions, or reuse the result in a real application.
Aether brings those workflows together in one workspace:
- Prompt-to-React interface generation
- Live preview and in-browser code editing
- Versioned project history with rollback, duplicate, fork, and delete
- Prompt-run traceability across generated and manually edited states
- Exportable TSX and ZIP outputs for downstream reuse
| Feature | Description |
|---|---|
| Natural language to React UI generation | Turn plain-English product prompts into generated React interfaces. |
| Multi-agent generation workflow | Planner, generator, editor, fixer, and explainer agents shape and stabilize output. |
| Live React preview | Render generated UIs instantly with react-live inside the workspace. |
| Manual code editor | Edit generated component code directly and preview changes before saving. |
| Version history | Store project-specific UI versions with explanations and timestamps. |
| Rollback, duplicate, fork, delete | Restore previous states or branch work into new projects without losing progress. |
| Prompt runs / traceability | Review generated, modified, duplicated, forked, and manual runs from a dedicated history view. |
| Project-based workspace | Organize work by user-specific projects backed by PostgreSQL and Prisma. |
| Clerk authentication | Secure sign-in and sign-up flows with user-scoped project access. |
| PostgreSQL persistence | Persist projects, versions, and prompt-run related state through Prisma models. |
| Export generated component as TSX | Download a reusable GeneratedComponent.tsx file directly from the workspace. |
| Export ZIP package | Export a small reusable package with component code and metadata. |
| Theme settings | Adjust theme mode, primary color, secondary color, and font family while generating. |
| Responsive polished interface | Includes a production-style landing page, workspace shell, and prompt-runs dashboard. |
- Next.js
- React
- TypeScript
- React Live
- Lucide React
- Next.js API routes
- Prisma ORM
- PostgreSQL / Neon
- Clerk
- Gemini
- OpenRouter fallback
- Multi-agent prompt pipeline
- Vercel
At a high level, Aether routes each user prompt through an authenticated, version-aware generation workflow:
- The user authenticates with Clerk.
- The user creates or opens a project workspace.
- A prompt is submitted to a Next.js API route.
- The AI agent pipeline plans, generates, validates, and explains the React interface.
- The result is saved as a new version in PostgreSQL through Prisma.
- The generated component is rendered inside the live preview workspace.
- Prompt activity is exposed through the Prompt Runs view.
- The user can manually edit code, restore history, duplicate, fork, delete, or export the result.
+------------------+ +------------------------+ +----------------------+
| Clerk Auth | -----> | Next.js Workspace UI | -----> | API Routes |
| User session | | Projects / Preview | | /generate /modify |
+------------------+ +------------------------+ +----------------------+
|
v
+----------------------+
| AI Agent Pipeline |
| Planner |
| Generator |
| Editor / Fixer |
| Explainer |
+----------------------+
|
v
+----------------------+
| Prisma + PostgreSQL |
| Projects |
| Versions |
| Prompt metadata |
+----------------------+
|
v
+----------------------+
| Live Preview / |
| Code Editor / Export |
+----------------------+
The repository currently centers around a Next.js App Router application with server routes, reusable UI primitives, and database-backed versioning utilities:
Aether/
|-- app/
| |-- api/
| | |-- generate/
| | |-- history/
| | |-- modify/
| | |-- projects/
| | |-- rollback/
| | |-- runs/
| | `-- versions/
| |-- sign-in/
| |-- sign-up/
| |-- workspace/
| |-- globals.css
| |-- layout.tsx
| `-- page.tsx
|-- components/
| |-- ui/
| |-- ChatPanel.tsx
| |-- DiffViewer.tsx
| |-- HistorySidebar.tsx
| |-- PreviewPanel.tsx
| |-- ProjectSelector.tsx
| |-- PromptRunsView.tsx
| `-- ThemeSettings.tsx
|-- lib/
| |-- agents/
| |-- client/
| |-- db/
| |-- mock/
| |-- prompts/
| |-- security/
| |-- server/
| |-- state/
| |-- validation/
| `-- versioning/
|-- prisma/
| |-- migrations/
| `-- schema.prisma
|-- public/
| `-- screenshots/
|-- scripts/
|-- types/
|-- package.json
`-- README.md
git clone https://github.com/ayushxt25/Aether.git
cd Aethernpm installCreate a .env or .env.local file in the project root and add the required values from the section below.
npx prisma generatenpx prisma db pushnpm run devOpen http://localhost:3000 after the server starts.
Use placeholders only and never commit real secrets.
DATABASE_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
GEMINI_API_KEY=
OPENROUTER_API_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/workspace
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/workspace
AI_API_KEY=Notes:
- Do not commit real environment variables.
- The current server implementation reads
AI_API_KEYinlib/agents/llm.tsfor Gemini access. OPENROUTER_API_KEYis used as a fallback provider when Gemini is unavailable.DATABASE_URLshould point to a PostgreSQL-compatible database such as Neon.
Using Aether follows a straightforward product workflow:
- Sign up or sign in with Clerk.
- Create a new project in the workspace.
- Enter a prompt describing the interface you want.
- Preview the generated React UI live in the workspace.
- Refine it with a follow-up prompt or modification request.
- Switch to the code editor to make manual changes.
- Save the result as a new version.
- Roll back, duplicate, fork, or delete versions as needed.
- Export the final component as TSX or a ZIP package.
- Create a premium analytics dashboard for a SaaS product
- Design a finance dashboard with KPI cards and charts
- Build a CRM workspace for a startup sales team
- Create a modern landing page for an AI productivity app
- Improve this UI with better spacing, hierarchy, and executive styling
Aether is well-suited to Vercel deployment for the Next.js app layer:
- Connect the GitHub repository to Vercel.
- Add all required environment variables in the Vercel dashboard.
- Set
DATABASE_URLto your PostgreSQL or Neon instance. - Use
npm run buildas the build command. - Run
npx prisma db pushbefore production rollout if your tables have not been created yet.
The repository also includes a vercel:init-db script that chains Prisma setup with the production build:
npm run vercel:init-db- Custom component library
- Better responsive preview modes
- Team collaboration
- Prompt templates
- Export to full Next.js page
- Component marketplace / library
- Advanced analytics for prompt runs
Aether is actively being improved as a production-grade AI UI generation workspace.
Ayush Kumar Giri