Overview
Projects in ZapDev are the foundation of your development workflow. Each project represents a web application you’re building with AI assistance. Projects support multiple frameworks including Next.js, Angular, React, Vue, and Svelte.Creating a New Project
There are multiple ways to start a new project in ZapDev:Describe Your Project
In the text area, describe what you want to build. Be specific about:
- The type of application (e.g., dashboard, landing page, e-commerce site)
- Key features you need
- Any design preferences or requirements
Add Visual References (Optional)
Click the image icon to upload screenshots, mockups, or design references. Supported formats:
- PNG, JPG, WebP images
- Multiple images per project
Select AI Model (Optional)
Click the model icon to choose which AI model to use:
- Auto - Automatically selects the best model for your task
- Claude Haiku 4.5 - Fast and efficient for simple tasks
- Gemini 3 Pro - Advanced reasoning capabilities
- GPT-5.1 Codex - Best for complex development tasks
- Z-AI GLM 4.7 - Ultra-fast inference
- Kimi K2.5 - Advanced reasoning for complex projects
Project Templates
For quick starts, select from pre-built templates on the home page:- Portfolio Website - Personal portfolio with projects showcase
- Blog Platform - Content management system
- E-commerce Store - Product catalog with cart functionality
- Dashboard - Admin panel with analytics
- Landing Page - Marketing page with hero section
Managing Projects
Viewing Your Projects
All your projects are listed on the home page with:- Project name
- Preview thumbnail (from latest generated code)
- Creation date
- Framework type
Project Settings
Within each project, you can:- Rename Project - Update the project name in the header
- Change Framework - Switch between Next.js, Angular, React, Vue, or Svelte
- Set Model Preference - Choose a default AI model for the project
- View Usage - Check your credit consumption
Deleting Projects
Framework Selection
ZapDev automatically detects your preferred framework from your prompt, or defaults to Next.js. Supported frameworks:| Framework | Use Case | Default Styling |
|---|---|---|
| Next.js | Full-stack React apps | Tailwind CSS |
| Angular | Enterprise applications | Material Design |
| React | Single-page apps | Chakra UI |
| Vue | Progressive web apps | Vuetify |
| Svelte | Lightweight apps | DaisyUI |
Credits and Limits
Each project creation consumes 1 credit. Available credits:- Free Plan - 5 credits per day
- Pro Plan - 100 credits per day
- Unlimited Plan - Unlimited credits
Best Practices
Be Specific - Detailed prompts produce better results. Include feature requirements, design preferences, and technical constraints.
Use Visual References - Upload mockups or screenshots to guide the AI’s design decisions.
Iterate Gradually - Start with a basic structure, then refine through conversational messages.
Choose the Right Model - Use faster models for simple tasks and advanced models for complex requirements.
Next Steps
Once your project is created:- Chat with AI agents to refine your application
- Manage files in the code preview
- Import designs from Figma or GitHub
Troubleshooting
Project Creation Fails
- Check Credits - Ensure you have available credits
- Verify Authentication - Make sure you’re signed in
- Simplify Prompt - Try a shorter, more focused description
No Code Generated
- Wait for Processing - Large projects may take 30-60 seconds
- Check Error Messages - Review any error notifications in the UI
- Refresh Page - Sometimes a simple refresh resolves connection issues