Skip to main content

​
Overview

ZapDev’s conversational interface allows you to iteratively build and improve your application through natural language. Each message you send triggers an AI agent that understands context, generates code, and provides interactive previews.

​
How AI Chat Works

The AI chat operates in a continuous conversation loop:
  1. You send a message describing changes or new features
  2. AI agent processes your request with full project context
  3. Code is generated in isolated sandbox environments
  4. Preview updates in real-time with the new changes
  5. Iterate based on the results

​
Sending Messages

1

Open Your Project

Navigate to any existing project to access the message interface at the bottom of the screen.
2

Compose Your Message

In the message textarea, describe what you want to add or change:Good examples:
Add a dark mode toggle to the navbar

Create a user profile page with avatar upload

Fix the responsive layout on mobile devices
3

Enhance Your Prompt (Optional)

Click the sparkles ✨ icon to automatically enhance your prompt with AI:Before:
Add a contact form
After enhancement:
Create a responsive contact form with fields for name, email, subject,
and message. Include client-side validation, loading states, and a
success notification upon submission. Use modern form design patterns
with clear error messaging.
4

Add Visual Context (Optional)

Attach images to provide visual guidance:
  • Click the image icon to upload screenshots or mockups
  • Add multiple images per message
  • AI analyzes images to understand design requirements
5

Submit Message

Press Cmd+Enter (Mac) or Ctrl+Enter (Windows) to send.The AI agent will:
  • Analyze your request
  • Review existing project code
  • Generate necessary changes
  • Update the live preview

​
Message Types

ZapDev handles different types of requests:

​
Feature Additions

Add new functionality to your application: 
Add authentication with email/password login

Implement a shopping cart with add/remove items

​
Modifications

Update existing features or styling: 
Change the primary color scheme to blue and orange

Make the header sticky on scroll

​
Bug Fixes

Address issues in the generated code: 
Fix the form validation - email field isn't validating properly

Resolve the layout overflow on small screens

​
Refactoring

Improve code quality or architecture: 
Extract the user card component into a reusable component

Move API calls to a separate service layer

​
AI Model Selection

Choose different AI models based on your task complexity:

​
Message Workflow

Understand what happens when you send a message:

​
Message Status Indicators

Messages display different states:
StatusIndicatorMeaning
Pending⏳ SpinnerMessage queued for processing
Streaming💬 AnimatedAI is actively generating code
Complete✅ CheckmarkCode generated successfully
Error❌ Error iconGeneration failed

​
Conversation Context

The AI maintains context throughout your conversation:
  • Previous messages - All prior requests and responses
  • Current code - The complete state of your application
  • Framework - Your selected framework and conventions
  • Attachments - Images and imports from earlier messages
You can reference previous work:“Make the contact form match the style of the hero section we created earlier”

​
Attachments and Imports

​
Image Attachments

Attach visual references to guide AI:
1

Click Image Icon

Select the image icon in the message form toolbar.
2

Upload Images

Choose one or more images from your device:
  • Screenshots
  • Design mockups
  • UI inspiration
  • Reference materials
3

Images Appear as Thumbnails

Review attached images before sending. Click X to remove any.

​
Design Imports

Import from external sources:
  • Figma - Import designs directly from Figma files
  • GitHub - Import existing repositories
See Importing Designs for details.

​
Usage and Credits

Each message consumes 1 credit from your daily allowance: 
Free Plan:     5 credits/day
Pro Plan:      100 credits/day  
Unlimited:     ∞ credits
Credits reset every 24 hours on a rolling window basis.
The usage indicator at the top of the message form shows:
  • Remaining credits
  • Time until next credit resets
  • Your current plan

​
Best Practices

​
Write Clear Requests

Add a responsive navigation menu with dropdown for mobile,
including links to Home, About, Services, and Contact pages.
Use smooth animations for the mobile menu toggle.

​
Break Down Complex Changes

Instead of: “Build a complete user authentication system with profile management, password reset, email verification, and social login”Try:
  1. “Create a login form with email and password fields”
  2. “Add password reset functionality”
  3. “Implement email verification flow”
  4. “Add Google OAuth integration”

​
Provide Specific Feedback

Instead of: “The button doesn’t look right”Try: “The submit button should be larger with rounded corners and use the primary brand color #3B82F6”

​
Use Examples

Reference specific websites or patterns:“Create a pricing table similar to Stripe’s pricing page with three tiers”

​
Troubleshooting

​
Message Won’t Send

  • Check credits - Ensure you have available credits
  • Verify prompt length - Messages must be 1-10,000 characters
  • Wait for uploads - Let image uploads complete

​
No Code Generated

  • Check error messages - Look for specific error details
  • Simplify request - Try breaking into smaller steps
  • Try different model - Switch to a different AI model

​
Unexpected Results

  • Add more context - Provide additional details or examples
  • Use images - Upload visual references
  • Iterate - Send follow-up messages to refine

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us