> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Srijan-D/DALLE3/llms.txt
> Use this file to discover all available pages before exploring further.

# Prompt suggestions

> Get creative AI-powered prompt ideas from ChatGPT to inspire your next image generation

VisionaryAI includes an intelligent prompt suggestion feature powered by GPT-3.5 Turbo. Instead of starting from a blank canvas, you can request AI-generated prompt ideas that are optimized for DALL-E 3.

## How prompt suggestions work

The suggestion system uses ChatGPT to generate creative, detailed prompts specifically designed for image generation.

<Steps>
  <Step title="Request a suggestion">
    When you first load VisionaryAI, a prompt suggestion automatically appears in the text area as placeholder text.
  </Step>

  <Step title="Review the suggestion">
    The suggestion includes details like artistic style, subject matter, and technical descriptors to help DALL-E 3 create high-quality images.
  </Step>

  <Step title="Use it or refresh">
    Click "Use suggestion" to generate an image from the AI-suggested prompt, or click "New suggestion" to get a different idea.
  </Step>
</Steps>

<Info>
  Suggestions are fetched on-demand using SWR (stale-while-revalidate), ensuring fresh ideas without unnecessary API calls.
</Info>

## User interface

The prompt input area includes three interactive buttons:

### Generate button

Use your own custom prompt to create an image:

* Located on the right side of the text area
* Activates when you type any text
* Turns violet with white text when enabled
* Disabled (grayed out) when the input is empty

```tsx components/PromptInput.tsx theme={null}
<button
  type="submit"
  className={`p-4 font-bold ${
    input
      ? "bg-violet-400 text-white transition-colors duration 200"
      : "text-gray-300 cursor-not-allowed"
  }`}
  disabled={!input}
>
  Generate
</button>
```

### Use suggestion button

Generate an image using the current AI suggestion:

* Always active (violet background)
* Sends the suggested prompt directly to DALL-E 3
* Saves you from manually copying the suggestion

```tsx components/PromptInput.tsx theme={null}
<button
  className="p-4 bg-violet-400 text-white transition-colors duration-200 font-bold disabled:bg-gray-400 disabled:cursor-not-allowed"
  type="button"
  onClick={() => submitPrompt(true)}
>
  Use suggestion
</button>
```

### New suggestion button

Fetch a fresh prompt idea from ChatGPT:

* White background with violet text
* Triggers a new API request to the suggestion endpoint
* Shows loading state while fetching

<Tip>
  Click "New suggestion" multiple times to explore different creative directions before generating an image.
</Tip>

## Suggestion display

The interface provides multiple ways to see the current suggestion:

### Placeholder text

When the input is empty, the suggestion appears as placeholder text:

```tsx components/PromptInput.tsx theme={null}
<textarea
  placeholder={
    (loading && "ChatGPT is thinking of a suggestion...") ||
    suggestion ||
    "Enter a prompt"
  }
/>
```

<Accordion title="Loading state">
  While fetching a new suggestion, the placeholder shows:

  ```
  ChatGPT is thinking of a suggestion...
  ```
</Accordion>

<Accordion title="Suggestion ready">
  Once loaded, the full suggestion text appears as placeholder text in the textarea.
</Accordion>

### Below-input display

When you start typing your own prompt, the suggestion moves below the input:

```tsx components/PromptInput.tsx theme={null}
{input && (
  <p className="italic pt-2 pl-2 font-light">
    Suggestion:{" "}
    <span className="text-violet-500">
      {loading ? "ChatGPT is thinking of a suggestion..." : suggestion}
    </span>
  </p>
)}
```

This lets you reference the AI suggestion while crafting your own prompt.

## What makes a good suggestion?

The suggestion system is optimized to generate prompts that work well with DALL-E 3:

### Style descriptors

Suggestions include specific artistic styles:

* Oil painting
* Watercolor
* Photo-realistic
* Abstract
* Modern
* Black and white

### Technical details

Suggestions often specify quality indicators:

* 4K resolution
* Highly detailed
* Professional quality
* Studio lighting

