create-cloudinary-react 1.0.0-beta.18 → 1.0.0-beta.20

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.0.0-beta.20](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.19...v1.0.0-beta.20) (2026-02-23)
+
+
+### Bug Fixes
+
+* Merge pull request [#9](https://github.com/cloudinary-devs/create-cloudinary-react/issues/9) from jlooper-cloudinary/main ([9696686](https://github.com/cloudinary-devs/create-cloudinary-react/commit/96966864d65168b0210a8200f26c9d0d144b6fa9))
+
+# [1.0.0-beta.19](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.18...v1.0.0-beta.19) (2026-02-18)
+
+
+### Bug Fixes
+
+* update readme ([b7a77ca](https://github.com/cloudinary-devs/create-cloudinary-react/commit/b7a77caaf4bf052c68bd912a0ae9c51d424d07cd))
+
 # [1.0.0-beta.18](https://github.com/cloudinary-devs/create-cloudinary-react/compare/v1.0.0-beta.17...v1.0.0-beta.18) (2026-02-18)
 
 

package/README.md

@@ -1,57 +1,99 @@
 # create-cloudinary-react
 
-> **Beta Release** - This is a beta version. We welcome feedback and bug reports!
-
-Part of the [Cloudinary Developers](https://github.com/cloudinary-devs) organization.
+[![npm version](https://img.shields.io/npm/v/create-cloudinary-react.svg?style=flat-square)](https://www.npmjs.com/package/create-cloudinary-react)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-Scaffold a Cloudinary React + Vite + TypeScript project with interactive setup.
+**The fastest way to start building with Cloudinary and React.**
 
-## Prerequisites
+Scaffold a modern, production-ready Cloudinary application with React 19, Vite 6, and TypeScript 5. Features interactive setup, automatic environment configuration, and built-in AI coding assistance.
 
 - Node.js 18+ installed
 - A Cloudinary account (free tier available)
   - [Sign up for free](https://cld.media/reactregister)
   - Your cloud name is in your [dashboard](https://console.cloudinary.com/app/home/dashboard)
 
-## Usage
+> **Beta Release** - This is a beta version. We welcome feedback and bug reports!
+
+Part of the [Cloudinary Developers](https://github.com/cloudinary-devs) organization.
+
+![Build with Cloudinary!](https://res.cloudinary.com/cloudinary-creators-community/image/upload/c_thumb,w_200,g_face/v1771434800/Tee-Mascot-Hacktoberfest-cloudicorn_x6zvtf.png)
+ 
+## 📽️ Demo
+
+[![Watch the demo](https://res.cloudinary.com/drir0kpia/video/upload/so_1/reactstarterdemo.jpg)](https://res.cloudinary.com/drir0kpia/video/upload/v1771449633/reactstarterdemo.mp4)
+
+
+## 🎬 Features
+
+- **🚀 Modern Stack**: React 19 + Vite 6 + TypeScript 5.7
+- **📦 Cloudinary SDKs**: Pre-configured `@cloudinary/react`
+- **🤖 AI-First**: Auto-generates configuration for Cursor, GitHub Copilot, and Claude
+- **🛠️ Best Practices**: ESLint 9 + TypeScript-ESLint, strict type checking
+- **⚡ Interactive Setup**: Validates your cloud name and configures `.env` automatically
+- **🎨 Typed Components**: Includes a fully typed Upload Widget component
+- **🔌 MCP Support**: Built-in Model Context Protocol configuration for advanced AI integrations
+  
+## 🚀 Quick Start
+
+Ensure you have Node.js 18+ installed.
 
 ```bash
 npx create-cloudinary-react
 ```
+*(No installation required)*
+
+The CLI will guide you through:
+1.  **Project Name**: naming your new folder
+2.  **Cloud Name**: entering your [Cloudinary cloud name](https://console.cloudinary.com/app/home/dashboard)
+3.  **Upload Preset** (Optional): handling unsigned uploads
+4.  **AI Assistant**: generating custom rules for your tool of choice (Cursor, VS Code, etc.)
+
+## 🛠️ What's Included
 
-The CLI will prompt you for:
-- Project name
-- **Cloudinary cloud name** (found in your [dashboard](https://console.cloudinary.com/app/home/dashboard))
-- 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
+Your new project comes with:
 
-## Features
+- **`src/`**: specialized for Cloudinary workflows
+- **`src/components/UploadWidget.tsx`**: A ready-to-use, typed upload component
+- **`.env`**: Pre-filled with your Cloud Name (and Upload Preset if provided)
+- **`README.md`**: Custom instructions for your specific project
+- **AI Configuration**:
+    - `.cursorrules` / `.cursor/mcp.json` (for Cursor)
+    - `.github/copilot-instructions.md` (for Copilot)
+    - `.claude` / `claude.md` (for Claude)
 
-- ✅ Interactive setup with validation
-- ✅ Pre-configured Cloudinary React SDK
-- ✅ TypeScript + Vite + React 19
-- ✅ Typed Upload Widget component
-- ✅ Environment variables with VITE_ prefix
-- ✅ Multi-tool AI assistant support (Cursor, GitHub Copilot, Claude, and more)
-- ✅ MCP configuration for Cloudinary integration
-- ✅ ESLint + TypeScript configured
+## 🤖 AI Assistant Support
 
-## AI Assistant Support
+We believe AI is the future of development. This starter kit doesn't just give you code; it gives your AI context.
 
-During setup, you'll be asked which AI coding assistant(s) you're using. The CLI will generate the appropriate configuration files:
+During setup, select your AI tool to generate **Context Rules**. These rules teach your AI:
+- How to construct Cloudinary transformation URLs correctly
+- How to use the `@cloudinary/react` SDK components
+- Common pitfalls to avoid (like mixing up import paths)
+- How to handle upload widget events
 
-- ✅ **Cursor** → `.cursorrules` + `.cursor/mcp.json` (if selected)
-- ✅ **GitHub Copilot** → `.github/copilot-instructions.md`
-- ✅ **Claude Code (VS Code extension)** → `.claude`, `claude.md` + `.cursor/mcp.json` (if selected)
-- ✅ **Generic AI tools** → `AI_INSTRUCTIONS.md`, `PROMPT.md`
+**Supported Tools:**
+- ✅ **Cursor** (Rules + MCP)
+- ✅ **GitHub Copilot** (Instructions)
+- ✅ **Claude** (Project context + MCP)
+- ✅ **Generic LLMs** (System prompts provided)
 
-**MCP Configuration**: The `.cursor/mcp.json` file is automatically generated if you select Cursor or Claude, as it works with both tools.
+## 📋 Prerequisites
 
-These rules help AI assistants understand Cloudinary React SDK patterns, common errors, and best practices. The generated app also includes an "AI Prompts" section with ready-to-use suggestions for your AI assistant.
+- **Node.js 18+**
+- **Cloudinary Account**: [Sign up for free](https://cloudinary.com/users/register/free) if you haven't already.
 
-## Development
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1.  Fork the repository
+2.  Create your feature branch (`git checkout -b feature/amazing-feature`)
+3.  Commit your changes (`git commit -m 'feat: add some amazing feature'`)
+4.  Push to the branch (`git push origin feature/amazing-feature`)
+5.  Open a Pull Request
+
+## ⚙️ Development
 
 This project uses [Conventional Commits](https://www.conventionalcommits.org/) for version management and [semantic-release](https://github.com/semantic-release/semantic-release) for automated releases.
 
@@ -79,3 +121,6 @@ Releases are triggered manually via GitHub Actions workflow. The workflow uses n
 - `perf`: Performance improvements
 - `chore`: Other changes
 
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

package/cli.js

@@ -141,7 +141,7 @@ async function main() {
         choices: [
           { name: 'Cursor', value: 'cursor' },
           { name: 'GitHub Copilot', value: 'copilot' },
-          { name: 'Claude Code (VS Code extension)', value: 'claude' },
+          { name: 'Claude Code', value: 'claude' },
           { name: 'Other / Generic AI tools', value: 'generic' },
         ],
         default: ['cursor'],
@@ -262,18 +262,21 @@ async function main() {
       writeFileSync(join(projectPath, 'PROMPT.md'), aiRulesContent);
     }
 
-    // Generate MCP configuration if using Cursor or Claude (MCP works with both)
-    if (aiTools.includes('cursor') || aiTools.includes('claude')) {
-      const mcpTemplatePath = join(TEMPLATES_DIR, '.cursor/mcp.json.template');
-      if (existsSync(mcpTemplatePath)) {
+    // Generate MCP configuration: Cursor uses .cursor/mcp.json, Claude Code uses .mcp.json in project root
+    const mcpTemplatePath = join(TEMPLATES_DIR, '.cursor/mcp.json.template');
+    if (existsSync(mcpTemplatePath)) {
+      const mcpContent = replaceTemplate(
+        readFileSync(mcpTemplatePath, 'utf-8'),
+        templateVars
+      );
+      if (aiTools.includes('cursor')) {
         const cursorDir = join(projectPath, '.cursor');
         mkdirSync(cursorDir, { recursive: true });
-        const mcpContent = replaceTemplate(
-          readFileSync(mcpTemplatePath, 'utf-8'),
-          templateVars
-        );
         writeFileSync(join(cursorDir, 'mcp.json'), mcpContent);
       }
+      if (aiTools.includes('claude')) {
+        writeFileSync(join(projectPath, '.mcp.json'), mcpContent);
+      }
     }
   }
 
@@ -291,9 +294,8 @@ async function main() {
     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'));
-    }
+    if (aiTools.includes('cursor')) console.log(chalk.gray('   • MCP (Cursor): .cursor/mcp.json'));
+    if (aiTools.includes('claude')) console.log(chalk.gray('   • MCP (Claude Code): .mcp.json'));
     console.log('');
   }
 

package/package.json

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