ghth

CLAUDE.md

@@ -0,0 +1,144 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+### Package Management
+- Use `pnpm` (preferred package manager)
+- `pnpm install` - Install dependencies
+- `pnpm run dev` - Start development server with Turbopack
+- `pnpm run build` - Build for production
+- `pnpm run start` - Start production server
+- `pnpm run lint` - Run ESLint
+
+### Testing
+- `pnpm run test:integration` - Run E2B integration tests
+- `pnpm run test:api` - Test API endpoints
+- `pnpm run test:code` - Test code execution functionality
+- `pnpm run test:all` - Run all tests sequentially
+
+## Architecture Overview
+
+### Core Technology Stack
+- **Next.js 15.4.3** with App Router architecture
+- **React 19** with modern features
+- **TypeScript** for type safety
+- **Tailwind CSS** with Tailwind CSS v4.1.11
+- **E2B Code Interpreter** for sandbox execution
+- **AI SDKs**: Anthropic, OpenAI, Groq integration
+
+### Project Structure
+- `app/` - Next.js App Router pages and API routes
+- `app/api/` - API endpoints for sandbox management, AI integration
+- `components/` - Reusable React components
+- `lib/` - Utility functions and shared logic
+- `types/` - TypeScript type definitions
+- `config/` - Application configuration
+- `docs/` - Internal documentation
+
+### Key Components
+
+#### Sandbox Management (`app/api/`)
+- `create-ai-sandbox/` - Creates E2B sandboxes for code execution
+- `apply-ai-code/` & `apply-ai-code-stream/` - Apply AI-generated code with streaming
+- `install-packages/` - Automatically install npm packages
+- `get-sandbox-files/` - Retrieve sandbox file structure
+- `run-command/` - Execute commands in sandbox
+- `deploy-to-vercel/` - Deploy sandbox projects to live Vercel URLs
+- `generate-component-library/` - Create comprehensive component libraries
+
+#### AI Integration
+- Uses multiple AI providers (Anthropic, OpenAI, Groq)
+- Default model: `moonshotai/kimi-k2-instruct` (Groq)
+- Streaming responses with real-time feedback
+- XML-based package detection system
+
+#### Package Detection System
+The app uses XML tags in AI responses for automatic package management:
+- `<package>package-name</package>` - Single package
+- `<packages>pkg1, pkg2, pkg3</packages>` - Multiple packages
+- `<command>npm run build</command>` - Execute commands
+- See `docs/PACKAGE_DETECTION_GUIDE.md` for complete documentation
+
+#### Configuration (`config/app.config.ts`)
+- E2B sandbox timeout: 15 minutes
+- Vite development server on port 5173
+- AI model settings and temperature
+- Package installation with `--legacy-peer-deps`
+
+### Core Workflows
+
+#### Code Generation Flow
+1. User submits request via chat interface
+2. AI analyzes request and generates code with XML tags
+3. System parses XML for packages, files, and commands
+4. Packages automatically installed in sandbox
+5. Files created/updated with real-time streaming feedback
+6. Commands executed with output streaming
+
+#### Deployment Flow
+1. User clicks deploy button in sandbox toolbar
+2. System collects all project files from E2B sandbox
+3. Essential files auto-generated if missing (package.json, vite.config, etc.)
+4. Files bundled and sent to Vercel deployment API
+5. Live URL returned and auto-opened in new tab
+6. User can share live website instantly
+
+#### Sandbox Lifecycle
+- Sandboxes auto-created on first interaction
+- 15-minute timeout with automatic cleanup
+- Vite dev server runs on port 5173
+- File changes trigger automatic rebuilds
+
+### Environment Variables Required
+```env
+E2B_API_KEY=your_e2b_api_key
+FIRECRAWL_API_KEY=your_firecrawl_api_key
+ANTHROPIC_API_KEY=your_anthropic_api_key  # Optional
+OPENAI_API_KEY=your_openai_api_key        # Optional  
+GROQ_API_KEY=your_groq_api_key           # Optional
+```
+
+### Important Implementation Details
+
+#### File Import Paths
+- Uses `@/*` alias for root-level imports
+- All components use centralized icon imports from `@/lib/icons`
+- Avoid direct icon library imports to prevent Turbopack chunk issues
+
+#### Hydration and State Management
+- Client-side state initialization to prevent hydration errors
+- Uses loading state during hydration for consistent rendering
+- Session storage persistence for UI state (home screen visibility)
+
+#### Error Handling
+- Comprehensive streaming error feedback
+- Automatic truncation recovery (disabled by default)
+- Vite error monitoring and reporting system
+
+#### Performance Considerations
+- Uses Turbopack for fast development builds
+- Streaming responses for real-time user feedback
+- File caching for sandbox state management
+- CSS rebuild delays (2000ms) for styling changes
+
+### Key Utilities
+
+#### `lib/file-parser.ts`
+- Parses AI responses for file content extraction
+- Handles XML tag parsing for packages and commands
+
+#### `lib/edit-intent-analyzer.ts` 
+- Analyzes user requests for edit intentions
+- Determines file targets and edit types
+
+#### `components/CodeApplicationProgress.tsx`
+- Real-time progress display for code application
+- Shows package installation, file creation, and command execution status
+
+### Testing Strategy
+- Integration tests for E2B sandbox functionality
+- API endpoint testing for all routes  
+- Code execution validation
+- Error handling verification

README.md

@@ -1,41 +1,124 @@
 <div align="center">
 
-# Open Lovable
+# Open Lovable - AI Website Generator
 
-Chat with AI to build React apps instantly.
+Clone any website and get a clean React app you can run and deploy.
 
