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:
| Piece | What it does | How it helps |
|---|---|---|
| MCP Server | Connects your editor directly to your Noma project | The agent can create collections, add fields, manage entries, and upload assets without the dashboard |
| Agent Skills | Gives the agent deep knowledge of Noma patterns | The agent knows the SDK API, auth contracts, error handling, and framework best practices before you ask |
| JS SDK | Integrates your frontend with the Noma API | Clean, 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-serverThe 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-auth3. Install the SDK
npm install @nomacms/js-sdkAdd your credentials to .env.local:
NOMA_PROJECT_ID=your-project-uuid
NOMA_API_KEY=your-api-keyThat'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:
- Call
create_collectionwith the fields defined inline - Call
create_entrya few times with sample content - 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:
- Create a
lib/noma.tsclient setup file - Build a
/blogpage that callsnoma.content.list("blog-posts") - Build a
/blog/[slug]route that resolves the slug (for example viacontent.listwith awherefilter on your slug field) and loads the entry withnoma.content.get("blog-posts", entryUuid) - 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.