ai prompt input model-selector suggestions ai prompt model selector suggestions pills ai prompt with model selector chat input with quick actions
AI Prompt With Model Selector
Fetch pattern JSON:
curl https://webspire.de/patterns/ai-prompt/with-model-selector.json with-model-selector.html
<section
class="ws-ai-prompt mx-auto max-w-2xl rounded-2xl border shadow-md"
style="
--ws-ai-prompt-bg: oklch(0.985 0.002 75);
--ws-ai-prompt-text: oklch(0.205 0.015 75);
--ws-ai-prompt-text-soft: oklch(0.556 0.01 75);
--ws-ai-prompt-border: oklch(0.885 0.008 75);
--ws-ai-prompt-accent: oklch(0.588 0.16 250);
--ws-ai-prompt-input-bg: oklch(0.97 0.003 75);
background: var(--ws-ai-prompt-bg);
color: var(--ws-ai-prompt-text);
border-color: var(--ws-ai-prompt-border);
"
>
<div class="flex flex-col gap-3 p-4">
<!-- Model selector -->
<div class="flex items-center justify-between">
<button
type="button"
class="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium transition hover:opacity-80"
style="
border-color: var(--ws-ai-prompt-border);
background: var(--ws-ai-prompt-input-bg);
color: var(--ws-ai-prompt-text);
"
aria-haspopup="listbox"
aria-label="Select AI model"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" style="color: var(--ws-ai-prompt-accent)">
<path d="M13 7H7v6h6V7z" />
<path fill-rule="evenodd" d="M7 2a1 1 0 012 0v1h2V2a1 1 0 112 0v1h2a2 2 0 012 2v2h1a1 1 0 110 2h-1v2h1a1 1 0 110 2h-1v2a2 2 0 01-2 2h-2v1a1 1 0 11-2 0v-1H9v1a1 1 0 11-2 0v-1H5a2 2 0 01-2-2v-2H2a1 1 0 110-2h1V9H2a1 1 0 010-2h1V5a2 2 0 012-2h2V2zM5 5h10v10H5V5z" clip-rule="evenodd" />
</svg>
Claude Sonnet 4
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" style="color: var(--ws-ai-prompt-text-soft)">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Quick-action suggestion pills -->
<div class="flex flex-wrap gap-2" role="group" aria-label="Quick actions">
<button
type="button"
class="rounded-full border px-3 py-1 text-xs font-medium transition hover:opacity-80"
style="
border-color: var(--ws-ai-prompt-border);
background: var(--ws-ai-prompt-input-bg);
color: var(--ws-ai-prompt-text-soft);
"
>
Summarize
</button>
<button
type="button"
class="rounded-full border px-3 py-1 text-xs font-medium transition hover:opacity-80"
style="
border-color: var(--ws-ai-prompt-border);
background: var(--ws-ai-prompt-input-bg);
color: var(--ws-ai-prompt-text-soft);
"
>
Translate
</button>
<button
type="button"
class="rounded-full border px-3 py-1 text-xs font-medium transition hover:opacity-80"
style="
border-color: var(--ws-ai-prompt-border);
background: var(--ws-ai-prompt-input-bg);
color: var(--ws-ai-prompt-text-soft);
"
>
Explain code
</button>
</div>
<!-- Input area -->
<form onsubmit="return false">
<label for="ai-prompt-model" class="sr-only">Enter your prompt</label>
<div
class="rounded-xl border transition focus-within:ring-2"
style="
border-color: var(--ws-ai-prompt-border);
background: var(--ws-ai-prompt-input-bg);
"
>
<textarea
id="ai-prompt-model"
rows="3"
placeholder="Ask anything..."
class="w-full resize-none bg-transparent px-4 pt-3 pb-2 text-sm outline-none"
style="color: var(--ws-ai-prompt-text)"
aria-label="Prompt input"
></textarea>
<div class="flex items-center justify-between px-4 pb-3">
<p class="text-xs" style="color: var(--ws-ai-prompt-text-soft)">
Press Enter to send
</p>
<button
type="submit"
class="flex h-8 w-8 items-center justify-center rounded-lg text-white transition hover:opacity-90"
style="background: var(--ws-ai-prompt-accent)"
aria-label="Send prompt"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a1 1 0 01-.707-.293l-7-7a1 1 0 011.414-1.414L9 14.586V3a1 1 0 112 0v11.586l5.293-5.293a1 1 0 011.414 1.414l-7 7A1 1 0 0110 18z" clip-rule="evenodd" transform="rotate(180 10 10)" />
</svg>
</button>
</div>
</div>
</form>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aipromptinputmodel-selectorsuggestions
Slots
| Name | Required | Description |
|---|---|---|
| model-selector | Yes | Model dropdown button showing current selection |
| suggestions | No | Quick-action suggestion pills for common prompts |
| input | Yes | Textarea input with send action |
Enhanced variant with model selector and quick-action pills. Extends the base prompt with a dropdown to choose an AI model and suggestion pills for common tasks like summarizing, translating, or explaining code.