create-cloudinary-react 1.0.0-beta.14 → 1.0.0-beta.16

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [1.0.0-beta.16](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.15...v1.0.0-beta.16) (2026-02-11)
+
+
+### Bug Fixes
+
+* add copy on click ([a4ecf5d](https://github.com/cloudinary-devs/create-cloudinary-react/commit/a4ecf5d1d1478d854683a115735fa71f7fb50cea))
+* complete the sentance ([d6c68dd](https://github.com/cloudinary-devs/create-cloudinary-react/commit/d6c68ddc213fbc18771f26840f33edb805950799))
+* remove upload question ([fbf01ae](https://github.com/cloudinary-devs/create-cloudinary-react/commit/fbf01ae696e158cab48feb053a3515bb21453fdd))
+
+# [1.0.0-beta.15](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.14...v1.0.0-beta.15) (2026-02-10)
+
+
+### Bug Fixes
+
+* use correct CLAUDE.md convention for Claude Code ([07a8a08](https://github.com/cloudinary-devs/create-cloudinary-react/commit/07a8a085686b160387388464a722d90c09cb6805))
+
+
+### Features
+
+* **analytics:** add CLI feature detection for React SDK ([4dfe495](https://github.com/cloudinary-devs/create-cloudinary-react/commit/4dfe4957bf615e9df08afe729e4f024c02d1cc7f))
+
 # [1.0.0-beta.14](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.13...v1.0.0-beta.14) (2026-02-04)
 
 

package/cli.js

@@ -72,7 +72,7 @@ async function main() {
     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([
+    const questions = [
       {
         type: 'input',
         name: 'projectName',
@@ -135,7 +135,9 @@ async function main() {
       {
         type: 'checkbox',
         name: 'aiTools',
-        message: 'Which AI coding assistant(s) are you using? (Select all that apply)',
+        message:
+          'Which AI coding assistant(s) are you using? (Select all that apply)\n' +
+          chalk.gray('   We’ll add local instruction files so your assistant knows Cloudinary patterns.\n'),
         choices: [
           { name: 'Cursor', value: 'cursor' },
           { name: 'GitHub Copilot', value: 'copilot' },
@@ -157,7 +159,9 @@ async function main() {
         default: false,
         when: (answers) => answers.installDeps,
       },
-    ]);
+    ];
+
+    answers = await inquirer.prompt(questions);
   }
 
   const { projectName, cloudName, uploadPreset, aiTools, installDeps, startDev } = answers;
@@ -183,6 +187,9 @@ async function main() {
     PROJECT_NAME: projectName,
     CLOUD_NAME: cloudName,
     UPLOAD_PRESET: uploadPreset || '',
+    UPLOAD_PRESET_ENV_LINE: uploadPreset
+      ? `- \`VITE_CLOUDINARY_UPLOAD_PRESET\`: ${uploadPreset}`
+      : '- `VITE_CLOUDINARY_UPLOAD_PRESET`: (not set - add one for uploads)',
   };
 
   // Function to copy template file
@@ -247,8 +254,7 @@ async function main() {
     }
 
     if (aiTools.includes('claude')) {
-      writeFileSync(join(projectPath, '.claude'), aiRulesContent);
-      writeFileSync(join(projectPath, 'claude.md'), aiRulesContent);
+      writeFileSync(join(projectPath, 'CLAUDE.md'), aiRulesContent);
     }
 
     if (aiTools.includes('generic')) {
@@ -279,6 +285,18 @@ async function main() {
 
   console.log(chalk.green('✅ Project created successfully!\n'));
 
+  if (aiTools && aiTools.length > 0) {
+    console.log(chalk.cyan('📋 AI assistant files created:'));
+    if (aiTools.includes('cursor')) console.log(chalk.gray('   • Cursor: .cursorrules'));
+    if (aiTools.includes('copilot')) console.log(chalk.gray('   • GitHub Copilot: .github/copilot-instructions.md'));
+    if (aiTools.includes('claude')) console.log(chalk.gray('   • Claude: CLAUDE.md'));
+    if (aiTools.includes('generic')) console.log(chalk.gray('   • Generic: AI_INSTRUCTIONS.md, PROMPT.md'));
+    if (aiTools.includes('cursor') || aiTools.includes('claude')) {
+      console.log(chalk.gray('   • MCP (Cursor/Claude): .cursor/mcp.json'));
+    }
+    console.log('');
+  }
+
   if (!answers.hasUploadPreset) {
     console.log(chalk.yellow('\n📝 Note: Upload preset not configured'));
     console.log(chalk.gray('   • Transformations will work with sample images'));
@@ -287,7 +305,8 @@ async function main() {
     console.log(chalk.cyan('   1. Go to https://console.cloudinary.com/app/settings/upload/presets'));
     console.log(chalk.cyan('   2. Click "Add upload preset"'));
     console.log(chalk.cyan('   3. Set it to "Unsigned" mode'));
-    console.log(chalk.cyan('   4. Add the preset name to your .env file\n'));
+    console.log(chalk.cyan('   4. Add the preset name to your .env file'));
+    console.log(chalk.cyan('   5. Save the file and restart the dev server so it loads correctly\n'));
   }
 
   if (installDeps) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudinary-react",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.16",
   "description": "Scaffold a Cloudinary React + Vite + TypeScript project with interactive setup",
   "type": "module",
   "bin": {

package/templates/.cursorrules.template

@@ -30,7 +30,7 @@ If the user is **not** using the create-cloudinary-react CLI and only has these
 Create a `.env` file in the project root with **Vite prefix** (required for client access):
 - `VITE_CLOUDINARY_CLOUD_NAME=your_cloud_name` (required)
 - `VITE_CLOUDINARY_UPLOAD_PRESET=your_unsigned_preset_name` (optional; required for unsigned upload widget)
-- Restart the dev server after adding or changing `.env`. Use `import.meta.env.VITE_*` in code, not `process.env`.
+- Save the `.env` file after editing it, then restart the dev server so changes load correctly. Use `import.meta.env.VITE_*` in code, not `process.env`.
 
 **2. Reusable Cloudinary instance (config)**  
 Create a config file (e.g. `src/cloudinary/config.ts`) so the rest of the app can use a single `cld` instance:

package/templates/README.md.template

@@ -18,11 +18,7 @@ This project uses Cloudinary for image management. If you don't have a Cloudinar
 
 Your `.env` file has been pre-configured with:
 - `VITE_CLOUDINARY_CLOUD_NAME`: {{CLOUD_NAME}}
-{{#UPLOAD_PRESET}}
-- `VITE_CLOUDINARY_UPLOAD_PRESET`: {{UPLOAD_PRESET}}
-{{/UPLOAD_PRESET}}
-{{^UPLOAD_PRESET}}
-- `VITE_CLOUDINARY_UPLOAD_PRESET`: (not set - required for uploads)
+{{UPLOAD_PRESET_ENV_LINE}}
 
 **Note**: Transformations work without an upload preset (using sample images). Uploads require an unsigned upload preset.
 
@@ -31,7 +27,8 @@ To create an unsigned upload preset:
 2. Click "Add upload preset"
 3. Set it to "Unsigned" mode
 4. Add the preset name to your `.env` file
-{{/UPLOAD_PRESET}}
+5. **Save** the `.env` file and restart the dev server so the new values load correctly.
+
 
 ## AI Assistant Support
 

package/templates/src/App.css.template

@@ -90,7 +90,7 @@ h2 {
   font-size: 0.9rem;
   transition: all 0.2s;
   user-select: text;
-  cursor: text;
+  cursor: pointer;
 }
 
 .prompts-list li:hover {

package/templates/src/App.tsx.template

@@ -5,11 +5,13 @@ import { format, quality } from '@cloudinary/url-gen/actions/delivery';
 import { auto } from '@cloudinary/url-gen/qualifiers/format';
 import { auto as autoQuality } from '@cloudinary/url-gen/qualifiers/quality';
 import { autoGravity } from '@cloudinary/url-gen/qualifiers/gravity';
-import { cld } from './cloudinary/config';
+import { cld, uploadPreset } from './cloudinary/config';
 import { UploadWidget } from './cloudinary/UploadWidget';
 import type { CloudinaryUploadResult } from './cloudinary/UploadWidget';
 import './App.css';
 
+const hasUploadPreset = Boolean(uploadPreset);
+
 function App() {
   const [uploadedImageId, setUploadedImageId] = useState<string | null>(null);
 
@@ -23,8 +25,13 @@ function App() {
     alert(`Upload failed: ${error.message}`);
   };
 
+  const copyPrompt = (e: React.MouseEvent<HTMLLIElement>) => {
+    const text = e.currentTarget.textContent ?? '';
+    void navigator.clipboard.writeText(text);
+  };
+
   // Display uploaded image if available, otherwise show a sample
-  const imageId = uploadedImageId || 'samples/cloudinary-icon';
+  const imageId = uploadedImageId || 'samples/people/bicycle';
   
   const displayImage = cld
     .image(imageId)
@@ -38,14 +45,16 @@ function App() {
         <h1>Cloudinary React + Vite</h1>
         <p>This is a ready-to-use development environment with Cloudinary integration.</p>
         
-        <div className="upload-section">
-          <h2>Upload an Image</h2>
-          <UploadWidget
-            onUploadSuccess={handleUploadSuccess}
-            onUploadError={handleUploadError}
-            buttonText="Upload Image"
-          />
-        </div>
+        {hasUploadPreset && (
+          <div className="upload-section">
+            <h2>Upload an Image</h2>
+            <UploadWidget
+              onUploadSuccess={handleUploadSuccess}
+              onUploadError={handleUploadError}
+              buttonText="Upload Image"
+            />
+          </div>
+        )}
 
         <div className="image-section">
           <h2>Display Image</h2>
@@ -66,9 +75,20 @@ function App() {
             <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>
-            <li>Add image overlays with text or logos</li>
+            {hasUploadPreset ? (
+              <>
+                <li onClick={copyPrompt} title="Click to copy">Create an image gallery with lazy loading and responsive images</li>
+                <li onClick={copyPrompt} title="Click to copy">Create a video player that plays a Cloudinary video</li>
+                <li onClick={copyPrompt} title="Click to copy">Add image overlays with text or logos</li>
+              </>
+            ) : (
+              <>
+                <li onClick={copyPrompt} title="Click to copy">Let&apos;s try uploading — help me add an upload preset and upload widget</li>
+                <li onClick={copyPrompt} title="Click to copy">Create an image gallery with lazy loading and responsive images</li>
+                <li onClick={copyPrompt} title="Click to copy">Create a video player that plays a Cloudinary video</li>
+                <li onClick={copyPrompt} title="Click to copy">Add image overlays with text or logos</li>
+              </>
+            )}
           </ul>
         </div>
       </main>

package/templates/vite.config.ts.template

@@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    // Analytics: Mark this project as created via create-cloudinary-react CLI
+    'process.env.CLOUDINARY_SOURCE': '"cli"',
+    'process.env.CLD_CLI': '"true"',
+  },
 })