App Builder Overview
Turn plain-English descriptions into fully functional business applications—built, validated, and deployed in a single conversation with an AI agent.
What is the App Builder?
The App Builder is a conversational development environment embedded in MangoApps Workforce. Administrators describe the application they need in natural language, and an AI agent powered by Claude reads the SDK documentation, studies example plugins, plans the architecture, writes all the code, validates syntax and security, and deploys the app—all streamed in real-time to a chat-based interface.
The result is a production-ready application with dashboards, CRUD operations, email notifications, scheduled jobs, analytics, and full access to platform data like shifts, schedules, attendance, and leave requests.
Core Value Proposition:
- 🤖 Conversational Development — Describe what you need; the AI handles architecture, code, validation, and deployment
- ⚡ Real-Time Streaming — Watch the AI think, write files, run tools, and fix issues live
- 🔄 Iterative Refinement — Send follow-up messages to add features, fix bugs, or change behavior in the same session
- 🛡️ Built-In Quality Gates — Automatic syntax validation, security scanning, code review, post-deploy verification, and auto-fix
At a Glance
| 📋 Starter Templates | 🔧 AI Tools | 🔄 Auto-Fix Retries | 📡 Streaming |
|---|---|---|---|
| 20+ across 9 categories | 17 specialized tools | Up to 3 per deploy | Real-time via ActionCable |
Perfect For:
- 🏢 Administrators — Build custom internal tools without writing code or filing IT requests
- 🔧 Operations Teams — Create expense trackers, approval workflows, equipment logs, and alert systems in minutes
How It Works
The Build Conversation
┌───────────────────────────────────────────────────────────────────────────────┐
│ APP BUILDER CONVERSATION │
├───────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────┐ │
│ │ YOU DESCRIBE │ "Build an expense tracker where employees submit │
│ │ (Plain English) │ expenses and managers approve them. Include │
│ │ │ a dashboard with spend charts and email │
│ │ │ notifications on approval." │
│ └───────┬────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ AI AGENT WORKS │ │
│ │ │ │
│ │ Phase 1: RESEARCH Phase 2: PLANNING Phase 3: BUILDING │ │
│ │ 📖 Read SDK docs 🔍 Check slug 📝 Write plugin.rb │ │
│ │ 📚 Study examples 📋 Plan architecture 📝 Write controllers│ │
│ │ 📝 Write views │ │
│ │ 📝 Write templates │ │
│ │ │ │
│ │ Phase 4: QUALITY Phase 5: DEPLOY Phase 6: VERIFY │ │
│ │ ✅ Validate syntax 🚀 Deploy to platform 🔍 Check registry │ │
│ │ 🔒 Security scan 📦 Create package 🌐 Test HTTP pages │ │
│ │ ⭐ Code review 🔄 Register plugin 🔧 Auto-fix if err │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────┐ │
│ │ APP IS LIVE │ Open your new app, iterate with follow-ups, or │
│ │ (Deployed) │ start a new session │
│ └────────────────┘ │
│ │
└───────────────────────────────────────────────────────────────────────────────┘
Auto-Fix Verification Loop
┌───────────────────────────────────────────────────────────────────────────┐
│ POST-DEPLOY AUTO-FIX LOOP │
├───────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────────────┐ │
│ │ DEPLOY │────▶│ VALIDATE │────▶│ ERRORS FOUND? │ │
│ └──────────────┘ └──────────────┘ └────────────┬─────────────┘ │
│ │ │
│ ┌──────────────────────────┼────────┐ │
│ │ No │ Yes │ │
│ ▼ ▼ │ │
│ ┌────────────┐ ┌────────────┐ │ │
│ │ SUCCESS │ │ AI FIXES │ │ │
│ │ ✅ Done │ │ errors & │ │ │
│ └────────────┘ │ redeploys │ │ │
│ └──────┬─────┘ │ │
│ │ │ │
│ ┌──────────▼──┐ │ │
│ │ Retry ≤ 3 │────┘ │
│ │ times │ │
│ └─────────────┘ │
│ │
└───────────────────────────────────────────────────────────────────────────┘
Key Features
🤖 The AI Agent
The builder uses a Claude-powered AI agent with 17 specialized tools, streaming responses, and a tiered prompt system that adapts to the complexity of your request.
| Capability | How It Works |
|---|---|
| Thinking Mode | The AI shows its reasoning process with configurable effort levels (low, medium, high) |
| 17 Tools | Purpose-built tools for every phase—research, building, validation, deployment, and management |
| Streaming Output | Text, thinking, and tool execution progress stream to the UI in real-time via ActionCable |
| Tool Call Budget | Max 50 tool calls per session to keep builds focused and efficient |
| Conversation Memory | Full conversation history maintained; summarized after 10 messages to manage context length |
| Feature Layer Detection | Keywords in your request trigger specialized prompt layers (widgets, webhooks, workflows, etc.) |
| Business Context | The AI knows your business name, user count, locations, departments, enabled apps, and deployed plugins |
🔧 The 17 AI Tools
Every tool the AI agent can use during a build session:
Research Phase
| Tool | Purpose |
|---|---|
GetSdkDocumentation |
Reads the complete Plugin SDK reference before writing any code |
ReadExamplePlugin |
Studies full source code of 6 reference plugins (project_tracker, expense_tracker, hello_world, pto_reminder, overtime_dashboard, schedule_publish_notifier) |
Planning Phase
| Tool | Purpose |
|---|---|
CheckSlugAvailability |
Verifies the plugin slug isn’t taken by system plugins, marketplace apps, or other businesses |
Building Phase
| Tool | Purpose |
|---|---|
WritePluginFile |
Creates or replaces a file in the plugin session (plugin.rb, controllers, views, templates) |
ReadPluginFile |
Reads an existing file to understand current state before making changes |
PatchPluginFile |
Applies a targeted find-and-replace edit to a single file—safer than full rewrites for small changes |
Quality Phase
| Tool | Purpose |
|---|---|
ValidateRubySyntax |
Compiles Ruby code to catch syntax errors before deployment |
SecurityScan |
Scans for prohibited patterns: eval, system calls, direct DB access, and other dangerous code |
ReviewPluginCode |
Analyzes plugin code against best practices and returns a scored quality report with suggestions |
RunPluginTests |
Executes the plugin’s test suite in an isolated mock context |
Deployment Phase
| Tool | Purpose |
|---|---|
DeployPlugin |
Writes files to the plugin directory, creates a package record, registers the plugin, and triggers a server restart |
VerifyPlugin |
Post-deploy verification: checks plugin registry, loads controllers, compiles templates, and tests HTTP pages |
SeedSampleData |
Populates the deployed plugin with realistic sample records so users see content immediately |
Management Phase
| Tool | Purpose |
|---|---|
ListDeployedPlugins |
Shows all plugins deployed for the current business |
GetPluginHealth |
Retrieves health status, error counts, and analytics for a plugin |
DisablePlugin |
Disables a plugin (triggers on_deactivate hook) |
EnablePlugin |
Re-enables a disabled plugin (triggers on_activate hook) |
GetAuditLog |
Retrieves recent audit log entries for a plugin |
📡 Real-Time Streaming
Every action streams to the browser via ActionCable’s PluginBuilderChannel.
| Stream Event | What You See |
|---|---|
thinking |
Indicator that the AI is reasoning about the next step |
thinking_chunk |
Incremental thinking text displayed in real-time |
chunk |
AI response text appearing word-by-word |
tool_progress (executing) |
Tool name, phase badge, and description (e.g., “Validating plugin.rb”) |
tool_progress (completed) |
Tool result summary with elapsed time (e.g., “plugin.rb syntax OK — 0.2s”) |
files_updated |
File tree sidebar refreshes when files are written or patched |
auto_fix |
Auto-fix attempt notification with error details and retry count |
complete |
Final completion with file list, deploy status, tool call count, and token usage |
error |
Error message if something goes wrong |
Build Phases: Each tool is classified into a phase displayed as a badge during streaming:
| Phase | Tools | Badge |
|---|---|---|
| Research | GetSdkDocumentation, ReadExamplePlugin | 📖 research |
| Planning | CheckSlugAvailability | 📋 planning |
| Building | WritePluginFile, ReadPluginFile, PatchPluginFile | 🔨 building |
| Quality | ValidateRubySyntax, SecurityScan, ReviewPluginCode | ✅ quality |
| Testing | RunPluginTests | 🧪 testing |
| Deploying | DeployPlugin | 🚀 deploying |
| Verifying | VerifyPlugin | 🔍 verifying |
| Seeding | SeedSampleData | 🌱 seeding |
| Managing | ListDeployedPlugins, GetPluginHealth, DisablePlugin, EnablePlugin, GetAuditLog | ⚙️ managing |
🧠 Tiered Prompt System
The AI agent uses a smart prompt system that adapts to the complexity of your request. Simple apps get a focused prompt; complex ones get additional context layers.
| Feature Layer | Triggered By Keywords | What It Adds |
|---|---|---|
| Dashboard Widgets | “dashboard”, “widget”, “overview” | Widget DSL, PluginWidgetAdapter patterns |
| Search | “searchable”, “find”, “discoverable” | Search indexing, GlobalSearchService extension |
| Notifications | “notify”, “alert”, “push”, “SMS” | NotificationService integration, push/SMS patterns |
| Org Graph | “role”, “permission”, “department”, “hierarchy” | Read-only query objects for organizational structure |
| DataTable & Schema | “table”, “tracker”, “spreadsheet”, “inventory” | Record schema DSL, typed fields, DataTables.js patterns |
| Workflows | “workflow”, “approval”, “state machine” | Workflow DSL, state machines, ApprovalRequest bridging |
| Webhooks | “webhook”, “integration”, “Stripe”, “Slack” | Incoming/outgoing webhook DSLs, HMAC verification |
Prompt Size Management: Base prompt ~800 lines, each feature layer adds ~200–400 lines. Maximum prompt size capped at 2,500 lines to keep the AI focused.
📋 Template Gallery
Start from 20+ pre-built templates organized by category and difficulty.
| Category | Templates | Examples |
|---|---|---|
| Getting Started | 2 | Hello World (beginner), Simple Counter (beginner) |
| CRUD / Data Management | 3 | Equipment Tracker, Inventory Manager, Team Kudos |
| Analytics & Dashboards | 2 | Overtime Dashboard, Leave Analytics |
| Notifications | 1 | Slack Notifier |
| Automation & Workflows | 3 | Approval Flow, Schedule Alerts, Daily Digest |
| HR & People | 2 | Onboarding Checklist, Training Tracker |
| Finance & Expense | 2 | Expense Tracker, Mileage Logger |
| Integrations | 2 | Webhook Relay, Cross-Plugin Dashboard |
| General | Custom | User-saved templates |
Template Features:
- Filter templates by category with tabbed navigation
- Difficulty badges (beginner, intermediate, advanced)
- Usage count tracking (“12 uses”)
- Custom templates: save any AI session as a reusable template for your organization
- One-click to populate the chat with the template’s prompt
💬 Session Management
The App Builder maintains persistent sessions with full conversation history.
| Feature | Description |
|---|---|
| Resume Sessions | Pick up where you left off—conversation history, files, and deploy status preserved |
| Session Search | Search across session names and descriptions |
| Rename Sessions | Double-click the session name in the header to rename (or right-click menu) |
| Delete Sessions | Remove sessions you no longer need |
| Conversation Summarization | After 10 messages, older conversation is compressed into a structured summary (original request, plugin metadata, file list, progress) while keeping the last 4 messages verbatim |
| Optimistic Locking | Sessions are locked during AI processing (5-minute TTL) to prevent concurrent builds |
Deploy Statuses:
| Status | Meaning |
|---|---|
draft |
Session created, no generation started |
generating |
AI agent is actively building |
deploying |
Plugin is being written to disk and registered |
deployed |
Plugin is live and accessible |
failed |
An error occurred during generation or deployment |
✏️ Manual Editing & Code Review
Review and edit generated code before deploying.
| Feature | Description |
|---|---|
| File Tree Sidebar | Browse all generated files in a tree view with file count |
| Code Editor Drawer | Slide-over editor with syntax highlighting for viewing and editing files |
| Edit Toggle | Switch between read-only and edit mode |
| Diff View | Compare changes to see what the AI modified |
| Ask AI About File | Click the wand icon to ask the AI to edit the currently open file |
| Validate Button | Run pre-deploy validation (syntax + security) on all files |
| Download as ZIP | Export the complete app source code for external development or backup |
🚀 Deployment & Verification
One-click deployment with automatic post-deploy verification.
| Step | What Happens |
|---|---|
| 1. File Write | All generated files written to the plugin directory |
| 2. Package Creation | PluginPackage record created with version, checksum, and metadata |
| 3. Plugin Registration | Plugin class registered in MangoappsSdk::PluginRegistry |
| 4. MarketplaceApp Sync | Corresponding marketplace app entry created/updated |
| 5. Server Restart | Touch tmp/restart.txt to reload the application |
| 6. Verification | AI calls VerifyPlugin to check registry, controllers, templates, and HTTP responses |
| 7. Auto-Fix | If verification fails, PluginFileValidator feeds errors back to the AI for up to 3 auto-fix attempts |
Verification Checks:
- Plugin class loaded in registry
- Controller classes resolve (tries both plural and singular naming)
#indexaction exists on each controller- ERB templates compile without syntax errors
- HTTP requests to plugin pages return 200 (or auth redirect)
- Error pages detected and reported with exception class, message, and backtrace
🔄 Iterative Refinement
Modify deployed or in-progress apps through follow-up messages.
| Approach | When to Use | How It Works |
|---|---|---|
| Patch | Small changes (fix a label, add a column, change a color) | PatchPluginFile does a targeted find-and-replace on one occurrence |
| Rewrite | Major changes (>50% of file affected) | WritePluginFile replaces the entire file |
| Never regenerate unchanged files | The AI is instructed to only touch files that need changes | Unchanged files remain exactly as-is |
Context Preservation:
- Current files are included in the AI’s context (truncated to 3,000 chars each)
- Conversation messages truncated to 2,000 chars each
- After 10 messages, older conversation summarized to manage prompt size
📥 Import Existing Apps
Bring deployed apps into the App Builder for modification or improvement.
| Feature | Description |
|---|---|
| Import from Plugin Manager | Click any deployed app on the welcome screen to import its source files |
| Full File Import | All plugin files (plugin.rb, controllers, views, templates) loaded into a new session |
| Compatibility Check | SDK compatibility checker runs on import to flag deprecated APIs |
| AI-Assisted Improvement | Once imported, ask the AI to add features, fix issues, or modernize the code |
What the AI Can Build
The AI generates complete app packages with these file types and capabilities:
| Component | Files Generated | Capabilities |
|---|---|---|
| Plugin Definition | plugin.rb |
Slug, name, version, capabilities, settings, navigation, widgets, workflows, events, scheduled jobs |
| Controllers | controllers/*.rb |
CRUD operations, JSON APIs, file uploads, search, pagination, bulk operations |
| Views | views/plugins/{name}/**/*.html.erb |
Dashboards, list views, forms, detail pages, charts (Chart.js, ApexCharts) |
| Email Templates | views/mailers/*.html.erb |
Formatted HTML emails sent via PluginMailer |
| Tests | test/plugin_test.rb |
Automated tests run in isolated mock context via PluginTestRunner |
Platform Integrations Available:
- 16+ read-only APIs (users, shifts, schedules, attendance, timesheets, leave, holidays, and more)
- JSONB data storage with search, pagination, and file attachments
- Email sending with ERB templates (100/hour)
- HTTP calls to external APIs with rate limiting (50/min)
- Cron-like scheduled jobs
- Platform event hooks (25+ event types)
- Dashboard widgets
- Auto-generated admin settings UI
- Ask AI agent tools
- RAG semantic search indexing
- Incoming webhooks with HMAC verification
User Roles & Permissions
| Role | Capabilities |
|---|---|
| Admin | Full access to App Builder: create sessions, build apps, deploy, import, manage templates, generate API keys |
| Employee | No access to App Builder (admin-only feature); uses deployed apps as enabled by admin |
Feature Gate: The App Builder requires plugin_ai_builder_enabled? to be set on the business. If disabled, administrators are redirected to the Plugin Manager with an informational message.
How We Compare
See how the MangoApps App Builder compares to leading AI-powered app builders:
| Feature | MangoApps App Builder | Bolt.new | Lovable | Replit Agent |
|---|---|---|---|---|
| Conversational AI Building | ✅ | ✅ | ✅ | ✅ |
| Real-Time Streaming | ✅ | ✅ | ✅ | ✅ |
| Pre-Built Templates | ✅ (20+) | ❌ | ⚡ Limited | ⚡ Limited |
| Auto-Fix Verification Loop | ✅ (3 retries) | ❌ | ❌ | ⚡ Limited |
| Post-Deploy Verification | ✅ (HTTP + registry) | ❌ | ❌ | ❌ |
| Platform Data Access (HR, Shifts, Leave) | ✅ (16+ APIs) | ❌ | ❌ | ❌ |
| Built-In Email & Scheduled Jobs | ✅ | ❌ | ❌ | ❌ |
| Security Scanning | ✅ (static analysis) | ❌ | ❌ | ❌ |
| Code Review & Scoring | ✅ | ❌ | ❌ | ❌ |
| One-Click Deploy to Production | ✅ | ❌ (manual) | ✅ | ✅ |
| No Per-User Pricing | ✅ | 💰 $20/mo | 💰 $25/mo | 💰 $20/mo |
| Legend: ✅ Included | ❌ Not Available | 💰 Paid Add-on | ⚡ Limited |
Why MangoApps App Builder?
- 🔗 Platform-Native — Built apps connect directly to shifts, schedules, attendance, leave, and user data without any API configuration
- 🛡️ Enterprise Quality Gates — Automatic syntax validation, security scanning, code review scoring, and post-deploy HTTP verification with auto-fix loop
- 💰 No Separate Cost — Included in the MangoApps platform, no per-user or per-build pricing
Getting Started
Step 1: Open the App Builder
Navigate to Admin → Plugins → App Builder (or click the “Create with AI” button in the Plugin Manager header).
Step 2: Choose How to Start
- Pick a template — Browse the gallery, filter by category, and click to populate the chat
- Type a description — Describe the app you want in the text area and press Enter
- Import an app — Click any deployed app to import its source files for modification
Step 3: Watch the AI Build
The AI will stream its progress in real-time:
- 📖 Reading SDK docs and example plugins
- 📋 Planning architecture and checking slug availability
- 🔨 Writing files (plugin.rb first, then controllers, views, templates)
- ✅ Validating syntax and running security scans
- ⭐ Reviewing code quality
Step 4: Review & Deploy
- Browse files in the sidebar tree
- Click any file to open it in the code editor
- Click Deploy App to go live
- The AI automatically verifies the deployment and auto-fixes any issues
Step 5: Iterate
- Send follow-up messages to add features, change behavior, or fix issues
- The AI patches only the files that need changes
- Re-deploy when ready
Best Practices
Writing Effective Prompts
- ✅ Be specific — “Build an expense tracker with categories (Travel, Office, Equipment), manager approval workflow, and a dashboard with spend-by-category chart” works better than “Build an expense app”
- ✅ Mention capabilities upfront — If you need email, scheduled jobs, or external HTTP calls, say so in the first message
- ✅ Reference target users — “Employees submit, managers approve, admins see analytics” helps the AI plan permissions correctly
During the Build
- ✅ Let the AI finish — Wait for the “complete” message before sending follow-ups
- ✅ Use follow-ups for refinement — “Add a CSV export button to the list page” is better than starting a new session
- ✅ Review the code review — The AI runs
ReviewPluginCodeand reports a quality score; address suggestions before deploying
After Deployment
- ✅ Check the verification results — The AI reports which pages passed and which failed
- ✅ Seed sample data — The AI can populate your app with realistic records so users see content immediately
- ✅ Save as template — If you built something reusable, click “Save as Template” to share it with your organization
Frequently Asked Questions
Q: How long does it take to build an app?
A: Simple apps (dashboard, counter) take 1–2 minutes. Full CRUD applications with email, charts, and multiple pages typically take 3–5 minutes. The AI uses up to 50 tool calls per session, and you can see progress streamed in real-time.
Q: What happens if the AI-generated code has errors?
A: After every deployment, the AI runs automatic verification that checks the plugin registry, controller loading, template compilation, and HTTP responses. If errors are found, the auto-fix loop feeds them back to the AI, which patches the issues and redeploys—up to 3 attempts. Validation errors (syntax, security) are also caught before deployment.
Q: Can I edit the code manually?
A: Yes. The file tree sidebar lets you browse all generated files, and the code editor drawer provides syntax-highlighted editing. Changes are saved to the session immediately. You can also download the full source as a ZIP for editing in your preferred IDE.
Q: What platform data can my apps access?
A: Apps have read-only access to 16+ platform query objects: users, shifts, schedules, locations, departments, attendance records, timesheets, leave requests, leave balances, holidays, user availabilities, shift listings, approval requests, and more. All queries are automatically business-scoped.
Related Resources
- Apps & Extensions Overview — Complete marketplace app catalog
- Workforce Bots Overview — AI Q&A bots and document analysis tools
Describe what you need. The AI builds it. Your custom app is live in minutes.
