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, reviews platform fit, 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. Build full apps, dashboard widgets, or Ask AI agents—all from the same conversational interface.
Core Value Proposition:
- 🤖 Conversational Development — Describe what you need; the AI handles architecture, code, validation, and deployment
- ⚡ Three Build Targets — Full apps with pages and data, dashboard widgets for the home screen, or Ask AI agents for conversational data access
- 🔄 Build in QA, Promote to Production — Apps are created and tested in Dev/QA environments, then promoted to production through a controlled pipeline
- 🏪 App Gallery — Share your apps with other customers through a centralized, reviewed App Gallery
- 🛡️ Five Quality Gates — Syntax validation, security scanning, code review, platform-fit review, and post-deploy verification with auto-fix
At a Glance
| 🎯 Build Targets | 🔧 AI Tools | 🔄 Quality Gates | 🌍 Environments | 📡 Streaming |
|---|---|---|---|---|
| 3 (App, Widget, Agent) | 22 specialized tools | 5 automated checks | Build in QA, promote to Prod | Real-time via ActionCable |
Perfect For:
- 🏢 Administrators — Build custom internal tools in QA without writing code, then promote to production for your team
- 🔧 Operations Teams — Create expense trackers, approval workflows, equipment logs, and alert systems in minutes
- 🤖 Platform Developers — Use the MCP API to build plugins from Cursor, Claude Code, or any AI-assisted editor
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." │
│ └───────┬────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ PHASE 1: SPEC REFINEMENT │ │
│ │ 🤝 AI asks clarifying questions about requirements │ │
│ │ 📋 Builds a structured spec from the conversation │ │
│ │ ✅ You confirm the spec → AI transitions to build mode │ │
│ └───────────────────────────────────────────────────────────────────┬─┘ │
│ │ │ │
│ ▼ │ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ PHASE 2: AI AGENT BUILDS │ │
│ │ │ │
│ │ RESEARCH PLANNING BUILDING QUALITY │ │
│ │ 📖 Read SDK docs 🔍 Check slug 📝 Write files ✅ Validate │ │
│ │ 📚 Study examples📋 Platform-fit plan 📝 Controllers 🔒 Security │ │
│ │ 🔌 Discover APIs 🏗️ Architecture 📝 Views ⭐ Code review │ │
│ │ 🎯 Fit review │ │
│ │ │ │
│ │ DEPLOY VERIFY AUTO-FIX │ │
│ │ 🚀 Deploy app 🔍 Registry check 🔧 Fix errors │ │
│ │ 📦 Create package 🌐 HTTP test pages 🔄 Redeploy │ │
│ │ 🔄 Register 🧪 Compile check ↩️ Up to 3 retries │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────┐ │
│ │ APP IS LIVE │ Open your new app, iterate with follow-ups, or │
│ │ (Deployed) │ publish to marketplace │
│ └────────────────┘ │
│ │
└───────────────────────────────────────────────────────────────────────────────┘
Five Quality Gates
┌───────────────────────────────────────────────────────────────────────────┐
│ AUTOMATED QUALITY PIPELINE │
├───────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 1. SYNTAX │──▶│ 2. SECURITY │──▶│ 3. CODE │ │
│ │ Validation │ │ Scan │ │ Review │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 4. PLATFORM │ │ 5. POST- │ │
│ │ FIT REVIEW │────────────────────▶│ DEPLOY │ │
│ │ (score/100) │ │ VERIFY │ │
│ └──────────────┘ └──────┬───────┘ │
│ │ │
│ ┌─────────▼─────────┐ │
│ │ ERRORS? → AUTO-FIX │ │
│ │ (up to 3 retries) │ │
│ └───────────────────┘ │
│ │
└───────────────────────────────────────────────────────────────────────────┘
Integration Ecosystem
┌─────────────────┐
│ APP BUILDER │
└────────┬────────┘
│
┌─────────────┬───────────────┼───────────────┬─────────────┐
▼ ▼ ▼ ▼ ▼
┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐
│ Plugin │ │ Plugin │ │Marketplace│ │ MCP API │ │ Ask AI │
│ Manager │ │ Health │ │ Directory │ │ (External)│ │ Agents │
└───────────┘ └───────────┘ └───────────┘ └───────────┘ └───────────┘
Key Features
🎯 Three Build Targets
Choose the type of application to build before starting your conversation.
| Build Target | Description | What Gets Generated |
|---|---|---|
| Full App | Complete application with pages, data, and workflows | plugin.rb, controllers, views, templates, email templates, tests |
| Dashboard Widget | Data card for the home dashboard | plugin.rb with widget declaration, widget partial |
| Ask AI Agent | Conversational agent that answers questions from your data | plugin.rb with agent block, instructions, and tools |
Use Case: An HR team builds a full “Equipment Tracker” app for managing assets, a “Headcount Widget” for the executive dashboard, and a “Benefits Agent” that employees can ask questions about their coverage—all from the same builder interface.
🤖 The AI Agent
The builder uses a Claude-powered AI agent with 22 specialized tools, streaming responses, and a two-phase conversation model that first refines your requirements before building.
| Capability | How It Works |
|---|---|
| Spec Refinement Phase | The AI asks clarifying questions and builds a structured spec before writing code |
| Thinking Mode | The AI shows its reasoning process with configurable effort levels (low, medium, high) |
| 22 Build 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 100 tool calls per session to keep builds focused and efficient |
| Conversation Memory | Full history maintained; after 10 messages, older conversation compressed into structured summary |
| 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 |
| Platform-Fit Planning | Before building, generates a platform-fit plan mapping requirements to SDK capabilities |
| Multimodal Input | Upload up to 5 images per message (PNG, JPEG, GIF, WebP) to show mockups or reference designs |
| Content Moderation | All inputs and outputs pass through content moderation and PII scanning |
| Cancel Anytime | Stop generation mid-build if the approach isn’t right |
🔧 The 22 AI Build 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 reference plugins |
RecommendPlatformIntegrations |
Suggests which platform APIs and integrations best fit the request |
GetAppCapabilityProfile |
Retrieves the capability profile of existing apps for integration context |
GetPlatformSchemaContext |
Provides the full platform data schema (models, fields, relationships) |
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 |
ReadPluginFile |
Reads an existing file to understand current state before making changes |
PatchPluginFile |
Applies a targeted find-and-replace edit—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 |
ReviewPluginCode |
Analyzes code against best practices and returns a scored quality report |
ReviewPlatformFit |
Checks the plugin against MangoApps platform conventions (score out of 100) |
RunPluginTests |
Executes the plugin’s test suite in an isolated mock context |
Deployment Phase
| Tool | Purpose |
|---|---|
DeployPlugin |
Writes files, creates package record, registers plugin, triggers reload |
VerifyPlugin |
Post-deploy: checks registry, controllers, template compilation, and HTTP responses |
SeedSampleData |
Populates the deployed plugin with realistic sample records |
Management Phase
| Tool | Purpose |
|---|---|
ListDeployedPlugins |
Shows all plugins deployed for the current business |
GetPluginHealth |
Retrieves health status, error counts, and analytics |
DisablePlugin |
Disables a plugin (triggers on_deactivate lifecycle 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 |
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 count, token usage, and build target |
cancelled |
Generation stopped by user |
timeout |
Session timed out (configurable execution timeout) |
error |
Error message if something goes wrong |
Build Phases: Each tool is classified into a phase displayed as a badge during streaming:
| Phase | Badge | Tools |
|---|---|---|
| Research | 📖 | GetSdkDocumentation, ReadExamplePlugin, RecommendPlatformIntegrations, GetAppCapabilityProfile, GetPlatformSchemaContext |
| Planning | 📋 | CheckSlugAvailability |
| Building | 🔨 | WritePluginFile, ReadPluginFile, PatchPluginFile |
| Quality | ✅ | ValidateRubySyntax, SecurityScan, ReviewPluginCode, ReviewPlatformFit |
| Testing | 🧪 | RunPluginTests |
| Deploying | 🚀 | DeployPlugin |
| Verifying | 🔍 | VerifyPlugin |
| Seeding | 🌱 | SeedSampleData |
| Managing | ⚙️ | ListDeployedPlugins, GetPluginHealth, DisablePlugin, EnablePlugin, GetAuditLog |
🧠 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 plus feature layers, capped at 2,500 lines to keep the AI focused.
📋 Template Gallery
Start from pre-built templates organized across 12 categories and three difficulty levels.
| Category | Examples |
|---|---|
| Getting Started | Hello World, Simple Counter |
| CRUD / Data Management | Equipment Tracker, Inventory Manager |
| Analytics & Dashboards | Overtime Dashboard, Leave Analytics |
| Notifications | Slack Notifier, Alert Systems |
| Automation & Workflows | Approval Flow, Schedule Alerts, Daily Digest |
| HR & People | Onboarding Checklist, Training Tracker |
| Finance & Expense | Expense Tracker, Mileage Logger |
| Integrations | Webhook Relay, Cross-Plugin Dashboard |
| Dashboard Widgets | Data cards for the home screen |
| Ask AI Agents | Conversational agents for data |
| Edit Examples | Quick-edit prompts for existing apps |
| General | User-saved custom templates |
Template Features:
- Filter by category with tabbed navigation and count badges
- Difficulty badges (beginner, intermediate, advanced)
- Usage count tracking (“12 uses”)
- Custom templates: save any session as a reusable template for your organization
- Business-scoped: system templates plus your own custom templates
- One-click to populate the chat with the template’s prompt
💡 Pro Tip: Save frequently-used build patterns as templates. Your team can then build similar apps in one click instead of re-describing requirements each time.
💬 Session Management
The App Builder maintains persistent sessions with full conversation history.
| Feature | Description |
|---|---|
| Resume Sessions | Pick up where you left off—conversation, files, deploy status, working memory, and thinking text preserved |
| Session Search | Search across session names and descriptions; paginated list with 20 per page |
| Rename Sessions | Rename sessions to keep them organized |
| Delete Sessions | Remove sessions you no longer need (blocked while AI is processing) |
| Conversation Summarization | After 10 messages, older conversation compressed into a structured summary |
| Optimistic Locking | Sessions locked during AI processing with heartbeat monitoring |
| Working Memory | The AI maintains working memory across the session (platform-fit plan, review results, etc.) |
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 | See what files changed since the last snapshot |
| Ask AI About File | Ask the AI to edit the currently open file |
| Smart Edit Suggestions | AI-generated suggestions for improvements to the current file |
| Quick Prompts / Snippets | Pre-built edit prompts plus dynamic suggestions based on session context |
| 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 |
| Allowed File Types | .rb, .erb, .html.erb, .json, .yml, .yaml, .css, .js, .txt, .md |
🎨 AI Icon Generation
Generate custom app icons directly in the builder.
| Feature | Description |
|---|---|
| Four Styles | Modern, minimalist, playful, corporate |
| Context-Aware | Uses app name, description, and category to generate relevant icons |
| Auto-Attach | Generated icon automatically attached to the deployed MarketplaceApp |
📸 Multimodal Input
Upload images alongside your chat messages to guide the AI.
| Feature | Description |
|---|---|
| Image Types | PNG, JPEG, GIF, WebP |
| Max Size | 10 MB per image |
| Max Per Message | 5 attachments |
| CDN Upload | Images uploaded to CDN and passed to the AI as visual context |
Use Case: Upload a wireframe or screenshot of an existing tool and tell the AI “Build an app that looks like this.”
🔄 Version History & Snapshots
Every build iteration is automatically snapshotted for easy rollback.
| Feature | Description |
|---|---|
| Automatic Snapshots | Snapshot taken after every AI build that produces files |
| Version Browser | Modal showing all versions with prompt, timestamp, and file count |
| Restore Any Version | One-click restore to any previous snapshot |
| Files Preserved | Full file tree preserved in each snapshot |
🚀 Deployment & Verification
One-click deployment with automatic post-deploy verification.
| Step | What Happens |
|---|---|
| 1. Validation | Syntax validation and security scanning on all generated files |
| 2. File Write | Atomic file deployment: staging directory → swap → backup cleanup |
| 3. Package Creation | PluginPackage record with semver versioning, checksum, and metadata |
| 4. Plugin Registration | Plugin class registered in the platform registry |
| 5. MarketplaceApp Sync | Marketplace app entry created/updated; sidebar cache busted |
| 6. Icon Attach | AI-generated icon attached to the marketplace listing |
| 7. Marketplace Listing | Auto-generated listing with feature matrix, permissions, and data access summaries |
| 8. Server Reload | Hot-reload in development; selective reload in production |
| 9. Agent Cache Invalidation | Plugin agent registry reset so new Ask AI agents are immediately available |
| 10. Verification | AI checks registry, controllers, templates, and HTTP responses |
| 11. Auto-Fix | If errors found, feeds them back to AI for up to 3 auto-fix attempts |
| 12. Post-Deploy Verify | Additional verification cycle (up to 2 rounds) for runtime issues |
| 13. Data Migration | If upgrading an existing plugin, runs on_upgrade data migration if data_version changed |
📥 Import Existing Apps
Bring deployed apps into the App Builder for modification or improvement.
| Feature | Description |
|---|---|
| Import from Welcome Screen | Click any deployed app to import its source files |
| Full File Import | All plugin files loaded into a new session with original files preserved |
| Compatibility Check | SDK compatibility checker runs on import to flag deprecated APIs |
| Edit Mode Context | AI receives specialized edit-mode prompts with surgical iteration guidance |
| AI-Assisted Improvement | Ask the AI to add features, fix issues, or modernize the code |
🔌 MCP API (External Development)
Build plugins from external AI-assisted editors using a Model Context Protocol (MCP) compatible REST API.
| Endpoint | Method | Purpose |
|---|---|---|
/api/plugin-mcp/tools |
GET | List all available tools |
/api/plugin-mcp/tools/call |
POST | Execute a tool (SDK docs, slug check, syntax validation, security scan, etc.) |
/api/plugin-mcp/query/:scope |
GET | Query platform data (users, shifts, locations, departments, schedules, etc.) |
API Key Scopes:
| Scope | Access |
|---|---|
builder |
SDK docs, examples, slug checks, syntax validation, security scans |
query |
Read-only platform data queries (10+ data types) |
manage |
Plugin health, audit logs, deployed plugin list |
Key Management: Generate, list, and revoke API keys directly from the App Builder UI. Keys use SHA-256 digest authentication and support expiration dates.
💡 Pro Tip: Generate an MCP API key and configure it in Cursor or Claude Code to build MangoApps plugins from your favorite IDE with full platform context.
📊 Plugin Health Dashboard
Monitor the health and performance of all deployed plugins.
| Feature | Description |
|---|---|
| Health Overview | Traffic-light scoring (green/yellow/red) for all plugins |
| Error Tracking | 7-day error window with daily trend charts |
| Dead Letter Queue | Failed event handlers with retry and discard controls |
| Analytics | Page views, active users, and error counts over 30/60/90 days with CSV export |
| Compatibility Checks | SDK version compatibility scanning |
| Improvement Suggestions | AI-powered analysis recommending code improvements |
| Audit Log | Full audit trail of all plugin actions (create, update, deploy, rollback, etc.) |
| RAG Management | Toggle semantic search indexing per plugin; reindex controls |
| Event Handler Metrics | Success rates, average latency, and call counts per event handler |
| Version History | Full version history with SDK version tracking |
🏪 App Gallery (Marketplace)
Share your custom apps with other customers through a centralized, reviewed App Gallery.
┌──────────────────┐ ┌────────────────────────────────────┐
│ Your QA Env │ │ Central Hub │
│ │──POST──▶│ console.iq.mangoapps.com │
│ "Submit to │ │ │
│ App Gallery" │ │ 1. MangoApps admins notified │
│ │◀─────────│ 2. Review code + 7-point checklist│
│ Gets approval │ callback │ 3. Approve or request changes │
│ notification │ │ │
└──────────────────┘ │ iq.mangoapps.com/plugins │
│ Approved apps in public gallery │
│ │
┌──────────────────┐ │ Other customers browse & install │
│ Other Customer │◀─S3 ZIP─│ Download artifact from shared S3 │
│ (any env type) │ │ │
└──────────────────┘ └────────────────────────────────────┘
| Component | Description |
|---|---|
| Marketplace Listings | Rich listings auto-generated on deploy with feature matrix, permissions summary, data access summary, and AI capabilities |
| Central API | Listings and review submissions flow via API to the central hub — works for both multi-tenant and private cloud deployments |
| Submission Workflow | Draft → Submitted → In Review → Published (with changes_requested and suspended states) |
| Automated Review | Automated code review runs on submission to pre-check quality |
| Human Review | MangoApps admins review at console.iq.mangoapps.com with a 7-point checklist (claimed functionality, capabilities, data privacy, error handling, business scoping, performance, UI standards) |
| Review Callbacks | Publisher deployment receives HMAC-signed callbacks when reviews are approved, rejected, or need changes |
| Public Gallery | SEO-optimized public-facing plugin directory at iq.mangoapps.com/plugins with search, categories, and install counts |
| One-Click Install | Install from the gallery into your business with automatic S3 artifact download and app enablement |
| Install Tracking | Install counts and active installation tracking across all deployments |
| Decision Logging | Full audit trail of every review, approval, rejection, and install decision |
🔄 Promotion Pipeline
Apps are created in Dev/QA environments and promoted to production through a controlled pipeline.
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ QA / Dev │ │ (Staging) │ │ Production │
│ │ │ │ │ │
│ Build with AI ──▶│────▶│ (optional) ─────▶│────▶│ App live for │
│ Test & iterate │ │ │ │ your employees │
│ │ │ │ │ │
└──────────────────┘ └──────────────────┘ └──────────────────┘
App Builder Promote button Promote button
available here (no approval) (requires approval)
| Environment | Role |
|---|---|
| Dev / QA | Where apps are built and tested. App Builder is only available here. |
| Staging | Optional pre-production testing environment. Promoted from QA. |
| Production | Where your employees use the app. Promoted from Staging or QA; requires admin approval. App Builder is not available here. |
| Feature | Description |
|---|---|
| Environment Gating | App Builder is restricted to Dev/QA environments — apps cannot be created directly on production |
| Approval Gates | Production promotions require approval from an admin who didn’t initiate the promotion |
| Cross-Deployment Delivery | For separate QA and Production deployments (private cloud), promotion automatically delivers the app to the target environment via API |
| Environment-Aware Boot Loading | Production only loads apps that have been explicitly promoted — QA-only apps never leak into production |
| Rollback | Roll back to any previous deployed version in any environment |
| S3 Registry | Artifacts stored in shared S3 with deployment manifests and checksums |
| Notifications | Admin notifications when a promotion requires approval |
| Decision Log | Every promotion, approval, rejection, and rollback is logged |
🔙 Rollback & Recovery
Two-phase rollback with data impact reporting.
| Feature | Description |
|---|---|
| One-Click Rollback | Restore the previous version from the Plugin Manager or Health Dashboard |
| Version-Specific Rollback | Roll back to any specific version (not just the previous one) |
| Rollback Preview | Dry-run showing current version, target version, and data impact before executing |
| Data Impact Report | Queries audit logs to show all write actions between the bad deploy and rollback |
| Automatic Quarantine | The rolled-back version is quarantined (3+ failures = auto-quarantine) |
| ZIP Backup | Every deployed version has a ZIP backup stored via ActiveStorage for restoration |
🔔 Notifications
| Type | Description |
|---|---|
| Promotion Approval | Admins notified when a plugin promotion to production requires their approval |
| Gallery Review Approved | Publisher admins notified when their app is approved for the App Gallery |
| Gallery Changes Requested | Publisher admins notified with reviewer feedback when changes are needed |
| Gallery Rejected | Publisher admins notified when their app submission is not approved |
| Stream Events | Real-time streaming of all build progress, errors, and completions via ActionCable |
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, agent blocks |
| 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 |
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 (up to 10 files per record, 10 MB each)
- Email sending with ERB templates
- HTTP calls to external APIs with rate limiting
- 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 with PII auto-stripping
- Incoming webhooks with HMAC verification
- Plugin lifecycle hooks (on_install, on_activate, on_deactivate, on_uninstall, on_upgrade)
User Roles & Permissions
| Role | Capabilities |
|---|---|
| Admin | Full access to App Builder (in QA/Dev): create sessions, build apps, deploy, import, manage templates, generate API keys, access health dashboard, promote to production, submit to App Gallery |
| MangoApps Admin | Review App Gallery submissions at console.iq.mangoapps.com, approve/reject plugins, manage the public App Gallery |
| Employee | No access to App Builder (admin-only feature); uses deployed apps as enabled by admin |
Environment Gate: The App Builder is only available in Dev and QA environments. It is blocked on production — apps reach production exclusively through the promotion pipeline.
Feature Gate: Within Dev/QA, the App Builder requires enablement by a MangoApps system admin for each 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 | ✅ | ✅ | ✅ | ✅ |
| Three Build Targets (App/Widget/Agent) | ✅ | ❌ | ❌ | ❌ |
| Spec Refinement Phase | ✅ | ❌ | ❌ | ✅ |
| Pre-Built Templates (12 categories) | ✅ | ⚡ Limited | ⚡ Limited | ⚡ Limited |
| Platform-Fit Review (score/100) | ✅ | ❌ | ❌ | ❌ |
| Auto-Fix Verification Loop | ✅ (3 retries) | ❌ | ❌ | ✅ |
| Post-Deploy HTTP Verification | ✅ | ❌ | ❌ | ❌ |
| Platform Data Access (HR, Shifts, Leave) | ✅ (16+ APIs) | ❌ | ❌ | ❌ |
| Built-In Email & Scheduled Jobs | ✅ | ❌ | ❌ | ❌ |
| Security Scanning | ✅ | ❌ | ❌ | ❌ |
| Code Review & Scoring | ✅ | ❌ | ❌ | ❌ |
| AI Icon Generation | ✅ | ❌ | ❌ | ❌ |
| MCP API for External IDEs | ✅ | ❌ | ❌ | ❌ |
| Marketplace & Review Pipeline | ✅ | ❌ | ❌ | ❌ |
| Environment Promotion (QA→Staging→Prod) | ✅ | ❌ | ❌ | ❌ |
| Version Rollback with Data Impact | ✅ | ❌ | ❌ | ❌ |
| Plugin Health Dashboard | ✅ | ❌ | ❌ | ❌ |
| One-Click Deploy to Production | ✅ | ❌ (manual) | ✅ | ✅ |
| No Per-User Pricing | ✅ | 💰 $25/mo | 💰 $25/mo | 💰 $25-100/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 — Five automated quality checks including platform-fit review, security scanning, and post-deploy HTTP verification
- 🏪 Full Lifecycle — Build, deploy, monitor, promote, roll back, and share through a curated marketplace—all in one platform
- 💰 No Separate Cost — Included in the MangoApps platform, no per-user or per-build pricing
Getting Started
Step 1: Open the App Builder (in QA/Dev)
Navigate to Admin → Plugins → App Builder in your QA or Dev environment (the builder is not available on production).
Step 2: Choose Your Build Target
Select one of three build targets:
- Full App — Complete application with pages, data, and workflows
- Dashboard Widget — Data card for the home dashboard
- Ask AI Agent — Conversational agent for data access
Step 3: 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 4: Refine Requirements
The AI may ask clarifying questions about your requirements. Answer them to build a clear specification. Once confirmed, the AI transitions to build mode.
Step 5: Watch the AI Build
The AI streams its progress in real-time through multiple phases:
- 📖 Reading SDK docs and studying platform capabilities
- 📋 Planning architecture with platform-fit analysis
- 🔨 Writing files (plugin.rb first, then controllers, views, templates)
- ✅ Validating syntax, running security scans, reviewing code quality
- 🎯 Running platform-fit review (score out of 100)
Step 6: Review & Deploy (in QA)
- Browse files in the sidebar tree
- Click any file to open it in the code editor
- Click Deploy App to deploy in your QA environment
- The AI automatically verifies deployment and auto-fixes issues
- Test the app thoroughly in QA before promoting
Step 7: 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
Step 8: Promote to Production
- Navigate to Admin → Plugins → Promotion Pipeline
- Click Promote to Production on your app
- An admin who didn’t initiate the promotion approves it
- The app loads in production and is available to your employees
Step 9 (Optional): Submit to the App Gallery
- Navigate to Admin → Plugin Listings for your app
- Click Submit to App Gallery
- MangoApps admins review your app and approve or provide feedback
- Once approved, your app appears in the public App Gallery at
iq.mangoapps.com/pluginsfor other customers to install
For External Development
- Generate an API key from the App Builder’s Dev Tools modal
- Configure your IDE (Cursor, Claude Code, etc.) to use the MCP endpoint
- Build plugins with full platform context from your preferred editor
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” beats “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
- ✅ Choose the right build target — Use “Dashboard Widget” for home-screen cards and “Ask AI Agent” for conversational data access
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 platform-fit score — Address critical and high-severity findings before deploying
- ✅ Upload reference images — Share wireframes or screenshots to guide the AI’s design
After Deployment (in QA)
- ✅ Check verification results — The AI reports which pages passed and which failed
- ✅ Test thoroughly in QA — Verify the app works as expected before promoting to production
- ✅ Save as template — Click “Save as Template” to share reusable patterns with your organization
Promoting to Production
- ✅ Use the promotion pipeline — Don’t try to rebuild in production; promote from QA
- ✅ Monitor health after promotion — Use the Plugin Health Dashboard to track errors and performance
- ✅ Roll back if needed — The pipeline supports instant rollback to any previous version
Sharing via the App Gallery
- ✅ Submit for review — Only submit apps that are stable and well-tested in your own environment
- ✅ Respond to feedback — If MangoApps admins request changes, iterate in QA and resubmit
Frequently Asked Questions
Q: Why can’t I see the App Builder on my production environment?
A: By design, the App Builder is only available in Dev and QA environments. Apps are created and tested in QA, then promoted to production through the promotion pipeline. This ensures production apps have been properly tested and reviewed before going live.
Q: What are the three things I can build?
A: Full applications (with pages, data storage, and workflows), dashboard widgets (data cards for the home screen), and Ask AI agents (conversational agents that answer questions from your plugin’s data). Select your build target on the welcome screen before starting.
Q: How do I get my app to production?
A: After building and testing in QA, use the Promotion Pipeline (Admin → Plugins → Promotion Pipeline). Click “Promote to Production” — an admin who didn’t initiate the promotion must approve it. For deployments with separate QA and Production environments, the app is automatically delivered to production via API.
Q: What happens if the AI-generated code has errors?
A: The builder runs five automated quality gates: syntax validation, security scanning, code review, platform-fit review (scored out of 100), and post-deploy HTTP verification. If errors are found at any stage, the auto-fix loop feeds them back to the AI for up to 3 fix attempts. Validation errors are caught before deployment ever happens.
Q: Can I edit the code manually?
A: Yes. The file tree sidebar lets you browse all files, and the code editor drawer provides syntax-highlighted editing. You can also download the full source as a ZIP for editing in an external IDE, or generate an MCP API key to build and modify plugins from Cursor or Claude Code.
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, shift assignments, and more. All queries are automatically business-scoped.
Q: How do I share my app with other customers?
A: From your app’s listing page, click “Submit to App Gallery.” Your app is sent to MangoApps admins at the central review hub (console.iq.mangoapps.com). They review it against a 7-point quality checklist. If approved, it appears in the public App Gallery at iq.mangoapps.com/plugins for other customers to browse and install. You receive a notification when the review is complete.
Q: How do I roll back a broken plugin?
A: From the Plugin Manager or Health Dashboard, click “Rollback” to restore the previous version. You can also roll back to any specific version. The system shows a data impact report before executing and automatically quarantines the broken version.
Q: Does the App Gallery work for private cloud customers?
A: Yes. Private cloud deployments communicate with the central gallery via API. When you submit to the gallery, your listing and S3 artifact are sent to the central system. When other customers install your app, they download the artifact from the shared S3 registry. Review decision callbacks are delivered back to your deployment automatically.
Related Resources
- Apps & Extensions Overview — Complete marketplace app catalog
- Workforce Bots Overview — AI Q&A bots and document analysis tools
Build in QA. Test it. Promote to production. Share it in the App Gallery. Your custom app — from idea to enterprise-ready — in minutes.