You can also watch the YouTube video: [Next JS AI Image Generator with OpenAI](https://www.youtube.com/watch?v=X8sflfJm-CE) ### Creating The Project ```bash npx create-next-app@latest ``` ```bash What is your project named? nextjs-ai-image-generator Would you like to use TypeScript? No Would you like to use ESLint? No Would you like to use Tailwind CSS? Yes Would you like your code inside a `src/` directory? No Would you like to use App Router? (recommended) Yes Would you like to use Turbopack for `next dev`? Yes Would you like to customize the import alias (`@/*` by default)? No ``` ### Initializing ShadCN UI ```bash npx shadcn@latest init ``` ```bash npx shadcn@latest init -d ``` ### Installing Required ShadCN Components ```bash npx shadcn@latest add button card input skeleton ``` ### Installing Required Dependencies ```bash yarn add typewriter-effect openai ``` ### Creating AiImageBot Component Create `AiImageBot.jsx` in `components` folder: ```js "use client"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import Image from "next/image"; import { useState } from "react"; import { Skeleton } from "./ui/skeleton"; import Typewriter from "typewriter-effect"; const AiImageBot = () => { const [prompt, setPrompt] = useState(""); const [generatedImage, setGeneratedImage] = useState(""); const [loading, setLoading] = useState(false); const generateImage = async () => { try { setLoading(true); const response = await fetch("/api/ai-image", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ prompt, }), }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setGeneratedImage(data); } catch (error) { console.error("Error:", error); } finally { setLoading(false); setPrompt(""); } }; return (

{ typewriter .typeString("Write something to generate an image!") .start(); }} />

setPrompt(e.target.value)} />

{loading ? : null} {generatedImage ? ( AI Generated Image

) : undefined}

); }; export default AiImageBot; ``` ### Editing Home Page Edit `page.tsx` in `app` folder: ```js import AiImageBot from "@/components/AiImageBot"; export default function Home() { return ; } ``` ### Creating Ai Image Api Route Create `route.js` in `app/api/ai-image` folder: ```js import { NextResponse } from "next/server"; import OpenAI from "openai"; const openai = new OpenAI({ apiKey: "YOUR_API_KEY", }); export async function POST(request) { const body = await request.json(); const { prompt } = body; try { const response = await openai.images.generate({ prompt, n: 1, size: "1024x1024", }); const image = response.data[0].url; return NextResponse.json(image, { status: 200 }); } catch (error) { console.log("Error", error); return NextResponse.json( { error: "An error occurred, please try again later!" }, { status: 500 } ); } } ``` Now you able to generate images using our next js app. Don't forget to add image domain to `next.config.mjs` file: ```js /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "oaidalleapiprodscus.blob.core.windows.net", }, ], }, }; export default nextConfig; ```