Headless Mode (BaaS)

Momen is engineered with a strictly decoupled frontend and backend architecture. Both layers operate independently, enabling developers to visually orchestrate their entire application stack directly within the platform.

Furthermore, Momen’s Connect Backend capability exposes this robust visual backend, facilitating a true Headless architecture. Developers can bypass Momen’s native frontend and utilize the platform exclusively as a Backend-as-a-Service (BaaS). This allows for seamless integration with any external frontend framework (e.g., React, Vue, Next.js), completely eliminating the need for manual backend development or API route configuration.

When pairing Momen BaaS with modern AI coding assistants like Cursor, Windsurf, CodeX, or Opencode, developers unlock the paradigm of Vibe Coding. By providing natural language prompts, the AI can dynamically introspect Momen’s auto-generated GraphQL APIs to construct complete frontend interfaces and interaction logic, drastically accelerating your project’s time-to-market.

Why Choose Momen BaaS + AI?

When using AI coding assistants for full-stack development, developers typically face two choices: either instruct the AI to write the backend code from scratch, or integrate various BaaS products (like Supabase, Xano, etc.). However, these approaches often lead to significant challenges:

API Hallucinations and Integration Challenges: If the AI attempts to write the backend or guess external API structures, the separation of frontend and backend contexts easily causes the AI to hallucinate APIs (e.g., fabricating non-existent API routes or field names). Resolving these integration errors significantly increases debugging time.
Infrastructure Development Overhead: Combining different BaaS products often requires manually handling various infrastructural tasks in the frontend. For instance, integrating complex business workflows or large language models (LLMs) requires managing complex authentication logic, integrating various LLM SDKs, handling context storage, parsing Server-Sent Events (SSE), and other time-consuming processes.

How Momen Headless Mode Solves This

To address these pain points, Momen offers a targeted solution:

Visual Backend & API Introspection: Momen provides a complete, out-of-the-box hosted backend (covering databases, permission systems, Actionflow engine, and API integration). Powered by Momen’s dedicated MCP (Model Context Protocol) and Skill configurations, the AI can accurately analyze your real backend structure through “API introspection.” Because the AI understands the actual interfaces, it fundamentally eliminates API hallucinations, vastly improving the success rate during initial integration.
Unified AI Agent Integration: Momen handles the complex infrastructure on the backend. The business logic and AI Agents you visually build in the Momen editor are automatically transformed into standardized GraphQL interfaces. You no longer need to import heavyweight LLM SDKs in the frontend; a simple API call is sufficient to implement advanced AI applications featuring streaming outputs and reasoning process displays, significantly reducing frontend complexity.

Standard Full-Stack Development Workflow

We recommend following these four steps to combine Momen’s backend capabilities with AI’s frontend generation capabilities:

💡 Adopting a “Backend-First” approach is highly recommended for maximizing AI-assisted development efficiency.

Step 1: Build Backend Logic in Momen

Begin by configuring your application’s logic within the Momen visual editor:

Data Model: Design database tables and relations. (You can leverage the built-in AI Copilot for assistance).
Actionflow: Orchestrate complex business logic.
AI Agent: Configure your LLM Prompts, knowledge bases, and tools.
Third-Party API Integration: Connect external APIs as data sources or callable actions.

Momen automatically generates the corresponding standard GraphQL APIs based on your configuration.

Step 2: Retrieve and Test Backend APIs

Locate and click the Connect Backend button in the top navigation bar to access the following credentials:

HTTP Endpoint: The GraphQL interface used for regular data queries and mutations.
WebSocket Endpoint: The subscription interface used for real-time data push.
Admin Token: The high-privilege identity token used during local development.

To verify your backend APIs, Momen provides a built-in GraphiQL panel within the “Connect Backend” modal. This allows for immediate visual API debugging and testing without additional configuration.

(Note: With these credentials, you can utilize any frontend framework (e.g., React, Vue) to execute standard GraphQL requests for independent development. Proceed to the next step to integrate AI coding assistants.)

Step 3: Configure AI Tools for Backend Introspection

