create-cloudinary-react 1.0.0-beta.11 → 1.0.0-beta.13

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [1.0.0-beta.13](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.12...v1.0.0-beta.13) (2026-02-03)
+
+
+### Features
+
+* simplify AI prompts section with clear copy-paste instructions ([2b60415](https://github.com/cloudinary-devs/create-cloudinary-react/commit/2b60415c1d3e23aabbe95b2c5366078857a5b37c))
+
+# [1.0.0-beta.12](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.11...v1.0.0-beta.12) (2026-02-02)
+
+
+### Bug Fixes
+
+* remove console.log ([369e92f](https://github.com/cloudinary-devs/create-cloudinary-react/commit/369e92f3cb3e5af633c1553380119d5a685ec506))
+
+
+### Features
+
+* non-interactive 'headless' mode ([4334991](https://github.com/cloudinary-devs/create-cloudinary-react/commit/4334991f99eddfb3ae2b017c977f9c69c0c500fd))
+
 # [1.0.0-beta.11](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.10...v1.0.0-beta.11) (2026-01-30)
 
 

package/README.md

@@ -22,7 +22,7 @@ npx create-cloudinary-react
 The CLI will prompt you for:
 - Project name
 - **Cloudinary cloud name** (found in your [dashboard](https://console.cloudinary.com/app/home/dashboard))
-- Upload preset (optional - required for uploads, but transformations work without it)
+- Unsigned Upload preset (optional - required for uploads, but transformations work without it)
 - AI coding assistant(s) you're using (Cursor, GitHub Copilot, Claude, etc.)
 - Whether to install dependencies
 - Whether to start dev server

package/cli.js

@@ -7,6 +7,7 @@ import { execSync } from 'child_process';
 import inquirer from 'inquirer';
 import chalk from 'chalk';
 import fs from 'fs-extra';
+import { parseArgs } from 'node:util';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -24,95 +25,140 @@ function isValidProjectName(name) {
 }
 
 async function main() {
-  console.log(chalk.cyan.bold('\n🚀 Cloudinary React + Vite Boilerplate\n'));
-  console.log(chalk.gray('💡 Need a Cloudinary account? Sign up for free: https://cloudinary.com/users/register/free\n'));
+  
+  let answers = {};
+  
+  if (process.argv.includes('--headless')) {
 
-  const answers = await inquirer.prompt([
-    {
-      type: 'input',
-      name: 'projectName',
-      message: 'What’s your project’s name?\n',
-      default: 'my-cloudinary-app',
-      validate: (input) => {
-        if (!input.trim()) {
-          return 'Project name cannot be empty';
+    const { values, positionals } = parseArgs({
+      options: {
+        headless: {
+          type: 'boolean'
+        },
+        projectName: {
+          type: 'string',
+          default: 'my-cloudinary-app'
+        },
+        cloudName: {
+          type: 'string'
+        },
+        hasUploadPreset: {
+          type: 'boolean',
+          default: false
+        },
+        uploadPreset: {
+          type: 'string'
+        },
+        aiTools: {
+          type: 'string',
+          multiple: true,
+          default: ['cursor']
+        },
+        installDeps: {
+          type: 'boolean',
+          default: true
+        },
+        startDev: {
+          type: 'boolean',
+          default: false
         }
-        if (!isValidProjectName(input)) {
-          return 'Project name can only contain letters, numbers, hyphens, and underscores';
-        }
-        if (existsSync(input)) {
-          return `Directory "${input}" already exists. Please choose a different name.`;
-        }
-        return true;
+      }
+    });
+    
+    Object.assign(answers, values);
+    
+  } else {
+  
+    console.log(chalk.cyan.bold('\n🚀 Cloudinary React + Vite\n'));
+    console.log(chalk.gray('💡 Need a Cloudinary account? Sign up for free: https://cloudinary.com/users/register/free\n'));
+  
+    answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'projectName',
+        message: 'What’s your project’s name?\n',
+        default: 'my-cloudinary-app',
+        validate: (input) => {
+          if (!input.trim()) {
+            return 'Project name cannot be empty';
+          }
+          if (!isValidProjectName(input)) {
+            return 'Project name can only contain letters, numbers, hyphens, and underscores';
+          }
+          if (existsSync(input)) {
+            return `Directory "${input}" already exists. Please choose a different name.`;
+          }
+          return true;
+        },
       },
-    },
-    {
-      type: 'input',
-      name: 'cloudName',
-      message:
-        'What’s your Cloudinary cloud name?\n' +
-        chalk.gray(' → Find your cloud name: https://console.cloudinary.com/app/home/dashboard') + '\n',
-      validate: (input) => {
-        if (!input.trim()) {
-          return chalk.yellow(
-            'Cloud name is required.\n' +
-            ' → Sign up: https://cloudinary.com/users/register/free\n' +
-            ' → Find your cloud name: https://console.cloudinary.com/app/home/dashboard'
-          );
-        }
-        if (!isValidCloudName(input)) {
-          return 'Cloud name can only contain lowercase letters, numbers, hyphens, and underscores';
-        }
-        return true;
+      {
+        type: 'input',
+        name: 'cloudName',
+        message:
+          'What’s your Cloudinary cloud name?\n' +
+          chalk.gray(' → Find your cloud name: https://console.cloudinary.com/app/home/dashboard') + '\n',
+        validate: (input) => {
+          if (!input.trim()) {
+            return chalk.yellow(
+              'Cloud name is required.\n' +
+              ' → Sign up: https://cloudinary.com/users/register/free\n' +
+              ' → Find your cloud name: https://console.cloudinary.com/app/home/dashboard'
+            );
+          }
+          if (!isValidCloudName(input)) {
+            return 'Cloud name can only contain lowercase letters, numbers, hyphens, and underscores';
+          }
+          return true;
+        },
       },
-    },
-    {
-      type: 'confirm',
-      name: 'hasUploadPreset',
-      message:
-        'Do you have an unsigned upload preset?\n' +
-        chalk.gray(' → You’ll need one if you want to upload new images to Cloudinary,\n   but not if you only want to transform or deliver existing images.') + '\n' +
-        chalk.gray(' → Create one here: https://console.cloudinary.com/app/settings/upload/presets') + '\n',
-      default: false,
-    },
-    {
-      type: 'input',
-      name: 'uploadPreset',
-      message: 'What’s your unsigned upload preset’s name?\n',
-      when: (answers) => answers.hasUploadPreset,
-      validate: (input) => {
-        if (!input.trim()) {
-          return 'Upload preset name cannot be empty';
-        }
-        return true;
+      {
+        type: 'confirm',
+        name: 'hasUploadPreset',
+        message:
+          'Do you have an unsigned upload preset?\n' +
+          chalk.gray(' → You’ll need one if you want to upload new images to Cloudinary,\n   but not if you only want to transform or deliver existing images.') + '\n' +
+          chalk.gray(' → Create one here: https://console.cloudinary.com/app/settings/upload/presets') + '\n',
+        default: false,
+      },
+      {
+        type: 'input',
+        name: 'uploadPreset',
+        message: 'What’s your unsigned upload preset’s name?\n',
+        when: (answers) => answers.hasUploadPreset,
+        validate: (input) => {
+          if (!input.trim()) {
+            return 'Upload preset name cannot be empty';
+          }
+          return true;
+        },
+      },
+      {
+        type: 'checkbox',
+        name: 'aiTools',
+        message: 'Which AI coding assistant(s) are you using? (Select all that apply)',
+        choices: [
+          { name: 'Cursor', value: 'cursor' },
+          { name: 'GitHub Copilot', value: 'copilot' },
+          { name: 'Claude Code / Claude Desktop', value: 'claude' },
+          { name: 'Other / Generic AI tools', value: 'generic' },
+        ],
+        default: ['cursor'],
       },
-    },
-    {
-      type: 'checkbox',
-      name: 'aiTools',
-      message: 'Which AI coding assistant(s) are you using? (Select all that apply)',
-      choices: [
-        { name: 'Cursor', value: 'cursor' },
-        { name: 'GitHub Copilot', value: 'copilot' },
-        { name: 'Claude Code / Claude Desktop', value: 'claude' },
-        { name: 'Other / Generic AI tools', value: 'generic' },
-      ],
-      default: ['cursor'],
-    },
-    {
-      type: 'confirm',
-      name: 'installDeps',
-      message: 'Install dependencies now?\n',
-      default: true,
-    },
-    {
-      type: 'confirm',
-      name: 'startDev',
-      message: 'Start development server?\n',
-      default: false,
-      when: (answers) => answers.installDeps,
-    },
-  ]);
+      {
+        type: 'confirm',
+        name: 'installDeps',
+        message: 'Install dependencies now?\n',
+        default: true,
+      },
+      {
+        type: 'confirm',
+        name: 'startDev',
+        message: 'Start development server?\n',
+        default: false,
+        when: (answers) => answers.installDeps,
+      },
+    ]);
+  }
 
   const { projectName, cloudName, uploadPreset, aiTools, installDeps, startDev } = answers;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudinary-react",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.13",
   "description": "Scaffold a Cloudinary React + Vite + TypeScript project with interactive setup",
   "type": "module",
   "bin": {
@@ -11,7 +11,6 @@
     "react",
     "vite",
     "typescript",
-    "boilerplate",
     "scaffold"
   ],
   "author": "",

package/templates/README.md.template

@@ -26,7 +26,7 @@ Your `.env` file has been pre-configured with:
 
 **Note**: Transformations work without an upload preset (using sample images). Uploads require an unsigned upload preset.
 
-To create an upload preset:
+To create an unsigned upload preset:
 1. Go to https://console.cloudinary.com/app/settings/upload/presets
 2. Click "Add upload preset"
 3. Set it to "Unsigned" mode
@@ -37,7 +37,7 @@ To create an upload preset:
 
 This project includes AI coding rules for your selected AI assistant(s). The rules help AI assistants understand Cloudinary React SDK patterns, common errors, and best practices.
 
-**Try the AI Prompts**: Check out the "🤖 Try Asking Your AI Assistant" section in the app for ready-to-use Cloudinary prompts to get started!
+**Try the AI Prompts**: Check out the "🤖 Try Asking Your AI Assistant" section in the app for ready-to-use Cloudinary prompts! Copy and paste them into your AI assistant to get started.
 
 ## Learn More
 

package/templates/src/App.css.template

@@ -61,8 +61,13 @@ h2 {
 
 .prompts-intro {
   margin: 0.5rem 0 1rem 0;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, 0.9);
   text-align: center;
+  font-size: 1rem;
+}
+
+.prompts-intro strong {
+  color: rgba(99, 102, 241, 1);
 }
 
 .prompts-list {
@@ -84,7 +89,8 @@ h2 {
   color: rgba(255, 255, 255, 0.9);
   font-size: 0.9rem;
   transition: all 0.2s;
-  cursor: pointer;
+  user-select: text;
+  cursor: text;
 }
 
 .prompts-list li:hover {

package/templates/src/App.tsx.template

@@ -33,7 +33,7 @@ function App() {
   return (
     <div className="app">
       <main className="main-content">
-        <h1>Cloudinary React + Vite Boilerplate</h1>
+        <h1>Cloudinary React + Vite</h1>
         <p>This is a ready-to-use development environment with Cloudinary integration.</p>
         
         <div className="upload-section">
@@ -60,7 +60,9 @@ function App() {
 
         <div className="ai-prompts-section">
           <h2>🤖 Try Asking Your AI Assistant</h2>
-          <p className="prompts-intro">Ping your agent with one of these to get started:</p>
+          <p className="prompts-intro">
+            <strong>Copy and paste</strong> one of these prompts into your AI assistant:
+          </p>
           <ul className="prompts-list">
             <li>Create an image gallery with lazy loading and responsive</li>
             <li>Create a video player that plays a Cloudinary video</li>