Noma

AI Code Editors

AI Code Editors

Noma is built for developers who work with AI. If you use Cursor, Claude Code, Windsurf, or any MCP-compatible editor, you can build content-driven applications entirely through conversation, from designing your content schema to shipping a production frontend.

This page shows how the three pieces fit together and how to set them up.

The AI-native workflow

Noma gives your AI coding agent three things:

PieceWhat it doesHow it helps
MCP ServerConnects your editor directly to your Noma projectThe agent can create collections, add fields, manage entries, and upload assets without the dashboard
Agent SkillsGives the agent deep knowledge of Noma patternsThe agent knows the SDK API, auth contracts, error handling, and framework best practices before you ask
JS SDKIntegrates your frontend with the Noma APIClean, typed client for fetching and managing content at runtime

Instead of reading docs, copying snippets, and wiring things up manually, you describe what you want and your agent handles the rest. It uses the MCP server to set up your CMS and the SDK to fetch and manage content.

Setup

You need two credentials from your Noma project:

  • API Key from User Settings → API Keys. Give it all abilities (read, create, update, delete, admin).
  • Project ID from the project home page or Project Settings → API Access.

1. Add the MCP server

This connects your AI editor to your Noma project. The agent will be able to manage your CMS directly.

Cursor - Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "nomacms": {
      "command": "npx",
      "args": ["-y", "@nomacms/mcp-server"],
      "env": {
        "NOMA_API_KEY": "your-api-key",
        "NOMA_PROJECT_ID": "your-project-uuid"
      }
    }
  }
}

Claude Code - Run in your terminal:

claude mcp add nomacms \
  -e NOMA_API_KEY=your-api-key \
  -e NOMA_PROJECT_ID=your-project-uuid \
  -- npx -y @nomacms/mcp-server

The MCP server exposes 33 tools covering project info, collections, fields, content entries, assets, and webhooks. Your agent discovers these automatically.

2. Install agent skills

Agent skills teach your AI assistant the Noma SDK patterns, auth implementation contracts, and framework-specific best practices. Without them, the agent would need to figure these out from scratch every time.

npx skills add nomacms/nomacms-agent-skills --skill '*'

This installs all 13 skills. If you prefer to pick only what you need:

# Every project should have these
npx skills add nomacms/nomacms-agent-skills \
  --skill noma-sdk-setup \
  --skill noma-content \
  --skill noma-errors
 
# Add framework-specific skills
npx skills add nomacms/nomacms-agent-skills --skill noma-nextjs
 
# Add auth skills if your app has user accounts
npx skills add nomacms/nomacms-agent-skills \
  --skill noma-user-auth \
  --skill noma-auth-contract \
  --skill noma-nextjs-auth

3. Install the SDK

npm install @nomacms/js-sdk

Add your credentials to .env.local:

NOMA_PROJECT_ID=your-project-uuid
NOMA_API_KEY=your-api-key

That's the entire setup. Your AI editor now has full access to your CMS and knows how to write code against it.

Example: Build a blog in 5 minutes

Here's what building with Noma + AI looks like in practice. Open your editor and start a conversation:

You: "Create a blog posts collection with title, slug, content, excerpt, and featured image fields. Add some sample posts and publish them."

Your agent uses the MCP server to:

  1. Call create_collection with the fields defined inline
  2. Call create_entry a few times with sample content
  3. Publish the entries using the built-in state system

You: "Now build me a Next.js blog page that lists all posts and a dynamic post detail page."

Your agent uses its SDK knowledge (from the skills) to:

  1. Create a lib/noma.ts client setup file
  2. Build a /blog page that calls noma.content.list("blog-posts")
  3. Build a /blog/[slug] route that resolves the slug (for example via content.list with a where filter on your slug field) and loads the entry with noma.content.get("blog-posts", entryUuid)
  4. Style everything with your existing design system

The content is live. No manual API wiring, no copy-pasting from docs, no debugging auth headers.

What the agent can do

With the MCP server connected, your agent can:

  • Design schemas - Create collections and add fields through conversation. Describe your content model and the agent builds it.
  • Manage content - Create, update, and delete entries. Seed sample data. Bulk import content.
  • Upload assets - Upload local files as assets directly from your project directory.
  • Set up webhooks - Configure webhook endpoints for content change notifications.
  • Configure locales - Add project locales and manage multilingual content.
  • Query content - Test filters, pagination, and sorting before writing frontend code.

With agent skills installed, your agent also knows:

  • How to set up the SDK client correctly with environment variables
  • The difference between singleton and list collection responses
  • How to handle errors with proper try/catch patterns
  • How to implement project auth (sign up, sign in, sessions, token refresh)
  • Framework-specific patterns for Next.js, Nuxt, and Astro (SSR, SSG, ISR)

Multiple projects

If you work with multiple Noma projects, add separate MCP server entries:

{
  "mcpServers": {
    "nomacms-marketing": {
      "command": "npx",
      "args": ["-y", "@nomacms/mcp-server"],
      "env": {
        "NOMA_API_KEY": "marketing-api-key",
        "NOMA_PROJECT_ID": "marketing-project-uuid"
      }
    },
    "nomacms-docs": {
      "command": "npx",
      "args": ["-y", "@nomacms/mcp-server"],
      "env": {
        "NOMA_API_KEY": "docs-api-key",
        "NOMA_PROJECT_ID": "docs-project-uuid"
      }
    }
  }
}

What's next

  • MCP Server - Full reference for all 33 MCP tools and 3 resources.
  • Agent Skills - Detailed list of all 13 skills and when to use each one.
  • JavaScript SDK - Complete SDK documentation for the code your agent writes.
  • Framework Guides - Step-by-step integration guides for Next.js, Nuxt, and Astro.

Search documentation

Find guides and reference pages