Transform ideas into fully functional websites with the power of AI
CodeSnap AI is a revolutionary web development tool that bridges the gap between ideas and implementation. Simply describe your website in natural language, and watch as AI generates a complete, production-ready project that runs instantly in your browser.
- 🤖 AI-Powered Generation: Natural language → Working websites
- ⚡ Instant Preview: See your website live immediately using WebContainer
- 📁 Smart File Management: Interactive file explorer with Monaco editor
- 🎨 Modern UI/UX: Clean, professional dark theme interface
- 📱 Responsive Design: Works seamlessly across all devices
- 💾 Project Export: Download complete projects as ZIP files
- 🔧 Zero Setup: No local development environment needed
- React 18 with TypeScript for type safety
- Vite for lightning-fast development
- Tailwind CSS for modern styling
- Monaco Editor for professional code editing
- WebContainer API for browser-based Node.js runtime
- JSZip for client-side project downloads
- Node.js with Express.js
- TypeScript for enhanced development experience
- Anthropic Claude AI for intelligent code generation
- CORS configured for cross-origin requests
- 🧠 Anthropic Claude AI: Powers intelligent code generation
- 🌐 WebContainer: Enables browser-based Node.js execution
- 💻 Monaco Editor: Provides VSCode-powered editing experience
- 📦 JSZip: Handles client-side ZIP file creation
- Node.js 16+ installed
- Anthropic API key (Get one here)
-
Clone the repository
git clone https://github.com/siddiksawani/CodeSnap.git cd CodeSnap -
Backend Setup
cd be npm install echo "ANTHROPIC_API_KEY=your_api_key_here" > .env npm run dev
-
Frontend Setup (in a new terminal)
cd frontend npm install npm run dev -
Open your browser
- Frontend:
http://localhost:5173 - Backend:
http://localhost:3000
- Frontend:
"Create a modern portfolio website with dark theme, hero section, about me, projects showcase, and contact form"
- AI analyzes your requirements
- Determines the best technology stack
- Generates complete project structure
- Creates all necessary files and dependencies
- Files are mounted in WebContainer
- Dependencies install automatically
- Development server starts instantly
- Live preview becomes available
- Navigate files with interactive explorer
- Edit code with Monaco editor
- See changes in real-time
- Download complete project as ZIP
CodeSnap/
├── README.md
├── be/ # Backend server
│ ├── src/
│ │ ├── index.ts # Main API server
│ │ ├── prompts.ts # AI prompt templates
│ │ └── defaults/ # Project boilerplates
│ │ ├── react.ts # React project template
│ │ └── node.ts # Node.js project template
│ ├── package.json
│ └── tsconfig.json
│
└── frontend/ # React application
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── TabView.tsx # Code/Preview tabs
│ │ ├── CodeEditor.tsx # Monaco editor wrapper
│ │ ├── FileExplorer.tsx # Interactive file tree
│ │ ├── PreviewFrame.tsx # WebContainer preview
│ │ └── FullScreenPreview.tsx # Modal preview
│ ├── pages/
│ │ ├── Home.tsx # Landing page
│ │ └── Builder.tsx # Main development interface
│ ├── hooks/
│ │ └── useWebContainer.ts # WebContainer management
│ └── utils/
│ └── downloadUtils.ts # ZIP download functionality
├── package.json
└── vite.config.ts
Input: "Create a developer portfolio with hero section, skills, projects, and contact"
Output: Modern React app with routing, animations, and responsive design
Input: "Build a SaaS landing page with pricing, features, and testimonials"
Output: Complete marketing site with modern UI components
Input: "Make a todo app with drag-and-drop, categories, and local storage"
Output: Full-featured React app with state management
POST /api/generate
Content-Type: application/json
{
"prompt": "Your website description here"
}Response:
{
"files": {
"package.json": "...",
"src/index.js": "...",
"src/App.jsx": "..."
},
"steps": ["Step 1", "Step 2", "..."]
}- React: For interactive UIs, SPAs, complex frontends
- Node.js: For APIs, servers, backend services
- Automatic: AI chooses the best framework based on requirements
- In-App Modal: Full-screen preview within the application
- Popup Window: Separate browser window with embedded iframe
- Live Reloading: Changes reflect immediately
- Syntax Highlighting: Multi-language support
- IntelliSense: Auto-completion and error detection
- VSCode Experience: Familiar editing environment
cd frontend
npm run build
# Deploy dist/ foldercd be
npm install
npm run dev
# Set ANTHROPIC_API_KEY environment variableWe welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- No local development environment needed
- No dependencies to install
- Works entirely in your browser
- Natural language → Working code
- Intelligent technology choices
- Best practices built-in
- See results immediately
- Real-time preview
- No waiting for builds
- Production-ready code
- Modern best practices
- Deployment-ready projects
- Multiple Framework Support (Vue.js, Angular, Svelte)
- Database Integration (Automatic backend with database)
- Deployment Integration (One-click deploy to Vercel/Netlify)
- Template Marketplace (Community-contributed templates)
- Collaboration Features (Share and remix projects)
- Version Control Integration
- Advanced AI Models Support
Found a bug or have a suggestion? Please open an issue on GitHub.
Siddik Sawani - @siddiksawani - siddikhacker@gmail.com
Project Link: https://github.com/siddiksawani/CodeSnap
CodeSnap AI - Where ideas become reality at the speed of thought ⚡
Made with ❤️ by Siddik Sawani