🎨 Vibe Coder - AI-Powered Website Builder

A modern, AI-powered platform for creating beautiful websites in seconds. Simply describe what you want, and watch as AI generates a complete, production-ready website with live preview.

✨ Features

🧠 Autonomous AI Agent System

• Intelligent Planning: AI analyzes your request and creates a comprehensive multi-page project plan
• Self-Directed Execution: AI breaks down the project into tasks and executes them autonomously
• Multi-Request Pipeline: Large projects split across multiple AI calls for depth and quality
• Task-Based Generation: Each page section gets dedicated AI attention for exceptional detail
• Progress Visualization: Watch AI plan, design, and build your entire project step-by-step

Core Features

• 🤖 Claude Sonnet 4.5: Latest AI model with exceptional coding capabilities and 200K context
• 📁 Multi-File Projects: Automatically creates proper project structures (HTML, CSS, JS files)
• 🔄 Iterative Refinement: Polish and improve your website without regenerating everything - AI makes surgical edits
• 🗂️ File Explorer: Browse, create, edit, and delete files in your project
• ⚡ Real-time Streaming: Watch your website being created in real-time
• 👁️ Live Preview: Instant preview that combines all project files
• 💻 Monaco Code Editor: Full VS Code editor with syntax highlighting and intelligent editing
• 🎨 Impeccable Design: Generates websites with cutting-edge aesthetics (glassmorphism, gradients, smooth animations)

Advanced Features

• 🔍 Context-Aware AI: AI sees all your project files and makes intelligent changes
• 📱 Responsive Design: All generated websites are perfectly mobile-friendly
• ⬇️ Download & Share: Export your complete project
• 🎯 Multiple Views: Toggle between Split, Code-only, and Preview-only views
• ✨ Modern UI: Beautiful dark-themed interface inspired by top dev tools

🚀 Getting Started

Prerequisites

