🎯 Welcome to ZenCode AI!

Your interactive, AI-powered development environment

📋 Table of Contents

🚀 Quick Start

Getting Started

  1. Set up your API key: Click the Settings link in the top navigation to configure your Anthropic API key
  2. Start a new project: Enter a project name in the left sidebar
  3. Begin coding: Ask the AI to create or modify code in the chat panel on the right

🎯 Build & Create

One-Shot Project Builder

Instantly generate complete websites, WordPress plugins, and virtually any kind of small to medium sized web applications from a simple description.

How to use:

  1. Click the "Build a Website" button in the top bar
  2. Describe your project in plain English
  3. The AI will generate complete, ready-to-use files instantly

Example prompts:

Build a modern SaaS landing page for a time-tracking app with pricing tiers and a hero section.
Create a WordPress plugin that adds custom post types for portfolio items.
Develop a contact form manager web app with user authentication and file uploads.
💡 Pro Tip: For stunning results, upload an inspiration image first! The AI will match your design vision.

🧠 Intelligent Learning System ★ NEW

ZenCode AI doesn't just assist—it learns, adapts, and evolves with every project. These breakthrough features make your AI assistant smarter over time.

🔧

Auto Repair

Automatically detects and fixes errors without manual intervention

💾

Persistent Context

Context saved to database across all sessions and steps

📊

Reflection Scoring

AI scores its own performance to learn from mistakes

🎓

Database Learning

System gets smarter with every interaction

📋

Auto Spec Generation

Comprehensive specs from simple prompts

🔧 Auto Repair

ZenCode AI automatically detects and fixes errors in your code without manual intervention.

What it does:

How it works:

AI executes your code
If errors are detected, the system analyzes the problem
Automatically generates and applies a fix
Verifies the fix works correctly
Stores the solution in the database for future reference

Benefits:

💾 Persistent Context Across Steps

Unlike traditional AI tools, ZenCode AI remembers everything across your entire project lifecycle.

What's saved:

Stored in database:

Why this matters:

📊 Reflection Point Scoring System

ZenCode AI uses an advanced scoring system to evaluate its own performance and learn from mistakes.

How the scoring works:

Scoring criteria:

What happens with scores:

90-100 Excellent - Pattern stored as best practice

70-89 Good - Acceptable solution, minor improvements noted

50-69 Fair - Triggers reflection and improvement suggestions

Below 50 Poor - Automatic revision and learning cycle initiated

🎓 Database-Backed Learning

ZenCode AI doesn't just assist—it evolves with every project.

What the system learns:

How it gets smarter:

  1. Pattern Recognition: Identifies recurring solutions and anti-patterns
  2. Error Prevention: Learns from past mistakes to avoid repeating them
  3. Style Adaptation: Adjusts to your preferred coding conventions
  4. Context Awareness: Understands your project's unique requirements
  5. Continuous Refinement: Every interaction improves future responses

Real-world impact:

Week 1: Basic assistance, standard solutions
Week 4: Recognizes your patterns, suggests familiar approaches
Month 3: Anticipates needs, proactively prevents common errors
Month 6+: Expert-level understanding of your codebase and style

📋 Automatic Spec Sheet Generation

Transform simple prompts into comprehensive technical specifications automatically.

How it works:

  1. Enter a basic project idea or request
  2. AI analyzes your prompt
  3. Generates a detailed specification sheet covering:
    • Project Overview: Goals, scope, and objectives
    • Technical Requirements: Technologies, dependencies, architecture
    • File Structure: Complete directory and file organization
    • Feature List: Detailed breakdown of functionality
    • Implementation Steps: Ordered development plan
    • Database Schema: If applicable, complete data models
    • API Endpoints: For backend projects, full API specification
    • UI/UX Requirements: Component hierarchy and interactions
Example transformation:

Your prompt:

Build a task management app

Generated spec sheet includes:

🤖 AI Modes & Context

Four Intelligent Modes

1. 💬 Normal Mode Default

The versatile all-rounder. Directly ask the AI to write, modify, or explain code.

Best for:

Create a WordPress plugin that adds custom user profile fields.

2. ⚡ One-Shot Builder Ultra Fast

The speed champion. Generates complete single-page websites in one powerful request.

Best for:

How it works:

  1. Click the "One-Shot Builder" button
  2. Describe your single-page website
  3. AI generates everything instantly in ONE request
  4. Review and deploy - it's that fast!
