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

> Discover how Quick Starter buttons in Open-Generative-AI inject pre-written prompts into the textarea. Learn about the data-prompt attribute and auto-expansion functionality for a seamless user experience.

- Repository: [Anil Chandra Naidu Matcha/Open-Generative-AI](https://github.com/Anil-matcha/Open-Generative-AI)
- Tags: how-to-guide
- Published: 2026-04-24

---

**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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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:

```html
<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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/components/ImageStudio.js) handles responsive height calculations using `window.innerWidth` to determine the appropriate maximum:

```javascript
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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/lib/promptUtils.js):

```javascript
// 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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/src/lib/promptUtils.js) with `label` and `prompt` properties. The [`ImageStudio.js`](https://github.com/Anil-matcha/Open-Generative-AI/blob/main/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.