Momen + Claude Code：完整配置指南（一步步教你）
本教程将带您逐步完成 Momen 与 Claude Code 的完整集成——从一个空白项目开始，通过对话构建可视化 Postgres 后端，并让 React + Vite 前端接入实时 GraphQL API，全程无需编写任何后端代码。每条命令均可直接复制粘贴使用。
前提条件
- 已安装并运行 Claude Code（任意较新版本）
- Node.js 18+（运行 npx momen-mcp 所需）
- Momen 账户（免费版即可开始）
为什么优先构建后端
本指南中“先后端、再前端”的顺序并非随意安排。它遵循 GraphQL 内省机制的工作方式：当您同步一个 Momen 后端时，它会生成一个带类型的 GraphQL API，并暴露完整的 schema 供内省——包括每一张表、字段类型、关联关系以及 Actionflow。插件会在您第一次处理前端提示词之前读取这个 schema，因此它编写的每一个查询引用的都是实际存在的字段。
如果没有同步的后端，就没有 schema 可读。智能体只能根据您的描述凭空虚构一个 schema——而虚构的 schema 会逐渐偏离现实：字段名猜错、关联关系假设错误。前端代码虽然能编译通过，但一旦调用真实 API 就会失败。按顺序执行意味着一次性完成：构建 schema、读取 schema、基于 schema 生成代码。
第一步：安装 Momen 插件
Momen 插件捆绑了以下组件：
- momen-platform Skill：教会 Claude Code 如何操作 Momen
- momen-mcp CLI：执行层
- SessionStart 钩子：在每次会话前验证连接
选项 A：CLI —— 在 Claude Code 会话中执行（推荐）
/plugin marketplace add momen-tech-org/momen-nocode-plugin
这条命令会将 Momen GitHub 仓库注册为插件市场。然后执行：
/plugin install momen-nocode@momen
在当前会话中激活插件：
/reload-plugins
确认插件已安装：
/plugins
您应该在插件列表中看到 momen-nocode。
选项 B：图形界面 — 聊天面板
在 Claude Code 聊天窗口中，输入 /plugins
选择 Manage plugins
打开 Marketplaces 标签 → 输入 momen-tech-org/momen-nocode-plugin → 确认
切换到 Plugins 标签 → 找到 momen-nocode → 点击 Install
选项 C：图形界面 — Claude Code 桌面应用
在侧边栏打开 Customize
进入 Connectors → Web → Github
点击 Add → Upload plugin
粘贴以下地址：
https://github.com/momen-tech-org/momen-nocode-plugin
第二步：身份验证
这一步将 momen-mcp 命令行工具连接到你的 Momen 账户。
只需运行一次——认证信息会保存在本地，后续每次会话都会由 SessionStart 钩子自动复用。
npx -y momen-mcp@latest login
跟随浏览器提示完成授权。授权成功后，终端会显示连接确认信息。
第三步：创建 Momen 项目
前往 momen.app 创建一个新项目。项目在编辑器中打开后，从浏览器地址栏复制项目 URL：
https://editor.momen.app/tool/YOUR_PROJECT_ID/WEB
这个 URL 用于标识你的项目。在后续所有后端构建的提示词中，你都需要带上它，插件才知道该操作哪个项目。
第四步：构建你的后端
启动一个新的 Claude Code 会话。SessionStart 钩子会自动运行——它会验证 Momen 连接、检查插件版本，并加载 momen-platform 技能。在输入第一条提示之前，你会看到会话输出中有一行确认信息。
然后，描述你想构建的内容：
使用 momen-nocode 插件来构建 [你的应用描述 —— 用户做什么、需要存储什么数据、有哪些业务逻辑] 的后端。
Momen + Claude Code：完整配置指南（一步步来）
我的 Momen 项目：https://editor.momen.app/tool/YOUR_PROJECT_ID/WEB
Claude Code 通过 Skill 调用 Momen 的 API — 创建数据表、配置关联关系、设置认证、添加用于服务端逻辑的 Actionflow，以及触发后端同步。最终结果不是生成一堆代码文件，而是在 Momen 中生成一个可视化的实时后端：数据模型编辑器中会出现表和字段、流程构建器中会出现 Actionflow、一个带类型的 GraphQL API 准备好被查询。你随时可以打开 Momen 看看 agent 构建了什么，或者手动调整。
第 5 步：构建 React + Vite 前端
在同一个会话中继续操作：
基于你刚创建的 Momen 后端构建一个 React + Vite 前端。Claude Code 会读取完整的 schema — 每张表、每个字段、每个关联和每个 Actionflow — 然后搭起一个 React + Vite 应用，连接到线上的 Momen GraphQL API。认证、CRUD 操作以及任何 Actionflow 调用都会挂接到真实的接口上。
如果你想看这个工作流在真实项目中的应用案例，可以看看这几篇：
- 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
- Build a Vector Search Cocktail Picker with Claude Code and Momen BaaS
本指南带你走完完整的 Momen + Claude Code 集成流程 — 从一个空白项目开始，通过对话构建出一个可视化的 Postgres 后端，然后搭起一个连接到实时 GraphQL API 的 React + Vite 前端，全程不需要写任何后端代码。每条命令都准备好可以直接复制粘贴。
前置条件
- 已安装并运行 Claude Code（任意较新版本）
- Node.js 18+（用于
npx momen-mcp） - 一个 Momen 账户（免费版足够起步）