💡 Flexible Workflow:
  • Start fast: Get a complete single-page site in seconds
  • Expand if needed: Say "expand this into a full plan" to convert to Plan Mode with multiple pages
  • Edit surgically: Use Normal Mode to make precise changes to specific sections
  • Best of both worlds: Speed of instant generation + flexibility to grow
Create a pricing page for my SaaS with three tiers, testimonials, and FAQ section
Example Expansion Workflow:
  1. Use One-Shot: "Build a restaurant menu website"
  2. Review the result → looks great!
  3. Need more? Say: "Expand this into a full plan with about page, location map, and online ordering"
  4. Or make quick edits: "Change the hero background to a gradient from blue to purple"

3. 📋 Plan Mode Strategic

Perfect for complex projects. The AI creates a detailed, step-by-step development plan.

Best for:

How it works:

  1. AI generates an interactive plan with executable steps
  2. Spec sheet created automatically with full technical details
  3. Review the blueprint (files, components, build order)
  4. Execute steps individually or run the entire plan automatically
Enhanced with learning:
  • Context persists across all steps
  • Auto-repair fixes issues during execution
  • Reflection scores guide implementation quality
  • Previous project patterns inform better planning

4. 🔍 Vector Mode Knowledge Base

Ask questions about your project's codebase. The AI uses your personalized Knowledge Base for highly context-aware answers.

Best for:

How to use:

  1. Upload files to your Knowledge Base (left sidebar)
  2. Enable Vector Mode
  3. Ask questions about your codebase

📊 Advanced Features

Context Management

🔄 Add Context to Plan

Enhance your project with additional context before generating a plan.

How to use:

  1. Start describing your project
  2. Click "Add Context to Plan"
  3. Upload reference files, images, or documentation
  4. The AI incorporates this context into its planning

Context is automatically saved to the database and persists across your entire project!

🧠 Reflection Mode

Give the AI time to think deeply before responding. Enabled automatically for complex queries.

What it does:

Scoring integration:

🖼️ Image to Plan

Transform visual designs into working code automatically!

How to use:

  1. Upload a screenshot, mockup, or wireframe
  2. Click "Image to Plan"
  3. The AI generates a complete build plan from your visual
  4. Automatic spec sheet created from the image
  5. Execute the plan to create pixel-perfect code

📁 Version Control

Save and manage different versions of your project.

Features:

💡 Pro Tip: Create snapshots before major refactors or risky changes!

📂 Project Management Tools

Comprehensive project file management and maintenance utilities.

📤

Upload Files

Upload individual files to your project with drag and drop support

📦

Upload ZIP

Import entire projects from ZIP archives. Perfect for migrations.

💾

Download as ZIP

Export your entire project for backup and sharing

✨

Polish Project

AI-powered refinement for code structure and formatting

📊

View Learning Stats

Dashboard showing AI performance metrics and trends

🗑️

Clear Knowledge Base

Remove vectorized files for a fresh start

🧹

Cleanup Old Learnings

Optimize database by removing outdated patterns

View Learning Stats 📊

Access detailed analytics about your AI's learning and performance:

🚀 Execution Styles

Choose how your AI executes multi-step plans for optimal results.

🚀 Automated Run

Fastest option: The AI runs all steps automatically

Best for: Straightforward plans or when speed is a priority

🧠 Guided Run

Most accurate option: You will quickly confirm the AI's context before each step

Best for: Complex plans where precision is critical

When to use each:

🐛 Debug Prompt

Advanced debugging interface for quickly resolving errors.

How it works:

  1. Preview your HTML file in browser
  2. Press F12 (or Cmd + Option + I on Mac) to open console
  3. Copy any console errors
  4. Paste errors into the Debug Prompt dialog
  5. Add your own description: "Fix this bug" or "Why isn't the button working?"
  6. Click Submit Debug Request

What the AI does:

Perfect for:

💡 Pro Tip: The more specific your prompt, the better the fix. Instead of "fix bug," try "the submit button isn't triggering the form validation function."

✨ Polish & Unify Design

AI-powered design refinement that ensures consistency across your entire project.

What it does:

How to use:

  1. Complete your initial build
  2. Click "Polish & Unify Design"
  3. AI analyzes your project structure
  4. Reviews and suggests improvements
  5. Applies polished, consistent design

Results:

Perfect for:

🚀 Smart Caching

Speed up your workflow with intelligent response caching.

How it works:

🎨 Context Control (Critical!)

Checkbox System

Manage which files the AI can see and modify.

How it works:

Why this matters:

Context is automatically saved when you check/uncheck files, so your selections persist across sessions.

💡 Pro Tips & Best Practices

Getting the Best Results

1. Be Specific

❌ "Make a website"

✅ "Build a responsive e-commerce product page with image gallery, add to cart button, and customer reviews section"

2. Use the Right Mode

💡 Pro Workflow: Start with One-Shot Builder for speed → Expand to Plan Mode if project grows → Use Normal Mode for surgical edits

3. Leverage Image to Plan

Upload a screenshot of what you want before describing it. Visual + text = better results!

4. Build Iteratively

First: "Create a basic login form"
Then: "Add password validation"
Then: "Add 'remember me' checkbox"
Then: "Add social login buttons"

5. Trust the Learning System

7. Leverage Spec Sheets

8. Use Execution Styles Strategically

9. Master the Debug Prompt

10. Polish Before Delivery

11. Monitor Learning Stats

12. Maintain Your Knowledge Base

🎓 Example Workflows

Workflow 1: Building a Landing Page

  1. Start with Image to Plan
    • Upload a screenshot of a landing page you like
    • Click "Image to Plan"
    • Spec sheet auto-generated from the image
  2. Review the Plan & Spec
    • AI generates file structure and build steps
    • Review the detailed specification
  3. Execute Automatically
    • Click "Run Entire Plan"
    • Auto-repair fixes any errors during execution
  4. Fine-tune
    • Request specific tweaks
    • Context persists from planning phase

Workflow 2: WordPress Plugin Development

  1. Start in Plan Mode
    Create a WordPress plugin for custom post types and admin interface
  2. Auto-Generated Spec Sheet
    • Detailed technical specification created automatically
    • Review and modify as needed
  3. Execute Step-by-Step
    • Auto-repair handles any issues
    • Check reflection scores for quality
    • Context persists across all steps
  4. Save Milestones
    • Create version snapshots after each major step
    • Full context saved with each snapshot

Workflow 4: Rapid Prototyping

  1. Simple Prompt
    Build a recipe sharing app
  2. Automatic Magic
    • Spec sheet generated with full technical details
    • Plan Mode activated automatically
    • Development plan created with all steps
  3. Execute & Watch
    • Auto-repair fixes issues in real-time
    • Reflection scores guide quality
    • Context saves every decision
  4. Choose Execution Style
    • Select Automated Run for speed
    • Or Guided Run for precision control
  5. Polish & Finalize
    • Click Polish & Unify Design for professional finish
    • Download as ZIP for deployment
    • View Learning Stats to track AI improvement

Workflow 5: Debugging a Complex Issue

  1. Identify the Problem
    • User reports: "The form isn't submitting"
    • Open the project in browser
    • Press F12 to open developer console
  2. Use Debug Prompt 🐛
    • Copy the console error message
    • Click Debug Prompt button in the interface
    • Paste the error in the console field
    • Add specific context: "The submit button should validate email before posting to API"
    • Click Submit Debug Request
  3. AI Analysis in Action
    • System analyzes the console error
    • Reviews your selected project files
    • Understands the intended behavior from your prompt
    • Generates a targeted, context-aware fix
  4. Automatic Fix Applied
    • Solution implemented automatically
    • Files updated with corrections
    • Auto-repair verifies the fix works
    • No manual code editing required
  5. Test & Verify
    • Refresh browser to see changes
    • Test the form submission flow
    • Confirm error is completely resolved
    • Check reflection score for fix quality
  6. Learning Captured
    • Fix pattern stored in database
    • Similar errors will be prevented in future projects
    • Reflection score recorded for continuous improvement
    • Your AI just got smarter

📈 Understanding Your AI's Intelligence

How ZenCode AI Improves Over Time

First Use: Standard AI responses, generic code patterns, basic error handling
After 10 Projects: Recognizes your coding style, suggests familiar architectures, faster error detection
After 50 Projects: Anticipates your preferences, proactive error prevention, highly optimized suggestions
After 100+ Projects: Expert-level understanding, minimal errors, seamless collaboration

Key Metrics to Watch:

🎉 You're Ready!

ZenCode AI is your intelligent coding partner that learns and evolves with every project.

Remember:

Your AI assistant learns from:

✅ Every successful build
✅ Every error and fix
✅ Your coding preferences
✅ Project-specific patterns
✅ Your feedback and corrections

🚀 Happy coding!

Need help? Check the tooltips in the interface or revisit this manual anytime. Your AI is learning with you!