← Back to Help Center

🧙 The AI Wizard

How to prompt, build, iterate, and troubleshoot.

What Is the Wizard?

The Wizard is SaaSClaw's core building experience. It's a chat interface where you describe what you want, and the AI agent plans, writes, and iterates on your application code in real time.

Getting Started

1. Create a project (choose a framework or import from your GitHub repo).
2. Click 🧙 Wizard on the project page to start a session.
3. Type what you want to build.
4. Review the agent's tool activity as it reads files, writes code, and runs commands.
5. Click 🚀 Deploy when you're happy with the result.

📋 Prompting Tips

The better your prompt, the better the output. Here's what works:

Break Big Projects Into Steps

Don't ask the wizard to build everything at once. Start with the core, then iterate:

1. First message: "Build a task management app with a list view, add/edit/delete tasks, and local storage persistence."
2. Second message: "Now add a calendar view that shows tasks on their due dates."
3. Third message: "Add drag-and-drop reordering to the list view."

Each step is smaller, more testable, and easier to debug.

Tell It What Framework You're Using

The wizard detects your framework, but it helps to reference it:

• "Use Vue 3 Composition API with TypeScript"
• "Write it as a Django app with template inheritance"
• "Make it a single-page React app with Tailwind CSS"

Static Sites & Data Storage

Static sites don't have a server or database, but the wizard knows how to use the SaaSClaw Form API to store data server-side:

• "Add a contact form that submits to the Form API — name, email, and message fields"
• "Build a waitlist signup form that POSTs to /api/forms/{slug}/"
• "Add a newsletter subscription form at the bottom of the landing page"

Just ask the wizard to store, save, submit, or persist data — it will use the Form API automatically. You can view submissions on the project page under Submissions.

Reference Existing Code

The wizard reads your project files automatically. You can also:

• "Update the header in App.vue to match the new color scheme"
• "Refactor the API calls in utils/fetch.js to use async/await"
• "Fix the bug in the handleSubmit function in Login.svelte"

🔧 Troubleshooting

The Agent Seems Stuck

Sometimes the stream goes silent mid-turn. If the wizard indicator shows "thinking" for more than 30 seconds with no tool activity:

1. Wait — complex operations (large file writes, npm installs) can take time.
2. If you see ⚠️ Agent seems stuck, click ⟳ Retry to reset the UI.
3. Click ⏹ End to end the session, then start a new one.

The Agent Wrote Broken Code

• Ask it to fix specific issues: "The button doesn't do anything when clicked — check the event handler."
• If it keeps failing, be more specific: "In App.vue, the submitForm function needs to call the API endpoint POST /api/tasks."
• Start a new session if context is getting confused.

Deploy Failed

• Check the deploy status on the project page — error details are shown there.
• Python projects: Version pin conflicts are common (e.g., a library pinned to a version not available on Python 3.14). Check requirements.txt.
• Node projects: Dependency conflicts between vite and plugins can cause npm install to fail.
• Try deploying again — sometimes a second attempt resolves transient issues.

Preview Shows Errors / 400 / 500

• 400 Bad Request: Usually Django's ALLOWED_HOSTS. Make sure your settings read from environment variables.
• 500 Server Error: Often unapplied migrations. The wizard doesn't always run migrations — check if manage.py migrate is needed.
• 404 Not Found: The app might not have a root route, or the build didn't generate the expected output.

Changes Aren't Showing Up

• You need to click 🚀 Deploy after the wizard makes changes — code is only in the repo until deployed.
• Hard-refresh the preview URL (Ctrl+Shift+R) to bypass browser cache.
• Check that static files were collected (Django projects).

⌨️ Wizard Controls

• Send — Send your message to the agent.
• ✕ Stop — Halt the agent mid-turn. Code written so far is preserved.
• 🔄 New — Start a fresh wizard session for this project.
• 🚀 Deploy — Commit changes and deploy to preview.
• ⏹ End — End the session and return to the project page.

