How to Use ChatGPT to Create Projects in ElmapiCMS

Learn how to use ChatGPT and other chat-based AI assistants to create ElmapiCMS project templates by leveraging the official documentation.

R
Raşit Apalak
·
·
12 min read

Chat-based AI assistants like ChatGPT, Claude, and Google Gemini have become powerful tools for developers. When combined with ElmapiCMS's comprehensive documentation, these AI assistants can help you create complete project templates and frontend integrations without writing a single line of code manually.

This guide will show you how to use chat-based AIs to understand ElmapiCMS's structure, generate project templates, and create frontend code that consumes your CMS API.

Table of Contents

Why Use Chat-Based AI with ElmapiCMS?

Chat-based AI assistants excel at:

  • Learning from Documentation - AI can read and understand the ElmapiCMS documentation to learn about collections, fields, and API structure
  • Template Generation - Generate complete JSON templates with proper structure
  • Frontend Integration - Create code for any framework (Next.js, Nuxt.js, React, Vue, etc.) using the ElmapiCMS JavaScript SDK
  • Problem Solving - Get help with specific challenges and edge cases

The key advantage is that modern AI assistants can access and learn from documentation, making them powerful partners in your development workflow. Combined with the official ElmapiCMS JavaScript SDK, you can generate production-ready code that's type-safe and well-structured.

Understanding How AI Learns About ElmapiCMS

Chat-based AIs like ChatGPT can learn about ElmapiCMS in several ways:

1. Direct Documentation Access

Modern AI assistants can access web content, including the ElmapiCMS documentation. When you reference the docs, the AI can:

  • Understand collection and field structures
  • Learn about API endpoints and authentication
  • Understand template formats and conventions
  • Get context about best practices

2. Providing Documentation Links

You can share documentation links directly with the AI:

Example Prompt: "I'm working with ElmapiCMS. Can you read the documentation at https://elmapicms.com/documentation/ and help me understand how to create a project template?"

The AI will analyze the documentation and provide guidance based on the official information.

3. Sharing Template Files

You can also share existing templates. ElmapiCMS stores project templates in the resources/data/project_templates/ directory. Each template is a JSON file named after its slug (e.g., landing-page-nextjs.json).

Finding Existing Templates:

If you have ElmapiCMS installed locally, you can find example templates at:

  • Local Installation: resources/data/project_templates/ in your ElmapiCMS project root

You can copy the contents of an existing template and paste it into your chat:

Example Prompt: "Here's an existing ElmapiCMS template structure: [paste template JSON]. Can you help me create a similar one for a product catalog with products, categories, and brands collections?"

Step 1: Understanding ElmapiCMS Structure

Before generating templates, help your AI assistant understand ElmapiCMS. Start with a foundational prompt:

Prompt: "I'm using ElmapiCMS, a headless CMS. Can you learn about it from https://elmapicms.com/documentation/ and explain the core concepts: projects, collections, fields, and how templates work?"

The AI will analyze the documentation and provide you with a clear understanding of:

  • Projects - Isolated content spaces
  • Collections - Content types with field definitions
  • Fields - Different field types (text, media, relation, etc.)
  • Templates - JSON structures that define collections and demo data
  • API - REST API for fetching content

Step 2: Generate a Project Template

Once the AI understands ElmapiCMS, ask it to generate a complete template. Be specific about your requirements:

Example: Creating a Blog Template

Prompt: "Based on the ElmapiCMS documentation, create a complete project template JSON for a blog. The template should include:

  • A 'posts' collection (multi-entry) with fields: title (text, required), slug (slug, auto-generated), content (richtext), excerpt (longtext), featured_image (media), publish_date (date), category (relation to categories collection), author (relation to authors collection), tags (repeatable text)
  • A 'categories' collection (multi-entry) with: name (text, required), slug (slug), description (longtext)
  • An 'authors' collection (multi-entry) with: name (text, required), email (email), bio (longtext), avatar (media)
  • Demo data: 5 blog posts, 3 categories, 2 authors
  • Follow the exact JSON structure used by ElmapiCMS templates"

The AI will generate a complete, valid template JSON that you can save directly to resources/data/project_templates/blog.json.

Example: Creating a Product Catalog Template

Prompt: "Create an ElmapiCMS project template for an e-commerce product catalog. Include:

  • Products collection: name, description, price (number), SKU (text), images (media, multiple), category (relation), brand (relation), in_stock (boolean), variants (group, repeatable with size, color, price fields)
  • Categories collection: name, slug, description, parent_category (relation, optional)
  • Brands collection: name, logo (media), description
  • Demo data for all collections
  • Use proper ElmapiCMS field types and structure"

