DEV Community

Cici Yu for Momen

Posted on

Momen + Cursor: The Complete Setup Guide (Step by Step)

This guide walks you through the full Momen + Cursor integration — from a blank project to a visual Postgres backend built through conversation and a React + Vite frontend wired to the live GraphQL API, without writing any backend code. Every command and config block is copy-paste ready. The guide also includes a .cursor/rules entry that keeps generated queries aligned with the real schema in every future session.

Prerequisites

  • Cursor installed (any recent version; 2.5+ for team marketplace features)
  • Node.js 18+ (required for npx momen-mcp)
  • A Momen account (free tier is sufficient to start)

How Cursor Connects to Momen

Cursor connects via MCP (Model Context Protocol) rather than the same Plugin format used by Claude Code and Codex. The underlying execution layer is the same — momen-mcp — but the installation path is different.

  • For most individual users: MCP configuration via .cursor/mcp.json (the primary path, covered in this guide)
  • For team/org setups on Cursor 2.5+: Plugin install via admin marketplace or local repo (covered in the appendix)

Why Backend First

The Momen MCP connection gives Cursor access to your backend schema via GraphQL introspection — but only after the backend has been synced. Sync is what triggers Momen to generate the typed GraphQL API; before it runs, there's nothing for momen-mcp to read.

This is why the guide builds the backend before the frontend. Once the backend is synced, Cursor queries the schema and gets the complete picture: every table, every field type, every relation, every available Actionflow. The frontend code it generates from that point references real structure, not inferred structure.

The .cursor/rules tip later in this guide reinforces the same principle: make sure Cursor reads the schema before it writes code, every session.

Step 1: Set Up the MCP Connection

Option A: MCP configuration file (Recommended)

Create or edit .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "momen": {
      "command": "npx",
      "args": ["-y", "momen-mcp@latest", "mcp"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Restart Cursor. The Momen MCP server starts automatically when you open the project. For global config that applies to all projects, add the same entry to ~/.cursor/mcp.json.

Option B: GUI — Cursor Settings

You can also type /add-plugin in the Cursor chat panel to open the plugin installer.

Step 2: Authenticate

This connects momen-mcp to your Momen account. Run it once in your terminal — credentials are stored locally and reused across sessions.

npx -y momen-mcp@latest login
Enter fullscreen mode Exit fullscreen mode

Follow the browser prompt to authorize.

Step 3: Create a Momen Project

Go to momen.app and create a new project. Once the project opens in the editor, copy the URL from your browser:

https://editor.momen.app/tool/YOUR_PROJECT_ID/WEB
Enter fullscreen mode Exit fullscreen mode

Include this URL in your backend-building prompts so Cursor knows which project to operate on.

Step 4: Build Your Backend

Open Cursor and start a new session. With the MCP connection active, tell Cursor what to build:

Use the momen MCP tools to build the backend for [describe your app — what users do, what needs to be stored, what business logic matters].
My Momen project: https://editor.momen.app/tool/YOUR_PROJECT_ID/WEB
Enter fullscreen mode Exit fullscreen mode

Cursor calls Momen's APIs via momen-mcp — creating tables, configuring relations, setting up auth, adding Actionflows for server-side logic, and triggering a backend sync. The result isn't code files. It's a live visual backend in Momen: tables and fields in the data model editor, Actionflows in the flow builder, a typed GraphQL API ready to query. Open the Momen editor at any point to see what the agent built or make adjustments.

Step 5: Build the React + Vite Frontend

Continue in the same session:

Build a React + Vite frontend based on the Momen backend you just created.
Enter fullscreen mode Exit fullscreen mode

Cursor reads the full schema and scaffolds a React + Vite app wired to the live Momen GraphQL API.

Tip: For ongoing development beyond this first session, add .cursor/rules/backend.mdc to your project so Cursor always introspects the schema automatically when editing TypeScript files — without you having to ask each time:

---
description: "Backend query conventions"
globs: ["src/**/*.ts", "src/**/*.tsx"]
---

Always introspect the Momen GraphQL schema before writing any query or mutation.
Use only field names that appear in the schema. Never invent endpoint paths.
All mutations go through Actionflow calls, not direct table writes.
Enter fullscreen mode Exit fullscreen mode

For a complete example of this workflow applied to a real project, see Bay Canopy: A Tree Removal Estimate App Built with Momen and Cursor.

Appendix: Team Marketplace (Cursor 2.5+)

For organizations on Cursor 2.5+, an admin can add the Momen Plugin as a team marketplace source:

This path gives teams the Plugin bundle (including the Skill layer) rather than the bare MCP config, which means Cursor gets explicit guidance on how to use the Momen schema correctly — not just access to it.

Top comments (0)