### Subject and composition

Each suggestion provides clear subject matter with compositional details to help DALL-E 3 create coherent images.

<Warning>
  Suggestions are generated by AI and may occasionally produce prompts that don't align with your creative vision. Feel free to modify them or request a new suggestion.
</Warning>

## Technical implementation

The suggestion feature uses several technologies working together:

### Frontend data fetching

VisionaryAI uses SWR for efficient data fetching:

```tsx components/PromptInput.tsx theme={null}
const {
  data: suggestion,
  error,
  isLoading,
  mutate,
  isValidating,
} = useSWR("/api/suggestion", fetchSuggestionFromChatGPT, {
  revalidateOnFocus: false,
});
```

<Info>
  `revalidateOnFocus: false` prevents unnecessary API calls when you switch browser tabs, reducing costs and improving performance.
</Info>

### API endpoint

The Next.js API route forwards requests to Azure:

```typescript app/api/suggestion/route.ts theme={null}
export async function GET(request: Request) {
  const response = await fetch(
    "https://ai-imagegenerator.azurewebsites.net/api/getChatGPTSuggestion?",
    {
      cache: "no-store",
    }
  );
  const textData = await response.text();

  return new Response(JSON.stringify(textData.trim()), {
    status: 200,
  });
}
```

### Azure Function with GPT-3.5

The Azure Function generates suggestions using OpenAI's completion API:

```javascript azure/src/functions/getChatGPTSuggestion.js theme={null}
const response = await openai.createCompletion({
    model: 'gpt-3.5-turbo-instruct',
    prompt: 'Write a random text prompt for DALL.E to generate an image, this prompt will be shown to the user, include details such as the genre and what type of painting it should be, options can include: oil painting, watercolor, photo-realistic, 4K, abstract, modern, black and white etc. Do not wrap the answer in quotes',
    max_tokens: 100,
    temperature: 0.9,
})
const responseText = response.data.choices[0].text;
```

<Accordion title="Why GPT-3.5 Turbo Instruct?">
  The `gpt-3.5-turbo-instruct` model is optimized for completion tasks and provides creative, varied responses. The high temperature (0.9) ensures diverse suggestions.
</Accordion>

<Accordion title="Token limit">
  Suggestions are capped at 100 tokens, providing enough detail without overwhelming users or wasting API quota.
</Accordion>

## Best practices

<Tabs>
  <Tab title="For exploration">
    Use the suggestion feature when:

    * You're new to AI image generation
    * You want to discover new artistic styles
    * You're experiencing creative block
    * You want to test DALL-E 3's capabilities
  </Tab>

  <Tab title="For precision">
    Write custom prompts when:

    * You have a specific vision in mind
    * You need consistency across multiple images
    * You're generating images for a particular project
    * The suggestions don't match your requirements
  </Tab>

  <Tab title="For learning">
    Study suggestions to learn:

    * How to structure effective prompts
    * What style descriptors work well
    * How to balance detail with clarity
    * Which technical terms improve quality
  </Tab>
</Tabs>

## Performance optimization

The suggestion system is designed for efficiency:

### Caching strategy

SWR caches suggestions in memory, so:

* Returning to the page shows the previous suggestion instantly
* Network requests only occur when explicitly requested
* The UI remains responsive during fetching

### Automatic revalidation disabled

By setting `revalidateOnFocus: false`, suggestions don't refresh when:

* You switch browser tabs
* You click back into the window
* The page regains focus

This prevents unnecessary API calls and associated costs.

<Tip>
  If you want a fresh suggestion after some time has passed, simply click the "New suggestion" button rather than waiting for automatic refresh.
</Tip>

## Next steps

<CardGroup cols={2}>
  <Card title="Image generation" icon="wand-magic-sparkles" href="/features/image-generation">
    Learn how to generate images from your prompts
  </Card>

  <Card title="Image gallery" icon="images" href="/features/image-gallery">
    Discover how to browse your generated artwork
  </Card>
</CardGroup>