Step 3: Understanding Field Types

Make sure your AI assistant knows all available field types. You can reference the documentation or provide a list:

Prompt: "ElmapiCMS supports these field types: text, longtext, richtext, slug, email, password, number, enumeration, boolean, color, date, time, media, relation, json, and group. Can you explain when to use each type and show examples?"

The AI will provide guidance on:

  • text - Single line text for titles, headings
  • longtext - Multi-line text for descriptions
  • richtext - Rich text editor for formatted content
  • slug - URL-friendly strings
  • email - Email addresses with validation
  • password - Encrypted password fields
  • number - Numeric values (integers, decimals)
  • enumeration - Dropdown with predefined options
  • boolean - True/false checkboxes
  • color - Color picker
  • date - Date picker
  • time - Time picker
  • media - File uploads (images, documents)
  • relation - Links to other collections
  • json - Raw JSON data
  • group - Nested field groups (can be repeatable)

Step 4: Generate Complex Structures

Chat-based AIs excel at generating complex nested structures. Here are examples:

Repeatable Field Groups

Prompt: "Create a repeatable group field structure for FAQ items. Each FAQ should have: question (text), answer (richtext), and category (enumeration with options: General, Pricing, Technical). Show the complete JSON structure for an ElmapiCMS template."

Relations Between Collections

Prompt: "In ElmapiCMS, how do I create a relation field that links blog posts to categories? Show me the complete field definition JSON structure."

Nested Groups

Prompt: "Create a product template with variants. Each product has a repeatable 'variants' group containing: size (enumeration), color (color), price (number), and stock (number). Show the complete collection structure."

Step 5: Generate Demo Data

Once your template structure is ready, ask the AI to generate realistic demo content:

Prompt: "Generate demo data entries for the blog template. Create 5 blog posts with:

  • Varied topics (technology, design, business)
  • Unique, engaging titles
  • 2-3 paragraph content for each post
  • Realistic excerpts
  • Different publish dates spread over the last 3 months
  • Assign posts to different categories and authors
  • Include relevant tags for each post"

The AI will generate realistic, varied content that makes your template immediately usable.

Step 6: Create Frontend Integration Code

After creating your template, use the AI to generate frontend code that consumes the ElmapiCMS API. The best approach is to use the official ElmapiCMS JavaScript SDK, which provides type-safe, promise-based access to all API endpoints.

Installing the SDK

First, ask the AI to help you set up the SDK:

Prompt: "Show me how to install and initialize the ElmapiCMS JavaScript SDK (@elmapicms/js-sdk) in a Next.js project. Include environment variables for the API URL, API token, and project UUID."

The AI will generate installation and setup instructions:

npm install @elmapicms/js-sdk

Next.js Example with SDK

Prompt: "I have an ElmapiCMS project with a 'posts' collection. Generate a Next.js page component that:

  • Uses the @elmapicms/js-sdk package to fetch all published posts
  • Displays them in a grid layout
  • Shows the title, excerpt, featured image, and publish date
  • Links to individual post pages
  • Uses TypeScript and follows Next.js 14+ conventions
  • Includes proper error handling and loading states"

The AI will generate code using the SDK:

import { createClient } from '@elmapicms/js-sdk';

const client = createClient(
  process.env.ELMAPI_API_URL!,
  process.env.ELMAPI_API_KEY!,
  process.env.ELMAPI_PROJECT_ID!
);

export default async function BlogPage() {
  const posts = await client.getEntries('posts', {
    state: 'published'
  });
  
  // Render posts...
}

Nuxt.js Example with SDK

Prompt: "Create a Nuxt.js page that uses @elmapicms/js-sdk to fetch blog posts from ElmapiCMS. Use the composition API, TypeScript, and include proper error handling."

React Example with SDK

Prompt: "Generate a React component that uses @elmapicms/js-sdk to fetch and display products from ElmapiCMS. Include loading states, error handling, and use React hooks."

Benefits of Using the SDK

When prompting AI to generate code, always mention the SDK. The SDK provides:

  • Type Safety - Full TypeScript support with comprehensive type definitions
  • Simplified API - Clean, promise-based interface instead of raw fetch calls
  • Error Handling - Built-in error types (AuthenticationError, NotFoundError, etc.)
  • All Endpoints - Access to all API functionality through a single client

Step 7: API Integration Patterns

Help your AI understand ElmapiCMS API patterns using the JavaScript SDK:

