Using ElmapiCMS with Lovable: Connect Your Headless CMS to AI-Generated UIs

Lovable lets you describe an app in chat and get a working UI in minutes. By default it uses mock data or built-in backends. If you want real content from a headless CMS you control, ElmapiCMS fits in as a custom API: you point Lovable at your ElmapiCMS Content API, set the right headers, and describe how to list and filter entries.

This guide walks you through getting ElmapiCMS credentials, understanding the correct API shape (from the official docs), and wiring Lovable to fetch blog posts and single posts by slug.

Table of Contents

• Prerequisites
• Step 1: Get ElmapiCMS Credentials
• Step 2: How the ElmapiCMS Content API Works
• Step 3: Add ElmapiCMS as a Custom API in Lovable
• Step 4: Describe the API to Lovable
• Step 5: Example Prompts to Build Screens
• Tips and Gotchas
• Next Steps

Prerequisites

• A Lovable account and a new or existing project.
• A running ElmapiCMS instance. You can use the demo to try things, or your own install (installation).
• A project in ElmapiCMS with at least one collection (e.g. “Posts”) and a few entries so you have real data to show. If you need to create a project and collection, see the getting started and collections docs.

Step 1: Get ElmapiCMS Credentials

ElmapiCMS uses project-scoped API access. Every request must include the project and, for private APIs, a token. You get these from the project’s API Access settings.

Where to find them

1. Log in to your ElmapiCMS admin and open the project that has your content (e.g. your blog project).
2. Go to Settings → API Access (see API Access in the docs).
3. On that page you’ll see:
   • Content API Endpoint – The base URL for all API calls, usually https://your-domain.com/api. Copy this; Lovable will use it as the base URL.
   • Project ID – A UUID that identifies this project. Every request must send it in the project-id header.
4. If the project’s API is private (Public API is OFF), you need an access token:
   • Click Create Token.
   • Give it a name (e.g. “Lovable”) and tick the read ability.
   • Copy the token immediately; it won’t be shown again. Store it in your password manager or env.

What you’ll use in Lovable

