DEV Community

Momen profile image Cici Yu
Cici Yu for Momen

Posted on

Momen + Claude Code: The Complete Setup Guide (Step by Step)

#momen #claude #code #setup

This guide walks you through the full Momen + Claude Code 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 is copy-paste ready.

Prerequisites

  • Claude Code installed and running (any recent version)
  • Node.js 18+ (required for npx momen-mcp)
  • A Momen account (free tier is sufficient to start)

Why Backend First

The order in this guide — backend first, then frontend — isn't arbitrary. It follows from how GraphQL introspection works.

When you sync a Momen backend, it generates a typed GraphQL API that exposes your full schema for introspection: every table, field type, relation, and Actionflow. The Plugin reads this schema before your first frontend prompt, so every query it writes references fields that actually exist.

Without a synced backend, there's no schema to read. The agent has to invent one from your description — and invented schemas drift from reality. Field names get guessed wrong. Relations get assumed incorrectly. The frontend code compiles, but fails when it hits the real API.

Doing it in order means doing it once: build the schema, read the schema, generate against the schema.

Step 1: Install the Momen Plugin

The Momen Plugin bundles the momen-platform Skill (which teaches Claude Code how to operate Momen), the momen-mcp CLI (the execution layer), and a SessionStart hook that verifies the connection before every session.

Option A: CLI — inside a Claude Code session (Recommended) 

/plugin marketplace add momen-tech-org/momen-nocode-plugin
Enter fullscreen mode Exit fullscreen mode

This registers the Momen GitHub repository as a plugin marketplace. Then:

/plugin install momen-nocode@momen
Enter fullscreen mode Exit fullscreen mode

Activate in the current session:

/reload-plugins
Enter fullscreen mode Exit fullscreen mode

Confirm it's installed:

/plugins
Enter fullscreen mode Exit fullscreen mode

You should see momen-nocode in the plugin list.

Option B: GUI — chat panel

  • In a Claude Code chat, type /plugins
  • Select Manage plugins
  • Open the Marketplaces tab → enter momen-tech-org/momen-nocode-plugin → confirm
  • Switch to the Plugins tab → find momen-nocode → click Install

Option C: GUI — Claude Code desktop app

Step 2: Authenticate

This connects the momen-mcp CLI to your Momen account. Run it once — credentials are stored locally and reused by the SessionStart hook on every future session.

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

Follow the browser prompt to authorize. When it completes, the terminal confirms the connection.

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

This URL identifies your project. You'll include it in every backend-building prompt so the Plugin knows where to operate.

Step 4: Build Your Backend

Open a new Claude Code session. The SessionStart hook runs automatically — it verifies the Momen connection, checks the Plugin version, and loads the momen-platform Skill. You'll see a confirmation line in the session output before your first prompt.

Now describe what you want to build:

Use the momen-nocode plugin 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

Claude Code uses the Skill to call Momen's APIs — creating tables, configuring relations, setting up auth, adding Actionflows for server-side logic, and triggering a backend sync. The result isn't generated 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 Momen 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

Claude Code reads the full schema — every table, field, relation, and Actionflow — and scaffolds a React + Vite app wired to the live Momen GraphQL API. Auth, CRUD operations, and any Actionflow calls are all wired to real endpoints.

For examples of this workflow applied to real projects, see From Hackathon Challenge to Auditable AI Research — Claude Code + Momen, How I Built a Legal Intake and Triage App with Claude Code and Momen Backend, and Build a Vector Search Cocktail Picker with Claude Code and Momen BaaS.

Top comments (0)