How Quick Starter Buttons Populate the Prompt Textarea in Open-Generative-AI

Quick Starter buttons inject pre-written prompts into the main textarea by reading a data-prompt attribute on click, writing the value to the textarea element, auto-expanding the field to fit the content, and closing the tools panel.

The Quick Starter feature in the Open-Generative-AI repository provides one-click prompt insertion for the image generation workflow. This functionality bridges the prompt library and the input interface, allowing users to instantly populate the textarea with curated suggestions rather than typing complex prompts manually.

The Quick Prompts Data Source

The prompt suggestions live in src/lib/promptUtils.js as the exported constant QUICK_PROMPTS. This array contains objects pairing human-readable labels with complete prompt strings designed for specific generation styles.

Each entry follows a simple structure containing a label for the button text and a prompt string containing the full generation instructions. When the Image Studio component initializes, it imports this array to generate the corresponding UI elements.

Rendering the Button Grid with Data Attributes

Inside src/components/ImageStudio.js, the component maps over QUICK_PROMPTS to render a grid of interactive buttons. Every button receives two critical properties:

• The CSS class quick-starter-btn for styling and selection
• A data-prompt attribute storing the full prompt text

This markup pattern allows the JavaScript to access the prompt text through the DOM dataset API rather than hardcoding values in the click handler:

<button class="quick-starter-btn …"
        data-prompt="Professional portrait photograph, shallow depth of field, soft studio lighting, 85mm lens">
    Portrait
</button>

The buttons render within the tools panel, which serves as a modal overlay for prompt assistance features.

The Click Handler Logic

After the tools panel inserts into the DOM, the script selects all elements matching .quick-starter-btn and attaches an onclick listener to each. When triggered, the handler executes a four-step update sequence:

1. Extract the prompt from btn.dataset.prompt
2. Populate the textarea by setting textarea.value = prompt
3. Auto-expand the height by resetting to 'auto', then capping at 150px on mobile or 250px on desktop to ensure the text remains visible without overwhelming the interface
4. Dismiss the panel by setting showToolsPanel = false and adding the 'hidden' class to the tools panel container

The implementation in src/components/ImageStudio.js handles responsive height calculations using window.innerWidth to determine the appropriate maximum:

quickStarterBtns.forEach(btn => {
    btn.onclick = () => {
        const prompt = btn.dataset.prompt;
        textarea.value = prompt;
        textarea.style.height = 'auto';
        const maxHeight = window.innerWidth < 768 ? 150 : 250;
        textarea.style.height = Math.min(textarea.scrollHeight, maxHeight) + 'px';
        showToolsPanel = false;
        toolsPanel.classList.add('hidden');
    };
});

This approach ensures the textarea grows to accommodate multi-line prompts while respecting viewport constraints.

Extending the Quick Starters

You can add custom prompt buttons without modifying the component logic. Simply append new objects to the QUICK_PROMPTS array in src/lib/promptUtils.js:

// src/lib/promptUtils.js
export const QUICK_PROMPTS = [
  // existing entries …
  { label: 'Space', prompt: 'Stunning deep‑space scene, nebulae, star field, ultrarealistic' },
];

The mapping logic in ImageStudio.js automatically renders the new button with the appropriate data-prompt attribute, and the existing click handler will populate the textarea with your custom text.

Summary

• Data source: The QUICK_PROMPTS array in src/lib/promptUtils.js stores labels and prompt text for all Quick Starter buttons.
• DOM structure: Buttons use the quick-starter-btn class and store full prompts in data-prompt attributes.
• Population mechanism: Click handlers read dataset.prompt, write to the textarea value, and trigger auto-resize logic.
• Responsive behavior: Textareas expand to fit content up to 150px on mobile devices and 250px on desktop viewports.
• Panel management: Clicking a Quick Starter automatically hides the tools panel to return focus to the generation interface.

Frequently Asked Questions

Where are the Quick Starter prompts defined?

The prompts are defined in src/lib/promptUtils.js within the QUICK_PROMPTS array. Each object contains a label property for the button text and a prompt property containing the full generation instructions that populate the textarea.

How does the textarea auto-resize when populated?

The click handler resets the textarea height to 'auto' to calculate the natural scroll height, then applies a capped value using Math.min(textarea.scrollHeight, maxHeight). The maximum height is 150 pixels for viewports under 768px width and 250 pixels for larger screens.

Can I add custom Quick Starter buttons?

Yes. Append new entries to the QUICK_PROMPTS array in src/lib/promptUtils.js with label and prompt properties. The ImageStudio.js component will automatically render the new button and wire up the click handler without requiring additional code changes.

What happens to the tools panel after clicking a button?

The panel closes immediately upon selection. The handler sets showToolsPanel = false and adds the 'hidden' CSS class to the tools panel element, returning the user to the main generation interface with the prompt ready for submission.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}