🧠 Agent Activity

While the agent works, you'll see tool messages in the chat:

• 📖 read — Reading an existing file to understand the codebase.
• ✏️ write — Creating or overwriting a file.
• 📝 edit — Making targeted edits to a specific file.
• 💻 bash — Running a shell command (install, test, build).
• 🔒 security_scan — Attacker-first vulnerability analysis of source code.
• 📋 quality_check — Code quality gate: checks for tests, comments, docs, and build status before deploy. Use fix=true to auto-generate test scaffolds.

Each tool message shows a preview of what was read/written. Click [collapse] to hide details.

🔒 Security Scanning

The wizard includes a built-in security scanner. Ask it to check your code for vulnerabilities:

• "Check security" — Quick scan for common vulnerability patterns
• "Run a full security audit" — VulnHunter-style phased analysis (Recon → Hunt → Disprove → Report)
• "Scan recent changes for security issues" — Only check files changed since last commit

The scanner checks for:

• SQL injection (raw queries with user input)
• XSS (unescaped user input in HTML)
• Path traversal (user input in file paths)
• Command injection (user input in shell commands)
• SSRF (user input in outbound HTTP URLs)
• Hardcoded secrets (API keys, passwords, tokens)
• Permissive CORS (wildcard origins)
• Authentication/authorization bypass
• Weak cryptography (MD5, SHA1, ECB mode)

For full scans, the wizard traces data flow from entry points (HTTP params, request bodies) to dangerous sinks, then tries to disprove each finding to eliminate false positives. Only confirmed vulnerabilities are reported — with severity, file:line, exploit path, and suggested fix.

🛡️ PII Redaction (Presidio)

Every message sent to the LLM passes through PII Guard, powered by Microsoft Presidio. It detects and redacts 13 types of Personally Identifiable Information before it reaches the model:

• SSNs, credit cards, phone numbers, emails
• Bank routing/account numbers, salary information
• Date of birth, passport numbers, driver licenses
• AWS keys, database connection strings, IP addresses

Detected values are replaced with synthetic placeholders (, , etc.) so your data never leaves your infrastructure. If the Presidio service is unavailable, built-in regex patterns provide identical coverage.

🕶️ Prompt Injection Defense (Sunglasses)

All user input is scanned using the Sunglasses library — 1,094 attack patterns across 65 categories. The system blocks:

• Prompt injection — "ignore previous instructions", fake system messages
• Jailbreaks — DAN mode, developer mode bypasses
• Indirect injection — embedded instructions in files, web content
• Social engineering — credential phishing, urgency pressure
• Tool/MCP poisoning — malicious tool definitions in content
• Memory poisoning — "remember this for later" attacks
• Encoding evasion — base64 payloads, RTL overrides, zero-width chars
• Data exfiltration — suspicious webhook URLs, DNS tunneling

Dual-layer scanning runs at both the wizard endpoint and the agent runner for defense in depth.

📋 Code Quality Gate

The wizard enforces code quality standards before deploying. The quality_check tool verifies:

• Tests — Every new feature or bug fix must have tests. The tool checks which code files have corresponding test files.
• Comments — Functions, classes, and complex logic must have docstrings or comments. Files with less than 5% comment density are flagged.
• Documentation — README.md and docs/ must exist and be updated for new features.
• Build — Code must compile/build successfully before deploying.

The wizard's system prompt enforces these rules:

• Every new function/class MUST have a docstring or comment
• Every new feature MUST include at least one test
• Bug fixes MUST include a regression test
• README MUST be updated for new features
• Run quality_check BEFORE deploying

💡 Best Practices

• Be specific about tech stack, styling, and behavior.
• Build incrementally — core first, features later.
• Deploy and test frequently rather than building everything before checking.
• If the agent goes off track, stop it and redirect with a clearer prompt.
• Start a new session when context gets long — keeps things focused.