To enable your AI assistant to comprehend Momen’s API protocols, complete the following two configurations to enable Schema Introspection:

1. Configure the MCP Protocol
Navigate to the MCP tab in the “Connect Backend” modal, copy the provided JSON configuration, and add it to the MCP configuration file of Cursor (or your preferred MCP-supported editor). This provides the AI with the ability to query and understand the Momen project context.


{
  "mcpServers": {
    "momen": {
      "command": "npx",
      "args": ["-y", "momen-mcp"]
    }
  }
}

The initial connection will trigger an OAuth authentication flow. Upon success, the tool will retrieve your Momen project list and Project ID.

2. Install the Skill via AI Chat
You can instruct your AI coding assistant (e.g., Cursor, Windsurf) to install the necessary development rules directly from the official repository via its chat interface. Paste the following prompt into your AI chat window:


Please install the development skill from the following repository:
https://github.com/momen-tech-org/momen-baas-skill

Once installed, the Momen backend development specifications are injected into the AI assistant’s context, requiring no further manual setup.

Step 4: Rapid Frontend Generation

With the setup complete, you can now issue natural language instructions to your AI assistant. The AI will automatically explore Momen’s latest backend structure, streamlining the development process.

Standard Initialization Prompt:


I am using Momen as the backend tech stack for my project, and my projectExId is <your_projectExId>.

Please use API introspection to automatically read and analyze my current backend GraphQL structure.
Then, help me write the frontend code to build a blog system, including:
1. Article list page (sorted by creation time descending, only showing published articles)
2. Article detail page (content + comment list)
3. Post a comment feature (requires login)

Advanced Scenarios & AI Execution Mechanisms:

For complex backend operations, you can continue using natural language instructions. The AI will automatically leverage Momen’s underlying mechanisms to implement the required functionality:

Integrate AI Agent

Your Prompt: "I have configured an AI Agent named 'Image Analyzer' in the backend. Please help me write a page that streams the AI Agent's analysis results after the user uploads an image."

AI Execution Mechanism: The AI automatically constructs the fz_zai_create_conversation mutation to initialize a session and uses WebSocket subscriptions to handle the streaming text or reasoning display transitioning from IN_PROGRESS -> STREAMING -> COMPLETED.

Trigger Actionflow

Your Prompt: "I have created and published a 'Create Order' Actionflow in the backend. Please make an order form in the frontend that asynchronously triggers this Actionflow upon clicking and displays the returned results in real-time."

AI Execution Mechanism: The AI identifies the corresponding Actionflow parameter structure in your backend, constructs the fz_create_action_flow_task mutation, and listens to the asynchronous task results in real-time via the fz_listen_action_flow_result subscription.

File Upload

Your Prompt: "I need to implement an image upload feature. After a successful upload, save the returned image ID to the cover_image_id field in the post table."

AI Execution Mechanism: The AI generates the file MD5 calculation logic, calls the imagePresignedUrl API to obtain upload credentials, executes an HTTP PUT request for the binary stream upload, and associates the retrieved image ID with your database table record.

🔄

Handling Backend Modifications During Development

If you modify the backend (e.g., adding a table or modifying an Actionflow) during the frontend development phase:

Apply the modifications directly in the Momen editor, then click Sync Changes.
Instruct the AI in your development tool: "I have updated the backend to include [Feature/Field]. Please re-read the backend schema and update the frontend logic accordingly." The AI will fetch the latest schema and apply the necessary updates.

Quick Troubleshooting

Handling Runtime Errors
As the code is AI-generated, logical discrepancies may occur. If you encounter an error, open your browser’s Developer Tools (F12), copy the complete error stack trace from the Console, and provide it to the AI assistant for automated debugging and resolution.
Targeting Specific Backend APIs
If you need the AI to connect accurately to a specific API, open the Connect Backend modal and launch the GraphiQL panel. Search for the required API, copy its execution as a cURL command, and provide it to the AI assistant as a reference.

🚀

Best Practice: Adopt a “Backend-First” Workflow

Always finalize your data models and business logic in the Momen editor before instructing the AI to generate the frontend. This structured approach significantly enhances overall development efficiency.