# Prompt Enhance Button

Prompt Enhance Button [#prompt-enhance-button]

The **Prompt Enhance Button** is a one-click "enhance my prompt" control for a composer. It hands the user's draft to your rewrite backend via the `onEnhance` callback — optionally wired to [`useGenerateText()`](https://localmode.dev/docs/react) for a fully offline local rewrite — and applies the result. An optional few-shot example editor lets users teach the rewrite by example.

It is presentational + callback-driven; the rewrite runs on a local model in your app.

**When to use it:** a chat or generation composer where users want a quick, private way to sharpen a rough prompt.

Preview [#preview]

```tsx
'use client';

import { useState } from 'react';
import { useGenerateText } from '@localmode/react';
import { transformers } from '@localmode/transformers';
import { PromptEnhanceButton } from '@/components/prompt-enhance-button';

/**
 * Demo for PromptEnhanceButton, used by the docs live preview. The button hands
 * the draft to a real `useGenerateText` call backed by a small local model
 * (Qwen3 0.6B). The model downloads on the first enhance (Run-gated), then the
 * rewrite replaces the draft — entirely offline.
 */
export default function PromptEnhanceButtonDemo() {
  const [prompt, setPrompt] = useState('write about dogs');

  const { execute } = useGenerateText({
    model: transformers.languageModel('onnx-community/Qwen3-0.6B-ONNX'),
    maxTokens: 120,
    temperature: 0.7,
  });

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <textarea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        rows={3}
        className="w-full resize-none rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
        placeholder="Draft prompt…"
      />
      <PromptEnhanceButton
        draft={prompt}
        onApply={setPrompt}
        showExampleEditor
        onEnhance={async (draft) => {
          const result = await execute(
            `Rewrite the following prompt to be clearer, more specific, and well-structured. ` +
              `Return ONLY the improved prompt with no preamble.\n\nPrompt: ${draft}\n\nImproved prompt:`,
          );
          return result?.text.trim() ?? null;
        }}
      />
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/input-controls/prompt-enhance-button
```

Dependencies [#dependencies]

* **Data source:** runs the rewrite through the `onEnhance` callback you supply and applies it via `onApply` — works with any backend. Recommended LocalMode producer: `useGenerateText` (optional).
* `lucide-react` — icons

Files installed [#files-installed]

* `prompt-enhance-button.tsx` — the component
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**PromptEnhanceButton**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onEnhance` | `function` | — | **Required.** Enhance the given draft and resolve with the rewritten prompt. Wire this to a local generation call — e.g. `useGenerateText().execute(buildInstruction(draft))`. The `examples` are the current few-shot pairs (if the editor is enabled). |
| `draft` | `string` | — | **Required.** The current draft prompt to improve. |
| `onApply` | `function` | — | **Required.** Fired with the improved prompt when enhancement succeeds. |
| `showExampleEditor` | `boolean` | `false` | Show an inline few-shot example editor for interactive prompt tuning. |
| `label` | `string` | — | Button label. |
| `disabled` | `boolean` | — | Disable the control. |

Examples [#examples]

Enhance a draft locally [#enhance-a-draft-locally]

```tsx
import { useState } from 'react';
import { useGenerateText } from '@localmode/react';
import { transformers } from '@localmode/transformers';
import { PromptEnhanceButton } from '@/components/prompt-enhance-button';

export function Composer() {
  const [prompt, setPrompt] = useState('write about dogs');
  const { execute } = useGenerateText({
    model: transformers.languageModel('onnx-community/Qwen3-0.6B-ONNX'),
    maxTokens: 120,
  });

  return (
    <PromptEnhanceButton
      draft={prompt}
      onApply={setPrompt}
      onEnhance={async (draft) => {
        const r = await execute(
          `Rewrite this prompt to be clearer. Return only the improved prompt:\n${draft}`,
        );
        return r?.text.trim() ?? null;
      }}
    />
  );
}
```

With the few-shot editor [#with-the-few-shot-editor]

```tsx
<PromptEnhanceButton draft={prompt} onApply={setPrompt} onEnhance={enhance} showExampleEditor />
```

Customization [#customization]

The button surfaces its own loading + error state; you only supply `onEnhance` (returning the improved string) and `onApply`. The optional few-shot editor collects `draft → improved` pairs and passes them to `onEnhance` so you can include them in the local generation instruction. Everything is theme-driven via shadcn/ui CSS variables.