-<img src="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExbmZtaHFleGRsMTNlaWNydGdianI4NGQ4dHhyZjB0d2VkcjRyeXBucCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ZFVLWMa6dVskQX0qu1/giphy.gif" alt="Open Lovable Demo" width="100%"/>
+## Features
 
-</div>
+- 🚀 **One-click website cloning** - Just paste a URL and get a React app
+- 🎨 **AI-powered generation** - Uses Claude Sonnet 4 to recreate websites
+- 🔧 **Live sandbox** - See your code running in real-time
+- 📱 **Responsive design** - Works on desktop and mobile
+- 🎯 **Multiple styles** - Choose from different design approaches
+- 📦 **Export options** - Download as ZIP or deploy to Vercel
 
-## Setup
+## Quick Start
 
-1. **Clone & Install**
-```bash
-git clone https://github.com/mendableai/open-lovable.git
-cd open-lovable
-npm install
-```
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/your-username/open-lovable.git
+   cd open-lovable
+   ```
 
-2. **Add `.env.local`**
-```env
-# Required
-E2B_API_KEY=your_e2b_api_key  # Get from https://e2b.dev (Sandboxes)
-FIRECRAWL_API_KEY=your_firecrawl_api_key  # Get from https://firecrawl.dev (Web scraping)
+2. **Install dependencies**
+   ```bash
+   npm install
+   # or
+   pnpm install
+   ```
 
-# Optional (need at least one AI provider)
-ANTHROPIC_API_KEY=your_anthropic_api_key  # Get from https://console.anthropic.com
-OPENAI_API_KEY=your_openai_api_key  # Get from https://platform.openai.com (GPT-5)
-GROQ_API_KEY=your_groq_api_key  # Get from https://console.groq.com (Fast inference - Kimi K2 recommended)
-```
+3. **Set up environment variables**
+   ```bash
+   cp .env.example .env.local
+   # Add your Anthropic API key
+   ANTHROPIC_API_KEY=your_key_here
+   ```
+
+4. **Run the development server**
+   ```bash
+   npm run dev
+   # or
+   pnpm dev
+   ```
+
+5. **Open your browser**
+   Navigate to [http://localhost:3000](http://localhost:3000)
+
+## Usage
+
+1. **Enter a website URL** in the input field
+2. **Choose a style** (Neobrutalist, Glassmorphism, etc.)
+3. **Wait for AI generation** - this may take 30-60 seconds
+4. **Preview your site** in the live sandbox
+5. **Download or deploy** your generated React app
+
+## Deployment
+
+### Option 1: Download as ZIP
+- Click the download button to get your project as a ZIP file
+- Extract and run locally with `npm install && npm run dev`
+- Deploy to any hosting service manually
+
+### Option 2: Deploy to Vercel (Requires Setup)
+To enable one-click Vercel deployment:
+
+1. **Get your Vercel token:**
+   - Go to [vercel.com/account/tokens](https://vercel.com/account/tokens)
+   - Create a new token with deployment permissions
+
+2. **Add to environment:**
+   ```bash
+   # Add to your .env.local file
+   VERCEL_TOKEN=your_token_here
+   ```
+
+3. **Redeploy your app** and the deploy button will work!
+
+### Option 3: Manual Vercel Deployment
+1. Download your project as ZIP
+2. Go to [vercel.com](https://vercel.com)
+3. Create new project and upload the ZIP
+4. Vercel will automatically detect it's a Vite/React app
+
+## Environment Variables
 
-3. **Run**
 ```bash
-npm run dev
+# Required
+ANTHROPIC_API_KEY=your_anthropic_api_key
+
+# Optional (for Vercel deployment)
+VERCEL_TOKEN=your_vercel_token
 ```
 
-Open [http://localhost:3000](http://localhost:3000)  
+## Tech Stack
+
+- **Frontend:** Next.js 14, React, TypeScript, Tailwind CSS
+- **AI:** Claude Sonnet 4 via Anthropic API
+- **Sandbox:** E2B for live code execution
+- **Deployment:** Vercel API integration
+- **Styling:** Tailwind CSS with custom components
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Submit a pull request
 
 ## License
 
-MIT
+MIT License - see [LICENSE](LICENSE) for details.
+
+## Support
+
+If you encounter issues:
+1. Check the console for error messages
+2. Ensure your API keys are properly set
+3. Try refreshing the page
+4. Open an issue on GitHub
+
+---
+
+Built with ❤️ by the Open Lovable team

app/api/analyze-edit-intent/route.ts

@@ -93,19 +93,8 @@ export async function POST(request: NextRequest) {
     console.log('[analyze-edit-intent] File summary preview:', fileSummary.split('\n').slice(0, 5).join('\n'));
 
     // Select the appropriate AI model based on the request
-    let aiModel;
-    if (model.startsWith('anthropic/')) {
-      aiModel = anthropic(model.replace('anthropic/', ''));
-    } else if (model.startsWith('openai/')) {
-      if (model.includes('gpt-oss')) {
-        aiModel = groq(model);
-      } else {
-        aiModel = openai(model.replace('openai/', ''));
-      }
-    } else {
-      // Default to groq if model format is unclear
-      aiModel = groq(model);
-    }
+  // Force Groq as provider
+  const aiModel = groq(model);
 
     console.log('[analyze-edit-intent] Using AI model:', model);
 

app/api/conversation-state/route.ts

@@ -58,11 +58,13 @@ export async function POST(request: NextRequest) {
 
       case 'clear-old':
         // Clear old conversation data but keep recent context
+        // Make this action idempotent: if there's no active conversation, just return success
         if (!global.conversationState) {
           return NextResponse.json({
-            success: false,
-            error: 'No active conversation to clear'
-          }, { status: 400 });
+            success: true,
+            message: 'No active conversation to clear',
+            state: null
+          });
         }
 
         // Keep only recent data