AI Dialogs

Ready-to-use dialogs for AI text generation and AI image generation.

Generate Text with AI

Multi-option dialog: tone, length, language. Connect onGenerate to your AI API.

Generate Image with AI

Multi-image generator with style, aspect ratio and count options. Connect onGenerate to DALL-E, Stable Diffusion, etc.

Usage

How to wire up the onGenerate prop to a real AI API.

// Text dialog — connect to Claude / OpenAI
<GenerateTextDialog
  open={open}
  onOpenChange={setOpen}
  onInsert={(text) => setFieldValue(text)}
  onGenerate={async (prompt, { tone, length, language }) => {
    const res = await fetch("/api/ai/text", {
      method: "POST",
      body: JSON.stringify({ prompt, tone, length, language }),
    })
    const { text } = await res.json()
    return text
  }}
/>

// Image dialog — connect to DALL-E / Stable Diffusion
<GenerateImageDialog
  open={open}
  onOpenChange={setOpen}
  onSelect={(url) => setProductImage(url)}
  onGenerate={async (prompt, { style, ratio, count }) => {
    const res = await fetch("/api/ai/image", {
      method: "POST",
      body: JSON.stringify({ prompt, style, ratio, count }),
    })
    const { urls } = await res.json()
    return urls  // string[]
  }}
/>