cta ai claude chatgpt perplexity gemini ask-ai discovery saas developer ask ai chatgpt claude perplexity gemini ai search product questions help visitors ask AI about the product AI assistant links ask ChatGPT about us
Ask AI CTA
Fetch pattern JSON:
curl https://webspire.de/patterns/cta/ask-ai.json ask-ai.html
<section class="ws-cta bg-[var(--ws-cta-bg)] py-16">
<div class="mx-auto max-w-3xl px-6 text-center">
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--ws-cta-text-soft)]">Have questions?</p>
<h2 class="mt-3 text-2xl font-bold tracking-tight text-[var(--ws-cta-text)] sm:text-3xl">Ask AI about [Product]</h2>
<p class="mt-3 text-[var(--ws-cta-text-soft)]">Get instant answers from the AI assistant of your choice.</p>
<div class="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-4">
<!-- Claude -->
<a
href="https://claude.ai/new?q=What+is+%5BProduct%5D+and+what+can+it+do%3F"
target="_blank"
rel="noopener"
class="group flex flex-col items-center gap-3 rounded-2xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] px-4 py-6 transition-all duration-200 hover:border-[oklch(65%_0.16_40)] hover:shadow-[0_0_0_1px_oklch(65%_0.16_40/0.3),0_4px_20px_oklch(65%_0.16_40/0.12)]"
>
<span class="flex h-10 w-10 items-center justify-center rounded-xl bg-[oklch(65%_0.16_40/0.12)] transition-colors group-hover:bg-[oklch(65%_0.16_40/0.18)]">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M12 2C9.5 2 7.5 3.5 6.5 5.5L3 14c-.5 1.5 0 3 1 4 .8.8 2 1 3 .5l1-.5c.5 1.5 2 2.5 3.5 2.5h2.5c1.5 0 3-1 3.5-2.5l1 .5c1 .5 2.2.3 3-.5 1-1 1.5-2.5 1-4L17.5 5.5C16.5 3.5 14.5 2 12 2Z" fill="oklch(65% 0.16 40)" opacity=".9"/>
<path d="M10 11.5c0-.8.7-1.5 1.5-1.5h1c.8 0 1.5.7 1.5 1.5v3c0 .8-.7 1.5-1.5 1.5h-1c-.8 0-1.5-.7-1.5-1.5v-3Z" fill="white" opacity=".9"/>
</svg>
</span>
<span class="text-sm font-semibold text-[var(--ws-cta-text)]">Claude</span>
<span class="text-[0.7rem] text-[var(--ws-cta-text-soft)]">by Anthropic</span>
</a>
<!-- ChatGPT -->
<a
href="https://chatgpt.com/?q=What+is+%5BProduct%5D+and+what+can+it+do%3F"
target="_blank"
rel="noopener"
class="group flex flex-col items-center gap-3 rounded-2xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] px-4 py-6 transition-all duration-200 hover:border-[oklch(62%_0.16_155)] hover:shadow-[0_0_0_1px_oklch(62%_0.16_155/0.3),0_4px_20px_oklch(62%_0.16_155/0.12)]"
>
<span class="flex h-10 w-10 items-center justify-center rounded-xl bg-[oklch(62%_0.16_155/0.12)] transition-colors group-hover:bg-[oklch(62%_0.16_155/0.18)]">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M22 12a10 10 0 0 0-1.5-5.3A10 10 0 0 0 5.5 4.2a10 10 0 0 0-3.4 5.3 10 10 0 0 0 1.5 9.1 10 10 0 0 0 8.4 4.5 10 10 0 0 0 8.5-4.5A10 10 0 0 0 22 12Z" fill="oklch(62% 0.16 155)" opacity=".15"/>
<path d="M15.5 7.5a1 1 0 0 0-1-1h-1.1A3.4 3.4 0 0 0 10 9.9v.1A3.4 3.4 0 0 0 8.5 13a3.4 3.4 0 0 0 3.4 3.4h.7a3.4 3.4 0 0 0 3.4-3.4V7.5Z" stroke="oklch(62% 0.16 155)" stroke-width="1.5" fill="none"/>
<circle cx="12" cy="12" r="1.5" fill="oklch(62% 0.16 155)"/>
</svg>
</span>
<span class="text-sm font-semibold text-[var(--ws-cta-text)]">ChatGPT</span>
<span class="text-[0.7rem] text-[var(--ws-cta-text-soft)]">by OpenAI</span>
</a>
<!-- Perplexity -->
<a
href="https://www.perplexity.ai/search?q=What+is+%5BProduct%5D+and+what+can+it+do%3F"
target="_blank"
rel="noopener"
class="group flex flex-col items-center gap-3 rounded-2xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] px-4 py-6 transition-all duration-200 hover:border-[oklch(62%_0.18_225)] hover:shadow-[0_0_0_1px_oklch(62%_0.18_225/0.3),0_4px_20px_oklch(62%_0.18_225/0.12)]"
>
<span class="flex h-10 w-10 items-center justify-center rounded-xl bg-[oklch(62%_0.18_225/0.12)] transition-colors group-hover:bg-[oklch(62%_0.18_225/0.18)]">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M12 3L4 8v8l8 5 8-5V8L12 3Z" stroke="oklch(62% 0.18 225)" stroke-width="1.5" fill="oklch(62% 0.18 225/0.12)"/>
<line x1="12" y1="3" x2="12" y2="21" stroke="oklch(62% 0.18 225)" stroke-width="1.5"/>
<line x1="4" y1="8" x2="20" y2="8" stroke="oklch(62% 0.18 225)" stroke-width="1.5"/>
<line x1="4" y1="16" x2="20" y2="16" stroke="oklch(62% 0.18 225)" stroke-width="1.5"/>
</svg>
</span>
<span class="text-sm font-semibold text-[var(--ws-cta-text)]">Perplexity</span>
<span class="text-[0.7rem] text-[var(--ws-cta-text-soft)]">AI Search</span>
</a>
<!-- Gemini -->
<a
href="https://gemini.google.com/app?q=What+is+%5BProduct%5D+and+what+can+it+do%3F"
target="_blank"
rel="noopener"
class="group flex flex-col items-center gap-3 rounded-2xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] px-4 py-6 transition-all duration-200 hover:border-[oklch(62%_0.18_280)] hover:shadow-[0_0_0_1px_oklch(62%_0.18_280/0.3),0_4px_20px_oklch(62%_0.18_280/0.12)]"
>
<span class="flex h-10 w-10 items-center justify-center rounded-xl bg-[oklch(62%_0.18_280/0.12)] transition-colors group-hover:bg-[oklch(62%_0.18_280/0.18)]">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M12 3c0 5-4 9-9 9 5 0 9 4 9 9 0-5 4-9 9-9-5 0-9-4-9-9Z" fill="oklch(62% 0.18 280)" opacity=".9"/>
</svg>
</span>
<span class="text-sm font-semibold text-[var(--ws-cta-text)]">Gemini</span>
<span class="text-[0.7rem] text-[var(--ws-cta-text-soft)]">by Google</span>
</a>
</div>
<p class="mt-6 text-xs text-[var(--ws-cta-text-soft)]">Replace <code class="rounded bg-[var(--ws-cta-border)] px-1 py-0.5 font-mono">[Product]</code> in each href with your product name.</p>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
ctaaiclaudechatgptperplexitygeminiask-aidiscoverysaasdeveloper
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Small label above the heading, e.g. "Have questions?" |
| heading | Yes | Main heading, typically "Ask AI about [Product]". |
| subtext | No | Supporting sentence below the heading. |
| ai-links | Yes | Grid of AI assistant link cards (Claude, ChatGPT, Perplexity, Gemini). |
A modern discovery pattern for AI-native and developer products. Instead of a FAQ, let visitors ask their questions directly in the AI assistant they already trust.
Each card links to a major AI assistant with a pre-formatted query like What is [Product] and what can it do? — replace [Product] in each href with your actual product name.
The per-card hover shadow uses that assistant’s brand hue (orange for Claude, teal for ChatGPT, blue for Perplexity, violet for Gemini) to subtly signal which service each card belongs to without relying on trademarked logos.