Complete Cursor + ElmapiCMS setup guide: connect MCP server, configure credentials, build collections with AI, and generate production-ready frontend integration code.

If you use Cursor daily, integrating your CMS directly into your editor is one of the biggest workflow upgrades you can make.

This guide shows how to connect ElmapiCMS to Cursor, set up MCP, and use practical prompt patterns to create collections, generate content, and scaffold frontend code faster.

What You Will Build
Prerequisites
Step 1: Install the ElmapiCMS MCP Server
Step 2: Get API Credentials from ElmapiCMS
Step 3: Configure Cursor MCP
Step 4: Verify Tool Access in Cursor
Step 5: Create a CMS Schema with Prompts
Step 6: Generate Sample Entries
Step 7: Build Frontend Integration
Prompt Templates You Can Reuse
Common Mistakes and Fixes
Conclusion

What You Will Build

By the end of this guide, you will have:

Cursor connected to ElmapiCMS via MCP
A blog schema (posts, authors, categories)
Sample entries generated with AI
A reusable frontend integration pattern (typed mappers + server-side fetch layer)

This is the same workflow you can reuse for docs sites, landing pages, catalogs, and client projects.

Prerequisites

Node.js 18+
A running ElmapiCMS instance (local, staging, or production)
Cursor installed and updated
API access in your ElmapiCMS project

If you have not set up ElmapiCMS yet, start with:

Step 1: Install the ElmapiCMS MCP Server

Install the official package:

npm install -g @elmapicms/mcp-server

This server exposes tools for collections, fields, entries, and assets so Cursor can interact with your CMS directly.

Step 2: Get API Credentials from ElmapiCMS

In your project:

Go to Settings → API Access
Copy Content API Endpoint (for example https://your-domain.com/api)
Copy Project ID
Create a token with the abilities you need (read, create, update, delete, admin)

Store these values securely. You will use them in Cursor MCP config.

Step 3: Configure Cursor MCP

Edit ~/.cursor/mcp.json and add:

{
  "mcpServers": {
    "elmapicms": {
      "command": "npx",
      "args": ["@elmapicms/mcp-server"],
      "env": {
        "ELMAPI_API_URL": "https://your-domain.com/api",
        "ELMAPI_API_KEY": "your-api-key",
        "ELMAPI_PROJECT_ID": "your-project-uuid"
      }
    }
  }
}

Open Cursor settings and verify the MCP server shows as healthy.

Step 4: Verify Tool Access in Cursor

Test with small prompts:

"List all collections in my ElmapiCMS project."
"Get project info and locales."
"Show me available fields in the posts collection."

If this works, you are connected correctly.

Step 5: Create a CMS Schema with Prompts

Use one prompt for the first pass:

Create these collections in ElmapiCMS:
1) posts: title (required text), slug (required, unique), excerpt (long text), content (richtext), featured_image (media), published_at (date), author (relation to authors), category (relation to categories)
2) authors: name (required text), slug (required, unique), bio (long text), avatar (media)
3) categories: name (required text), slug (required, unique), description (long text)
Then list collections and field summaries for verification.

After generation, ask for a schema review:

Review the schema and suggest improvements for API stability and frontend safety.

Step 6: Generate Sample Entries

Create content data so frontend teams can ship immediately:

Create 3 categories, 2 authors, and 8 published posts.
Posts should include realistic titles, excerpts, and content.
Distribute posts across categories and authors.

Then verify with filters:

List posts where title contains "AI", sorted by published_at descending.

Step 7: Build Frontend Integration

Now switch from CMS operations to frontend code generation:

Create a TypeScript integration layer for ElmapiCMS:
- cmsClient utility
- getPosts()
- getPostBySlug(slug)
- typed mappers that normalize nullable fields
- safe defaults for missing data
Use server-side patterns only.

Recommended architecture:

src/lib/cms/client.ts for client setup
src/lib/cms/mappers.ts for raw->domain mapping
src/lib/cms/queries.ts for reusable query helpers
route/page code only consumes typed domain models

This keeps AI-generated code safer during refactors.

Prompt Templates You Can Reuse

New collection prompt

Create a collection "<name>" with fields: <field list>.
Apply validation rules and output a concise field summary.

Migration prompt

Update the "<collection>" schema:
- add field <x>
- deprecate field <y> (keep backward compatibility)
- keep API consumers safe
Then suggest frontend mapper changes.

Frontend generation prompt

Generate server-side query helpers and typed mappers for collection "<name>".
No raw API shapes in UI components.
Add guards and defaults for nullable fields.

Common Mistakes and Fixes

1) Client-side token exposure

Keep CMS credentials in server code only. Do not access private API keys in client components.

2) Raw API object usage in UI

Always map API responses to domain types first.

3) Prompt drift across teammates

Use shared prompt templates so output patterns stay consistent.

4) No schema review step

Always ask Cursor to summarize and validate schema after creation.

Conclusion

Cursor + ElmapiCMS is strongest when you treat AI as a workflow engine, not just a code generator.

Use MCP to create schema and entries quickly, then keep frontend integrations typed and normalized. That combination gives speed without sacrificing maintainability.

How to Use Cursor AI with ElmapiCMS: Complete Setup Guide

Table of Contents