To get the most out of this blog post, you\u2019ll need:<\/p>\n\n\n\n
- \n
- A <\/a>free Cloudinary account<\/a>.<\/li>\n\n\n\n
- A ChatGPT Plus <\/a>a<\/a>ccount<\/a> to get access to DALL-E 3.<\/li>\n\n\n\n
- A basic understanding of Next.js and Typescript.<\/li>\n<\/ul>\n\n\n\n
Project Setup and Installation<\/h2>\n\n\n\n
With your Cloudinary account ready, bootstrap a Next.js app with the command below:\u00a0<\/p>\n\n\n
<code<\/span>><\/span>npx create-next-app@latest<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nYou\u2019ll receive prompts to set up the app. Select Typescript, Tailwind CSS, and App Router, as they\u2019re needed. Then, install the necessary dependencies with the following command:<\/p>\n\n\n
<code<\/span>><\/span>npm install cloudinary react-copy-to-clipboard @types\/react-copy-to-clipboard react-icons openai<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nThe packages installed perform the following:<\/p>\n\n\n\n
- \n
cloudinary<\/code>. Provides an interface to interact with Cloudinary.<\/li>\n\n\n\nreact-copy-to-clipboard<\/code>. Provides a React component that enables users to copy texts with a single click.<\/li>\n\n\n\n@types\/react-copy-to=clipboard<\/code>. This is a type definition file for the react-copy-to-clipboard package.<\/li>\n\n\n\nreact-icons<\/code>. Offers a collection of icons (like Font Awesome or Material UI) that can be easily integrated into your application.<\/li>\n\n\n\nopenai<\/code>. Interacts with the OpenAI API.<\/li>\n<\/ul>\n\n\n\nConfigure OpenAI API<\/strong><\/h2>\n\n\n\n
Once done, go to the next.config.js file in the project’s root directory and add this code snippet to allow Next.js to display images generated from DALL-E 3:<\/p>\n\n\n
\/** @type {import('next').NextConfig}<\/span> <\/span>*\/<\/span>\n\nconst<\/span> nextConfig = {\n\n\u00a0 images<\/span>: {\n\n\u00a0 \u00a0 formats<\/span>: [\"image\/avif\"<\/span>, \"image\/webp\"<\/span>],\n\n\u00a0 \u00a0 remotePatterns<\/span>: [\n\n\u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 protocol<\/span>: \"https\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 hostname<\/span>: \"oaidalleapiprodscus.blob.core.windows.net\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 ],\n\n\u00a0 },\n\n};\n\nexport<\/span> default<\/span> nextConfig;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThis prioritizes AVIF and WEBP formats for image optimization. It also allows Next.js to display images served from the Azure Blob Storage endpoint that OpenAI’s API uses.<\/p>\n\n\n\n
Running
npm run dev<\/code> should render your project at https:\/\/localhost:3000\/<\/a> in your browser.<\/p>\n\n\n\nGet Cloudinary Account and OpenAI API Credentials<\/h2>\n\n\n\n
- A ChatGPT Plus <\/a>a<\/a>ccount<\/a> to get access to DALL-E 3.<\/li>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_302,c_scale\/f_auto,q_auto\/v1726598986\/Web_Assets\/blog\/blog-Building-an-AI-Image-Manager-With-DALL-E-and-Cloudinary-1\/blog-Building-an-AI-Image-Manager-With-DALL-E-and-Cloudinary-1.png?_i=AA\")
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_511,c_scale\/f_auto,q_auto\/v1726598979\/Web_Assets\/blog\/blog-Building-an-AI-Image-Manager-With-DALL-E-and-Cloudinary-2\/blog-Building-an-AI-Image-Manager-With-DALL-E-and-Cloudinary-2.png?_i=AA\")
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_511,c_scale\/f_auto,q_auto\/v1726598976\/Web_Assets\/blog\/blog-Building-an-AI-Image-Manager-With-DALL-E-and-Cloudinary-3\/blog-Building-an-AI-Image-Manager-With-DALL-E-and-Cloudinary-3.png?_i=AA\")
<\/figure>\n\n\n\n