Bolt Website Builder

A modern website builder inspired by bolt.new with AI-powered code generation, live preview, and deployment capabilities.

Features

• AI-Powered Code Generation: Generate React components using Anthropic's Claude Sonnet 4
• Live Code Editor: Monaco editor with TypeScript support and syntax highlighting
• Real-time Preview: See your changes instantly with hot reloading
• Project Management: Save, load, and manage multiple projects
• Deployment: One-click deployment to Netlify
• GitHub Export: Export your projects to GitHub repositories
• Responsive Design: Works on desktop and mobile devices

Getting Started

1. Install Dependencies

   npm install
   

2. Set up Environment Variables Copy .env.example to .env and configure your Supabase credentials:

   VITE_SUPABASE_URL=https://your-project.supabase.co
   VITE_SUPABASE_ANON_KEY=your-anon-key
   

3. Get API Keys

   • Anthropic API Key: Get yours from Anthropic Console
   • Supabase: Set up a project at Supabase

4. Run the Development Server

   npm run dev
   

Usage

1. Set API Key: Click the settings icon in the chat panel and enter your Anthropic API key
2. Start Building: Describe what you want to build in the chat interface
3. Edit Code: Use the code editor to modify the generated code
4. Preview: See your changes in real-time in the preview panel
5. Save Project: Name your project and save it for later
6. Deploy: Deploy your project to Netlify with one click
7. Export: Export your code to a GitHub repository

Architecture

• Frontend: React 18 + TypeScript + Tailwind CSS
• Code Editor: Monaco Editor (VS Code editor)
• AI Integration: Anthropic Claude API
• Backend: Supabase (PostgreSQL + Auth + Storage)
• Deployment: Netlify API integration
• Version Control: GitHub API integration

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 License - see LICENSE file for details