Improve CLI and templates: README env default, conditional upload widget, AI prompt context, save .env note

- README: default upload preset line when none supplied; add step to save .env and restart
- App: hide upload widget when no upload preset; conditional AI prompts (try uploading vs add preset)
- App: default display image to samples/landscapes/beach-boat
- CLI: explain AI assistant question (local instruction files); list created files per selection after create
- CLI: remove edit/review step and 'no data sent' line per feedback
- .cursorrules: save .env then restart for changes to load

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: strausr

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
@@ -278,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'));
@@ -286,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-lock.json

@@ -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:

templates/.cursorrules.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
 

templates/README.md.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);
 
@@ -24,7 +26,7 @@ function App() {
   };
 
   // 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 +40,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 +70,21 @@ 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>Upload an image to my account</li>
+                <li>Create an image gallery with lazy loading and responsive images</li>
+                <li>Create a video player that plays a Cloudinary video</li>
+                <li>Add image overlays with text or logos</li>
+              </>
+            ) : (
+              <>
+                <li>Let&apos;s try uploading — help me add an upload preset and upload widget</li>
+                <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>
+              </>
+            )}
           </ul>
         </div>
       </main>