Components / Content Generation

AI Image Prompt Builder

A guided image prompt builder with style presets, aspect ratio selector, and negative prompt support.

Live Preview — ai-image-prompt-01

Image Prompt Engineer

Aspect Ratio
Lighting
// Generated Prompt
A photorealistic portrait of a futuristic city with glowing lights, shot on 35mm lens, highly detailed, 8k resolution --ar 16:9

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react lucide-react

Source Code

ai-image-prompt-01.tsx 
"use client";

import React, { useState } from "react";
import { Image as ImageIcon, Sparkles, Layout, Palette, Move } from "lucide-react";

export default function AIImagePrompt() {
    const [style, setStyle] = useState("Photorealistic");

    const styles = ["Photorealistic", "Digital Art", "Oil Painting", "Cyberpunk", "Minimalist"];

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-xl mx-auto overflow-hidden">
            <div className="flex items-center gap-2 mb-8">
                <ImageIcon className="h-4 w-4 text-emerald-500" />
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Image Prompt Engineer</h3>
            </div>

            <div className="space-y-8">
                <div>
                    <label className="text-[10px] font-black uppercase tracking-widest text-zinc-500 mb-4 block">Visual Style</label>
                    <div className="flex flex-wrap gap-2">
                        {styles.map((s) => (
                            <button
                                key={s}
                                onClick={() => setStyle(s)}
                                className={`px-3 py-1.5 rounded-full text-[11px] font-bold border transition-all ${style === s
                                        ? "bg-emerald-600 border-emerald-600 text-white"
                                        : "bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-500 hover:border-zinc-300"
                                    }`}
                            >
                                {s}
                            </button>
                        ))}
                    </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-4">
                        <div className="flex items-center gap-2 text-zinc-500">
                            <Layout className="h-3.5 w-3.5" />
                            <span className="text-[10px] font-bold uppercase tracking-widest">Aspect Ratio</span>
                        </div>
                        <div className="flex gap-2">
                            {["1:1", "16:9", "9:16"].map(r => (
                                <button key={r} className="flex-1 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-800 text-xs font-bold text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 transition-colors">
                                    {r}
                                </button>
                            ))}
                        </div>
                    </div>
                    <div className="space-y-4">
                        <div className="flex items-center gap-2 text-zinc-500">
                            <Palette className="h-3.5 w-3.5" />
                            <span className="text-[10px] font-bold uppercase tracking-widest">Lighting</span>
                        </div>
                        <button className="w-full py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-800 text-xs font-bold text-zinc-600 dark:text-zinc-400 flex items-center justify-center gap-2">
                            Cinematic Flare
                            <Move className="h-3 w-3" />
                        </button>
                    </div>
                </div>

                <div className="p-4 rounded-xl bg-zinc-900 text-zinc-300 font-mono text-xs leading-relaxed border border-zinc-800">
                    <span className="text-zinc-500 italic">// Generated Prompt</span><br />
                    A {style.toLowerCase()} portrait of a futuristic city with glowing lights, shot on 35mm lens, {style === "Photorealistic" ? "highly detailed, 8k resolution" : "stylized artistic textures"} --ar 16:9
                </div>
            </div>
        </div>
    );
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
AIImagePrompt() None

State Management

React state variables managed within this component.

Variable Initial Value
style "Photorealistic"

Variables

All variable declarations found in this component.

Name Kind Value
styles const ["Photorealistic", "Digital Art", "Oil Painting", "Cyberpunk", "Minimalist"]

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<ImageIcon> 1× Library lucide-react
<Layout> 1× Library lucide-react
<Move> 1× Library lucide-react
<Palette> 1× Library lucide-react
<br> 1× Native Native HTML
<button> 3× Native Native HTML
<div> 12× Native Native HTML
<h3> 1× Native Native HTML
<label> 1× Native Native HTML
<span> 3× Native Native HTML

Related Components

  • AI Text Generator — A text generation interface with tone selector, length control, and real-time AI-powered content creation.
  • AI Content Rewriter — A before/after content rewriter showing original text alongside AI-improved versions with diff highlighting.
  • AI Summarizer Card — A document summarization card with adjustable summary length, key points extraction, and bullet-point output.
  • AI Translation Panel — A translation panel with language detection, multi-language output, and side-by-side comparison view.
  • AI Code Generator — A code generation interface with language selector, framework presets, and syntax-highlighted output.
  • AI Email Composer — An AI-powered email composer with tone adjustment, template selection, and subject line generation.