DALL-E Clone

A web application that uses OpenAI's DALL-E API to generate images from textual descriptions.


This is a web application that uses OpenAI's DALL-E API to generate images from textual descriptions.


DALL-E-Clone is a web application built using React.js that utilizes OpenAI's DALL-E API to generate images from textual descriptions. The application is designed to showcase the power of OpenAI's DALL-E API and how it can be used to create stunning images from textual inputs.

Getting Started

To get started with DALL-E-Clone, simply visit the web application and enter a textual description. DALL-E-Clone will use the DALL-E API to generate an image that matches the description. No additional setup or installation is required.


Want to test on your local machine?

  1. Clone the repository to your local machine

  2. Install the necessary dependencies by running the following command in the root directory:

npm install

  1. Start the server by running the following command:

npm start

  1. To build the client for production, run the following command:

npm run build

  1. To run the client in development mode, run the following command:

npm run dev

Environmental Variables and API Key Config

This project relies on certain environment variables and API keys to function properly. Follow the steps below to set them up:

Step 1: Create a .env file

Create a .env file in the root directory of the project. This file will store your environment variables.

Step 2: Obtain the OpenAI API Key

Visit the OpenAI website and sign up for an account if you don't have one already. Once logged in, navigate to the API keys section of your account dashboard.

Click on the "Create API Key" button and copy the generated key.

Step 3: Add API Key and Other Variables to the .env File


Replace <your_openai_api_key> with the API key you obtained in Step 2, and <your_mongodb_url> with your MongoDB connection URL.

Step 4: (Optional) Obtain the Cloudinary API Key and Credentials

  1. Visit the Cloudinary website and sign up for an account if you don't have one already.
  2. Once logged in, navigate to the Dashboard and locate the "Account Details" section.
  3. Copy the "API Key", "API Secret", and "Cloud name" from this section.
  4. Add them to your .env file

Step 5: Load Enviornment Variables

Ensure that your application loads the environment variables from the .env file. You can use packages like dotenv to achieve this. In your project's entry file, add the following line:


After completing these steps, your project should be configured with the necessary environment variables and API keys. Remember to include the .env file in your .gitignore file to prevent it from being committed to your repository.


  • Generates high-quality images from textual descriptions using OpenAI's DALL-E API
  • Supports a wide range of textual inputs, from simple phrases to complex sentences and even paragraphs
  • Offers a flexible and customizable interface that can be easily adapted to different use cases
  • Provides an intuitive and user-friendly design for generating images from textual descriptions
  • Uses Tailwind CSS for easy and responsive styling

Code Snippets

DALL-E API Request

When a client sends a request to this route with the image description (or prompt) in the request body, the server makes a call to the DALL-E API, receives the generated image in base64 format, and sends it back to the client in the response.

router.route('/').post(async (req,res) => {
        const { prompt } = req.body;
        const aiResponse = await openai.createImage({
            n: 1,
            size: '1024x1024',
            response_format: 'b64_json',
        const image = aiResponse.data.data[0].b64_json;
        res.status(200).json({ photo: image });
    } catch (error) {

Image Generation Function

The generateImage function is responsible for generating an image using DALL-E based on a provided textual prompt.

const generateImage = async () => {
  if (form.prompt) {
    try {
      const response = await fetch(
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          body: JSON.stringify({
            prompt: form.prompt,
      const data = await response.json();
      setForm({ ...form, photo: `data:image/jpeg;base64,${data.photo}` });
    } catch (err) {
    } finally {
  } else {
    alert("Please provide proper prompt");

TailWindCSS Styling

This snippet demonstrates how to style the image generated using Tailwind CSS.

const Card = ({ _id, name, prompt, photo }) => (
  <div className="rounded-xl group relative shadow-card hover:shadow-cardhover card">
      className="w-full h-auto object-cover rounded-xl"
    <div className="group-hover:flex flex-col max-h-[94.5%] hidden absolute bottom-0 left-0 right-0 bg-[#10131f] m-2 p-4 rounded-md">
      <p className="text-white text-sm overflow-y-auto prompt">{prompt}</p>
      <div className="mt-5 flex justify-between items-center gap-2">
        <div className="flex items-center gap-2">
          <div className="w-7 h-7 rounded-full object-cover bg-green-700 flex justify-center items-center text-white text-xs font-bold">
          <p className="text-white text-sm">{name}</p>
          onClick={() => downloadImage(_id, photo)}
          className="outline-none bg-transparent border-none"
            className="w-6 h-6 object-contain invert"

Tech Stack

This project is built using the following technologies:

  • MongoDB: Used as the NoSQL database to store image and user-generated data.
  • Express.js: Provides the backend server and API endpoints for fetching and generating images.
  • React.js: Utilized for building the frontend user interface and handling user interactions.
  • Node.js: Serves as the runtime environment for the Express.js backend server.
  • OpenAI's DALL-E API: Integrated to generate images based on user prompts.
  • Tailwind CSS: Applied as the utility-first CSS framework for styling the frontend components.
  • Cloudinary: (Optional) Can be used for managing and serving the generated images.
  • Vite: Employs next-generation frontend tooling to enhance development experience and optimize production builds.