React Starter Kit (Beta)

The React Starter Kit gives you a fully functional React app with Cloudinary upload and delivery features out of the box. It also provides you with agentic tools to implement Cloudinary features with natural language in your IDE.

Use it as an AI-assisted playground to explore and learn how to use the React SDK, widgets, players, and more.

Prerequisites

• Node.js 18+. Install Node.js 18 or later from nodejs.org.
• A Cloudinary account. If you don't have one yet, you can quickly register for free.
• Your cloud name. You can copy your cloud name from your Console Dashboard.
• An unsigned upload preset (optional). If you want to include upload functionality in your app, you'll need an unsigned upload preset. Create one in the Console Upload Settings. Set the Signing mode to Unsigned.

Install

Install the React Starter Kit from npm:

The CLI will prompt you for:

• Project name
• Cloudinary cloud name (found in your Console 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.) so it can add local instruction files to help with AI-assisted coding
• Whether to install dependencies - if you select "no", you'll have to install them yourself using npm i, then run the dev server manually
• Whether to start dev server (if you selected "yes" to installing dependencies)

Run

If you select to start the dev server from the CLI prompt, your app will immediately be up and running locally (the terminal will tell you the location http://localhost:<port>).

If not, you can run it manually using:

Explore

Now you can see what the app looks like in the browser and explore the code behind it.

In the browser:

1. Try uploading an image (if you configured upload)
2. Take a look at the displayed image - it uses Cloudinary transformations to crop it to the right dimensions, keeping the important parts in view.
3. You'll see some suggestions of prompts to ask your AI assistant. Try clicking one to copy it, then paste it in your IDE's chat interface.

In the IDE:

1. Paste one of the suggested prompts, or try your own.
2. If the CLI installed the Cloudinary MCP servers, enable them and authenticate with your Cloudinary account. Then you'll be able to ask your AI assistant to interact with your account, for example, to create an upload preset if you don't have one yet.
3. Take a look at these files, which you may want to copy to your own projects:
   • src/cloudinary/config.ts - configures the Cloudinary instance
   • src/cloudinary/UploadWidget.tsx - configures the upload widget
   • src/App.tsx - renders the upload widget (if you've specified an upload preset in .env) using the UploadWidget component, and the transformed image using the AdvancedImage component
   • The AI assistant files for your coding assistant (see the list during installation)