The fastest way to start building with Cloudinary and React.
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
- Your cloud name is in your dashboard
Beta Release - This is a beta version. We welcome feedback and bug reports!
Part of the Cloudinary Developers organization.
- 🚀 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
.envautomatically - 🎨 Typed Components: Includes a fully typed Upload Widget component
- 🔌 MCP Support: Built-in Model Context Protocol configuration for advanced AI integrations
Ensure you have Node.js 18+ installed.
npx create-cloudinary-react(No installation required)
The CLI will guide you through:
- Project Name: naming your new folder
- Cloud Name: entering your Cloudinary cloud name
- Upload Preset (Optional): handling unsigned uploads
- AI Assistant: generating custom rules for your tool of choice (Cursor, VS Code, etc.)
Your new project comes with:
src/: specialized for Cloudinary workflowssrc/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)
We believe AI is the future of development. This starter kit doesn't just give you code; it gives your AI context.
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/reactSDK components - Common pitfalls to avoid (like mixing up import paths)
- How to handle upload widget events
Supported Tools:
- ✅ Cursor (Rules + MCP)
- ✅ GitHub Copilot (Instructions)
- ✅ Claude (Project context + MCP)
- ✅ Generic LLMs (System prompts provided)
- Node.js 18+
- Cloudinary Account: Sign up for free if you haven't already.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project uses Conventional Commits for version management and semantic-release for automated releases.
Releases are triggered manually via GitHub Actions workflow. The workflow uses npm trusted publishing (OIDC) for secure package publishing. New versions are published to npm when the workflow runs without dry run.
Dry run (default): When you run the workflow, "Dry run only" is checked by default. This runs semantic-release in dry-run mode—no git push, no tags, no npm publish. Use this to verify the next version and release notes before doing a real release. To publish for real, run the workflow again and uncheck "Dry run only". Each real release creates a GitHub release, updates CHANGELOG, and publishes the new version to npm (when the version changes).
<type>(<scope>): <subject>
<body>
<footer>
Types:
feat: New featurefix: Bug fixdocs: Documentation changesrefactor: Code refactoringperf: Performance improvementschore: Other changes
This project is licensed under the MIT License - see the LICENSE file for details.