AI Builder

The AI Builder is a powerful tool that generates complete, working applications from natural language descriptions. It features live preview, iterative development, session persistence, and GitHub export.

Overview

Access the Builder from the ReformCode page by selecting the Builder tab. Create applications by:

Describing what you want: Write in plain English
Watching it build: See AI generate code in real-time
Live preview: Test your app instantly with Sandpack
Iterating: Refine with follow-up requests
Exporting: Push directly to GitHub or download

Getting Started

Your First App

Navigate to ReformCode
Click the Builder tab

Type a description, for example:

Create a todo app with the ability to add, complete,
and delete tasks. Use a modern dark theme.

Click Generate or press Cmd/Ctrl + Enter
Watch the AI build your app
Interact with the live preview

Example Prompts

Simple Apps:

"Create a calculator with basic operations"
"Build a countdown timer with start/pause/reset"
"Make a color palette generator"

Interactive Apps:

"Create a quiz app with 5 questions about JavaScript"
"Build a weather display that shows temperature and conditions"
"Make a markdown editor with live preview"

Styled Apps:

"Create a landing page for a SaaS product with hero section and pricing"
"Build a portfolio website with project cards and contact form"
"Make a dashboard with charts and statistics"

Builder Interface

Chat Panel (Left)

The conversation interface where you interact with the AI:

Message history: Full conversation preserved
Thinking indicator: See AI reasoning
Code changes: View what files are being modified
Session info: Credits used, file count

Code View (Center)

The Monaco-powered code editor:

File tabs: Switch between generated files
Syntax highlighting: Full language support
Editable: Modify code directly
Line numbers: Easy navigation

Live Preview (Right)

Real-time preview powered by Sandpack:

Instant updates: Changes reflect immediately
Interactive: Click, type, interact with your app
Console: View logs and errors
Responsive: Resize to test different sizes

Session Persistence

Auto-Save

The Builder automatically saves your work:

Every 30 seconds when changes occur
After each AI response
Before you navigate away

Session Recovery

Return to previous sessions:

Your last session is restored automatically
Or click Open Session to browse saved sessions
All messages, files, and preview state are preserved

Managing Sessions

New Session: Start fresh with a new project
Rename: Give sessions descriptive names
Archive: Hide completed projects
Delete: Remove sessions permanently

Working with Files

Generated Files

The AI creates complete project structures:

/App.tsx          # Main component
/index.tsx        # Entry point
/styles.css       # Styles
/components/      # Additional components
/utils/           # Helper functions

Editing Files

Click a file tab to open it
Make changes in the editor
Preview updates automatically
Your edits are saved

Adding Files

The AI can create new files when you request them:

"Add a header component with navigation links"

Iterative Development

Refining Your App

Continue the conversation to improve your app:

User: "Add a dark/light theme toggle"
AI: [generates theme toggle code]

User: "Make the buttons more rounded and add hover effects"
AI: [updates styling]

User: "Add localStorage to persist the todos"
AI: [implements persistence]

Best Practices

Start simple: Get basic functionality first
Add incrementally: One feature at a time
Be specific: "Add a red delete button" vs "add delete"
Reference context: "In the header, add..."

GitHub Export

Pushing to GitHub

Export your Builder project directly to GitHub:

Click Push to GitHub button
Choose New Repository or Existing Repository
For new repos:
- Enter repository name
- Choose public or private
For existing repos:
- Select from your repositories
Click Push
View your repo on GitHub

What Gets Pushed

The export includes:

All generated source files
package.json with dependencies
vite.config.ts for building
tsconfig.json for TypeScript
tailwind.config.js for styles
index.html entry point

Requirements

GitHub account connected via Clerk
repo scope permissions enabled
Valid repository name

Download Export

Downloading as ZIP

Click Export button
Select Download ZIP
Extract and run locally:
```
npm install
npm run dev
```

Credit Usage

Action	Credits
Initial generation	3-5
Follow-up iteration	2-4
Complex app generation	5-10

Credit cost varies based on:

Complexity of the request
Amount of code generated
Selected AI model

Technology Stack

Builder apps use a modern stack:

React 18: UI framework
TypeScript: Type-safe code
Tailwind CSS: Utility-first styling
Vite: Fast development server
Lucide React: Icon library

Tips for Better Results

Writing Good Prompts

Include details:

Layout and structure
Color scheme or theme
Interactive behavior
Data to display

Be specific:

Good: "Create a task manager with categories, due dates,
      priority levels (high/medium/low), and a dark purple theme"

Too vague: "Make a todo app"