• Base URL = Content API Endpoint (e.g. https://cms.example.com/api).
• Headers = Accept: application/json, project-id (your project ID), and for private APIs: Authorization: Bearer followed by your token.

If your project has Public API enabled, you only need the project-id header for GET requests; you can omit the Authorization header. For clarity this guide assumes a private API and a token.

Step 2: How the ElmapiCMS Content API Works

The ElmapiCMS Content API is collection-based. The path is the collection slug (e.g. posts or blog-posts). Base URL + path + query = full URL.

Base URL and headers

• Base URL: The Content API Endpoint you copied (e.g. https://your-domain.com/api).
• Required headers:
  • Accept: application/json
  • project-id = your project ID
  • For private APIs: Authorization: Bearer + your token

Full details: Content API introduction.

List entries (e.g. blog posts)

Paginated: use paginate and page. The parameter name is paginate, not per_page.

GET /posts?paginate=10&page=1

Full URL example: https://your-domain.com/api/posts?paginate=10&page=1

Response: An object with data (array of entries), meta (current_page, last_page, total, etc.), and links (first, next, prev, last). See List Entries in the docs.

Without paginate: Omit paginate and you get a plain array of all entries.

Get one entry by slug

There is no dedicated “get by slug” path. You filter the list using the where parameter, then take the first (or only) item.

GET /posts?where[slug]=my-post-slug

Full URL example: https://your-domain.com/api/posts?where[slug]=my-post-slug

The response is either a single entry or a short array; use the first element. Filtering is described in Advanced Filtering.

Response shape

Each entry has:

• uuid – Unique id.
• fields – Object with your collection’s fields (e.g. title, slug, content, excerpt).
• Optionally locale, published_at, etc.

So in code you’ll use entry.fields.title, entry.fields.slug, entry.fields.content, and so on.

Step 3: Add ElmapiCMS as a Custom API in Lovable

Lovable’s UI changes over time; the idea is the same: you add an external API and tell Lovable how to call it.

1. In your Lovable project, find where to add a Custom API, Backend, or “Bring your own backend”.
2. Set the Base URL to your ElmapiCMS Content API Endpoint (the value from API Access). Do not add a collection path here; the path is per request (e.g. posts, posts?paginate=10&page=1).
3. Configure headers so that every request includes:
   • Accept: application/json
   • project-id = your project ID
   • Authorization: Bearer + your token (if the project’s API is private)

If Lovable supports environment variables or secrets, store the token and project ID there and reference them in the headers so you don’t paste secrets into the UI.

Step 4: Describe the API to Lovable

Before or while you ask for screens, give Lovable a short, accurate description of the API. You can paste something like this (adjust collection and field names to match yours):

This app uses ElmapiCMS as its content API. Base URL is already set in this project.

Required headers on every request:
- Accept: application/json
- project-id: (value from env/secrets)
- Authorization: Bearer (token from env/secrets)

Endpoints (path is the collection slug; base URL is configured above):

- List blog posts (paginated): GET /posts?paginate=10&page=1
  Response: object with "data" array. Each item has "uuid" and "fields" (e.g. fields.title, fields.slug, fields.content, fields.excerpt).

- One post by slug: GET /posts?where[slug]=the-slug
  Use the first item from the response (array or single object).

Replace posts with your collection slug if different (e.g. blog-posts). The important points for Lovable are: base URL, three headers, two URL patterns (list vs by slug), and that entries live under data with fields.*.

Step 5: Example Prompts to Build Screens

Once the API and headers are set, ask for concrete screens and point at the real API.

Blog list page

Add a /blog page that fetches posts from the ElmapiCMS API.
Use GET /posts?paginate=10&page=1 (or your collection slug).
For each post show fields.title, fields.slug, fields.excerpt and link to /blog/ plus the slug.
Use the "data" array from the response.

Single post page

Add a page at /blog/[slug] that fetches one post by slug.
Call GET /posts?where[slug]= followed by the slug param, and use the first item from the response.
Show fields.title and fields.content.

Homepage with latest posts

On the home page, show the latest 3 blog posts from the ElmapiCMS API.
Use GET /posts?paginate=3&page=1 (or limit=3 if the API supports it).
Display title, excerpt, and a link to /blog/[slug] for each.

If Lovable generates wrong URLs or missing headers, remind it: “Use the ElmapiCMS API we configured: base URL + path like /posts?paginate=10&page=1, and always send Accept, project-id, and Authorization: Bearer <token>.”

Tips and Gotchas

• Headers on every request: Lovable sometimes generates fetch without headers. If you get 401 or empty data, tell it explicitly: “Every request to the CMS must include Accept: application/json, project-id, and Authorization: Bearer <token>.”
• Path = collection slug: The path is the collection slug only, e.g. /posts or /blog-posts. Full example: baseUrl + '/posts?paginate=10&page=1'.
• Paginate vs per_page: The ElmapiCMS API uses the paginate and page query parameters. Do not use per_page.
• By slug: Use where[slug]= plus the slug value on the list endpoint and take the first item. There is no separate “get by slug” path.
• Response shape: With paginate, the body has data, meta, and links. Without it, you get a plain array. Always use data when you requested pagination.
• Server-side: Prefer running API calls from the server or a backend so the token is never in the browser. If Lovable can use server/backend for the CMS, configure it that way.

Next Steps

• API reference: Content API and List Entries for query options (sort, where, locale, etc.).
• API Access: API Access settings for project ID, endpoint, tokens, and public API.
• Other guides: Next.js starter template setup and simple blog with Next.js show how to use the ElmapiCMS SDK and credentials in a codebase.

Once Lovable is pointed at the correct base URL and headers and you’ve described the list and by-slug patterns, you can iterate in chat to add or change screens and keep using the same ElmapiCMS endpoints.