Prompt: "Based on the ElmapiCMS documentation and the @elmapicms/js-sdk package, show me how to:

  • Initialize the SDK client with authentication
  • Fetch entries from a collection
  • Filter and sort results
  • Handle pagination
  • Fetch related entries through relations
  • Handle errors properly"

The AI will provide code examples using the SDK:

import { createClient } from '@elmapicms/js-sdk';

const client = createClient(apiUrl, apiToken, projectId);

// Fetch all entries
const entries = await client.getEntries('posts');

// Fetch with filters
const filtered = await client.getEntries('posts', {
  filters: { category: 'technology' },
  sort: { publish_date: 'desc' },
  limit: 10,
  offset: 0
});

// Fetch single entry
const post = await client.getEntry('posts', entryId);

// Fetch with relations
const postsWithAuthors = await client.getEntries('posts', {
  include: ['author', 'category']
});

SDK vs Raw API Calls

When working with AI, prefer the SDK over raw fetch calls:

Prompt: "Instead of using fetch, show me how to use @elmapicms/js-sdk to accomplish the same task. What are the advantages?"

The SDK provides better type safety, error handling, and a cleaner API compared to raw HTTP requests.

Best Practices

1. Reference the Documentation and SDK

Always mention both the ElmapiCMS documentation and SDK in your prompts:

"Based on the documentation at https://elmapicms.com/documentation/ and using @elmapicms/js-sdk, ..."

This helps the AI access the most current and accurate information and generate code that uses the official SDK.

1a. Use the Official SDK

Always prefer the ElmapiCMS JavaScript SDK over raw fetch calls:

Good Prompt: "Use @elmapicms/js-sdk to fetch blog posts..."

Avoid: "Use fetch to call the ElmapiCMS API..."

The SDK provides better type safety, error handling, and maintainability.

2. Be Specific About Requirements

Instead of "create a blog template," provide detailed requirements:

"Create a blog template with posts that have title, content, featured image, publish date, category relation, and author relation. Include categories and authors collections with appropriate fields."

3. Iterate and Refine

Use follow-up prompts to refine the output:

"Can you add SEO fields (meta_title, meta_description) to the posts collection?"

"Update the template to include a featured boolean field for highlighting posts."

4. Validate Output

Always review AI-generated code:

  • Check JSON syntax
  • Verify field types match your needs
  • Test API endpoints
  • Ensure frontend code follows best practices

5. Ask for Explanations

Don't just ask for code; ask for understanding:

"Explain how relation fields work in ElmapiCMS and show me an example."

"What's the difference between singleton and multi-entry collections?"

Troubleshooting with AI

When you encounter issues, use chat-based AI for troubleshooting:

Prompt: "I'm getting a 401 error when trying to fetch content from ElmapiCMS API. Based on the documentation, what could be causing this and how do I fix it?"

Prompt: "My relation field isn't returning related entries. Can you help me debug this based on the ElmapiCMS API structure?"

Conclusion

Chat-based AI assistants like ChatGPT, Claude, and Gemini are powerful tools for working with ElmapiCMS. By leveraging the official documentation and the ElmapiCMS JavaScript SDK, these AIs can help you:

  • Understand ElmapiCMS concepts and structure
  • Generate complete project templates
  • Create frontend integration code using the official SDK
  • Troubleshoot issues and optimize your setup

The key is providing clear, specific prompts and referencing both the documentation and SDK so the AI has accurate context. Always ask the AI to use the official SDK (@elmapicms/js-sdk) when generating frontend code, as it provides better type safety, error handling, and maintainability compared to raw API calls.

Ready to try it? Open ChatGPT or your preferred AI assistant, share the ElmapiCMS documentation link and SDK package, then describe what you want to build and iterate on the results.

Next Steps

Happy building with AI and ElmapiCMS!

Share this post:

Ready to build your content API?

Try ElmapiCMS free with our live demo, or get the full source code for $149.

Comparing options first? Read our best headless CMS comparison.

Try Live DemoGet ElmapiCMS

Related Posts

Tutorial
Tutorial

How to Use API Authentication in ElmapiCMS

Learn how to set up API authentication for the ElmapiCMS API, create API tokens, understand token abilities, and secure your content API endpoints.

Read more
Tutorial
Tutorial

How to Create a Next.js Blog - Part 2: Table of Contents, Search, and Categories

Continue building your Next.js blog by adding individual post pages, table of contents, search functionality, and a category system. Part 2 of our comprehensive tutorial series.

Read more
Guide
Guide

ElmapiCMS vs Directus: Full Comparison Guide

Compare ElmapiCMS and Directus headless CMS platforms. Learn about database flexibility, multi-project support, setup complexity, and which solution fits your needs better.

Read more