• Node.js 18+ installed
• Anthropic API key (get one at https://console.anthropic.com/)

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd cursor20

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   cp .env.example .env

   Then edit .env and add your Anthropic API key:

   ANTHROPIC_API_KEY=sk-ant-api03-your-actual-key-here
   

4. Run the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:3000

🎯 How to Use

🤖 Autonomous Mode (Initial Generation)

When you first create a project, Vibe Coder uses Autonomous AI Agent Mode:

1. You Say: "Create a birdwatching website"

2. AI Planning Phase (Claude Sonnet 4.5):

   • Analyzes your request
   • Designs complete multi-page architecture
   • Plans design theme (colors, typography, style)
   • Breaks down into pages (Home, About, Gallery, etc.)
   • Creates detailed section-by-section plan

3. AI Execution Phase (Claude Sonnet 4.5):

   • Executes each task autonomously
   • Generates Homepage → Hero Section
   • Generates Homepage → Features Grid
   • Generates Homepage → Gallery
   • Generates About Page → sections
   • Continues until complete

4. Watch the Magic:

   • See planning screen with project overview
   • Watch each page/section being built
   • Real-time progress tracking
   • Files populate as they're created

Example: Instead of you having to say "add a hero section, then a features section, then..." - the AI figures it all out and executes autonomously!

✏️ Simple Mode (Refinements)

After initial creation, refinements use direct generation:

1. Quick Edits

   • "Make the header sticky"
   • "Change colors to blue"
   • "Add smooth animations"

2. AI Makes Surgical Edits

   • Sees all your files
   • Updates only what's needed
   • Preserves your work

Iterative Refinement

3. Polish & Improve
   • Use the input bar to refine specific aspects
   • AI makes surgical edits without destroying your work
   • Examples:
     • "Make the header sticky with a blur effect"
     • "Add smooth scroll animations"
     • "Change the color scheme to blue and purple"
     • "Add a contact form with validation"

File Management

4. Browse & Edit
   • Click files in the explorer to view/edit them
   • Create new files with the + button
   • Delete files you don't need (hover to see delete icon)
   • Edit code directly in Monaco editor
   • Changes reflect instantly in preview

Export & Share

5. Download Your Work
   • Click "Download" to save your complete project
   • Click "Copy Code" to copy the current file's code
   • All files are combined into a working website

🛠️ Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• AI Model: Anthropic Claude Sonnet 4.5
• Code Editor: Monaco Editor (VS Code's editor)
• Styling: Tailwind CSS
• API: Edge Runtime for optimal performance

📦 Project Structure

cursor20/
├── app/
│   ├── api/
│   │   └── generate/
│   │       └── route.ts          # AI code generation API with operation modes
│   ├── globals.css               # Global styles
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Main application page
├── components/
│   ├── FileExplorer.tsx          # File tree sidebar
│   └── CodeEditor.tsx            # Monaco editor wrapper
├── lib/
│   └── fileUtils.ts              # File system utilities
├── types/
│   └── index.ts                  # TypeScript type definitions
├── public/                       # Static assets
├── .env.example                  # Environment variables template
├── next.config.mjs              # Next.js configuration
├── tailwind.config.ts           # Tailwind CSS configuration
├── tsconfig.json                # TypeScript configuration
└── package.json                 # Dependencies

🎨 Example Prompts

Initial Creation Prompts

Try these detailed prompts to get started:

• Portfolio: "A breathtaking personal portfolio with glassmorphism effects, dark theme, animated hero section with gradient text, projects showcase with hover effects and smooth transitions, skills grid with icons, timeline section, and contact form"

• SaaS Landing: "A modern SaaS landing page with gradient hero section, feature cards with icons and hover effects, pricing table with popular badge, testimonials slider with avatars, FAQ accordion, and newsletter signup with validation"

• Restaurant: "A beautiful restaurant website with full-screen hero image, elegant menu with categories and filters, photo gallery with lightbox effect, reservation form with date picker, chef's story section, and embedded Google Maps"

• E-commerce: "A sleek e-commerce product page with image gallery and zoom, product details with tabs, size selector, reviews section with stars, related products carousel, and add to cart animation"

Refinement Prompts

Use these to improve your existing project:

• "Make the header sticky with a subtle blur effect when scrolling"
• "Add smooth scroll animations that trigger when elements enter viewport"
• "Change the color scheme to use blue and purple gradients"
• "Add a loading animation that plays when the page first loads"
• "Implement a dark mode toggle button with smooth transitions"
• "Add hover effects to all buttons with scale and shadow animations"
• "Create a mobile hamburger menu with smooth slide-in animation"

🔧 Configuration

API Settings

The AI generation uses the following settings (configurable in app/api/generate/route.ts):

• Model: gpt-4o (OpenAI's latest and most capable model)
• Temperature: 0.7 (balance between creativity and consistency)
• Max Tokens: 6000 (allows for comprehensive multi-file generation)

Operation Modes

The system has three intelligent operation modes:

1. CREATE MODE: Initial project generation

   • Generates complete multi-file project structure
   • Returns HTML, CSS, and JS files separately
   • Emphasizes ultra-modern, beautiful design

2. REFINE MODE: Iterative improvements

   • AI sees all existing files
   • Makes surgical edits without destroying working code
   • Returns only files that need changes

3. ADD MODE: Adding new features

   • Adds functionality while preserving existing code
   • Creates new files or modifies existing ones as needed

Design Philosophy

The AI is instructed to create websites with:

• Cutting-edge aesthetics: Glassmorphism, gradients, subtle animations
• Perfect typography: Modern fonts with proper hierarchy
• Beautiful colors: Think Stripe, Linear, Vercel quality
• Smooth interactions: Micro-interactions and hover effects
• Flawless responsiveness: Mobile-first approach
• Clean code: Semantic HTML, modular structure
• Accessibility: ARIA labels and keyboard navigation

You can customize these guidelines by modifying the system prompt in app/api/generate/route.ts

🚨 Important Notes

• API Costs: Each generation uses OpenAI API credits. Monitor your usage at https://platform.openai.com/usage
• Rate Limits: OpenAI has rate limits. If you hit them, wait a moment and try again
• Generated Code: Always review generated code before deploying to production
• Security: The preview iframe is sandboxed for security

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📝 License

MIT License - feel free to use this project for personal or commercial purposes.

🐛 Troubleshooting

"Failed to generate code" error

• Check that your .env file has a valid OPENAI_API_KEY
• Verify your OpenAI account has available credits
• Check the browser console for detailed error messages

Preview not updating

• Try refreshing the page
• Check if the generated code is valid HTML
• Look for JavaScript errors in the browser console

Slow generation

• This is normal for complex websites
• The streaming feature lets you see progress in real-time
• Consider simplifying your prompt for faster results

🎉 Credits

Built with:

• Next.js
• OpenAI
• Monaco Editor
• Tailwind CSS

---

Made with ❤️ by the Vibe Coder team