# AI Product Page

> An AI product page: a streaming assistant mockup with prompt chips, a capability bento, how it works, privacy, add-on pricing and an FAQ.

- Type: React template (Templates)
- Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add ai-page`
- Docs: https://wingo-ui.com/templates/ai-page

## Interaction

The hero holds a drawn Acme workspace with an Acme AI panel beside a doc. The first answer types itself out once when the mockup comes into view, with a light sweeping under the panel header. Pick a prompt chip (Summarize this doc, Draft a project plan, Find blockers, Write release notes; a scrollable row on phones) and the assistant thinks, then streams a new answer: bullet points, a plan table with owners, or task cards with Blocked and At risk pills. Type your own question in the composer and press Enter: words like plan, blockers or release pick the matching answer, anything else gets a workspace answer with sources; while it streams the send button turns into Stop. Under a finished answer, Insert into doc drops a summary callout into the doc and other actions confirm with Done; the copy button copies the answer. The capability cards link to their pages, and the Translate card's language pills switch the sample sentence. In How it works, Approve buttons toggle to Approved. The admin panel's switches flip, and the numbers count up once when they scroll in. In pricing, drag the seat slider (or use the arrow keys) and the monthly total rolls; Add Acme AI spins, then confirms with the trial details and Change seats. The FAQ opens one answer at a time. Reduced motion shows answers at once and keeps everything still.

## Installation

```bash
npx wingo-ui@latest add ai-page
```

Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add @wingo-ui/ai-page` (needs the @wingo-ui registry with your API key in components.json)

Files:

- `components/templates/ai-page.tsx`
- `components/templates/ai-page-data.ts`

npm dependencies: `npm i motion lucide-react`

Wingo UI dependencies (installed automatically):

- [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md))
- [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md))
- [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md))
- [Hero Section](https://wingo-ui.com/components/hero-section) ([Markdown](https://wingo-ui.com/components/hero-section.md))
- [Logo Cloud](https://wingo-ui.com/components/logo-cloud) ([Markdown](https://wingo-ui.com/components/logo-cloud.md))
- [FAQ Section](https://wingo-ui.com/components/faq-section) ([Markdown](https://wingo-ui.com/components/faq-section.md))
- [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md))
- [Animated Counter](https://wingo-ui.com/components/animated-counter) ([Markdown](https://wingo-ui.com/components/animated-counter.md))
- [Avatar](https://wingo-ui.com/components/avatar) ([Markdown](https://wingo-ui.com/components/avatar.md))
- [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md))
- [Slider](https://wingo-ui.com/components/slider) ([Markdown](https://wingo-ui.com/components/slider.md))
- [Switch](https://wingo-ui.com/components/switch) ([Markdown](https://wingo-ui.com/components/switch.md))
- [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md))
- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

```tsx
// app/(marketing)/ai/page.tsx
"use client"

import Link from "next/link"
import { AiPage } from "@/components/templates/ai-page"

export default function AiRoute() {
  return (
    <AiPage
      linkComponent={Link}
      onAddAi={async (seats) => {
        const response = await fetch("/api/billing/add-ons", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ addOn: "ai", seats }),
        })
        if (!response.ok) throw new Error("Could not add Acme AI")
      }}
    />
  )
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `design?` | `"classic" \| "bold" \| "minimal"` | `"classic"` | The whole page's look. classic: the knobs below, a soft glow and dot field behind a centered hero, raised cards, gray bands; bold: a pill header, huge start-aligned heavy type on a grid, a deeper mockup shadow, flat tiles, an inverted numbers band and quote, FAQ cards, a scene band and a wordmark footer; minimal: a transparent header, no glow, an outlined mockup and cards, no gray bands, a ghost FAQ, a plain closing band and a simple footer. The *Props overrides still win. |
| `defaultPrompt?` | `string` | `"summarize"` | The id of the prompt answered in the mockup on load. |
| `defaultSeats?` | `number` | `10` | Where the add-on's seat slider starts (1 to 100). |
| `streaming?` | `boolean` | `true` | Answers think for a moment, then type out word by word; false shows them at once. |
| `onPromptChange?` | `(id: string) => void` |  | Called with the prompt id when a chip is picked. |
| `onAsk?` | `(question: string) => (AiAnswer \| Promise<AiAnswer>)` |  | Answers a typed question (a promise keeps the assistant thinking). Without it, a prompt whose keywords match answers, else a workspace answer from aiPageFallbackAnswer. |
| `onAddAi?` | `(seats: number) => (void \| Promise<unknown>)` |  | Add Acme AI with the slider's seat count; a promise keeps the button loading, a rejection shows labels.addFailed. Without it the page waits 900 ms and confirms. |
| `ctaVariant?` | `"inverted" \| "soft" \| "split"` | `"inverted"` | The closing band: a solid band, a gray band, or copy beside the actions. Applies to the classic design. |
| `glow?` | `boolean` | `true` | The soft light and dot field behind the hero, in the tone. Applies to the classic design. |
| `alternate?` | `boolean` | `true` | Gray bands on every other section. Applies to the classic and bold designs. |
| `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The glow, the active chip, the assistant's accents, icon tiles, checks and the announcement badge. |
| `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The hero's Try Acme AI free, Add Acme AI, the closing band and Get started in the header. |
| `prompts?` | `AiPrompt[]` | `"AI_PAGE_PROMPTS"` | { id, label, icon?, prompt, thinking?, keywords?, answer } chips over the mockup; an answer is { blocks, sources?, action?, insert? } with text, heading, bullets, table and tasks blocks. |
| `doc?` | `AiDoc` | `"AI_PAGE_DOC"` | The drawn app beside the assistant: workspace, sidebar, the doc's title, goal, milestones and notes. |
| `capabilities?` | `AiCapability[]` | `"AI_PAGE_CAPABILITIES"` | { id, title, description, icon?, visual?, href? } bento cards; visual picks a drawing (write, summarize, automate, ask, translate). |
| `steps?` | `AiStep[]` | `"AI_PAGE_STEPS"` | { id, kind, kicker, title, description, icon?, details } How it works cards; kind draws sources, a reasoning checklist or actions to approve. |
| `trustPoints?` | `AiTrustPoint[]` | `"AI_PAGE_TRUST_POINTS"` | { title, description, icon? } privacy promises. |
| `trustStats?` | `AiTrustStat[]` | `"AI_PAGE_TRUST_STATS"` | { value, decimals?, prefix?, suffix?, label } numbers that count up. |
| `adminSettings?` | `AiAdminSetting[]` | `"AI_PAGE_ADMIN_SETTINGS"` | { id, label, description, defaultChecked? } switches in the drawn admin panel; an empty array hides it. |
| `addOn?` | `AiAddOn` | `"AI_PAGE_ADDON"` | { name, price, monthlyPrice, description, features }: the add-on card with the seat calculator. |
| `business?` | `AiBundlePlan` | `"AI_PAGE_BUSINESS"` | { name, price, description, features, href }: the inverted plan that includes Acme AI. |
| `quote?` | `AiQuote` | `"AI_PAGE_QUOTE"` | { quote, name, role, company, avatar?, href?, metrics? }: the customer quote and its results. |
| `faq?` | `FaqItem[]` | `"AI_PAGE_FAQ"` | Questions of the FAQ (FaqSection items). |
| `logos?` | `LogoCloudItem[]` | `"AI_PAGE_LOGOS"` | Customer wordmarks under the hero. |
| `hrefs?` | `Partial<AiPageHrefs>` | `"DEFAULT_AI_PAGE_HREFS"` | { primary, secondary, announcement, privacy, cta, ctaSecondary }: where the hero, privacy and closing links go. |
| `labels?` | `Partial<AiPageLabels>` | `"DEFAULT_AI_PAGE_LABELS"` | Every visible string; billedYearly, seatsValue and addedDescription are functions. |
| `showLogos?` | `boolean` | `true` | The customer logos under the hero. |
| `showCapabilities?` | `boolean` | `true` | The capability bento. |
| `showSteps?` | `boolean` | `true` | How it works. |
| `showTrust?` | `boolean` | `true` | The privacy promises, admin panel and numbers. |
| `showQuote?` | `boolean` | `true` | The customer quote. |
| `showPricing?` | `boolean` | `true` | The add-on and Business cards. |
| `showFaq?` | `boolean` | `true` | The FAQ. |
| `showCta?` | `boolean` | `true` | The closing band. |
| `header?` | `boolean` | `true` | The marketing header; off inside a site layout. |
| `footer?` | `boolean` | `true` | The marketing footer. |
| `headerProps?` | `Partial<MarketingHeaderProps>` |  | Passed to MarketingHeader. |
| `footerProps?` | `Partial<MarketingFooterProps>` |  | Passed to MarketingFooter. |
| `logosProps?` | `Partial<LogoCloudProps>` |  | Passed to LogoCloud, spread last. |
| `faqProps?` | `Partial<FaqSectionProps>` |  | Passed to FaqSection, spread last. |
| `ctaProps?` | `Partial<CtaSectionProps>` |  | Passed to CtaSection, spread last. |
| `animateIn?` | `boolean` | `true` | The hero rises in on mount, the first answer streams once and the numbers count up; off in thumbnails and under reduced motion. |
| `locale?` | `string` | `"en-US"` | Intl locale for prices and numbers. |
| `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `"<a>"` | The router link for the header, footer and inner links (next/link in an app). |
| `className?` | `string` |  | Classes for the root. |
| `classNames?` | `Partial<Record<AiPageSlot, string>>` |  | Classes for header, hero, playground, logos, capabilities, steps, trust, quote, pricing, faq, cta and footer. |

## Parts

### AI_PAGE_SAMPLE (constant)

All the sample content in one object: prompts, doc, capabilities, steps, trustPoints, trustStats, adminSettings, addOn, business, quote, faq and logos.

### AI_PAGE_PROMPTS (constant)

Four prompts with their answers: a summary, a plan table, blocker cards and release notes.

### AI_PAGE_DOC (constant)

The Acme 3.0 launch plan doc and the Northwind sidebar.

### AI_PAGE_CAPABILITIES (constant)

Write, Summarize, Automate, Ask your workspace and Translate.

### AI_PAGE_STEPS (constant)

Context, Reasoning and Action.

### AI_PAGE_TRUST_POINTS (constant)

Four privacy promises.

### AI_PAGE_TRUST_STATS (constant)

0% used for training, 99.95% uptime, 4.2 hrs saved, 12,000+ teams.

### AI_PAGE_ADMIN_SETTINGS (constant)

Three admin switches.

### AI_PAGE_ADDON (constant)

The $8 add-on ($10 monthly) and its features.

### AI_PAGE_BUSINESS (constant)

The $24 Business plan with Acme AI included.

### AI_PAGE_QUOTE (constant)

Priya Shah, Head of Operations at Stark Logistics, with three results.

### AI_PAGE_FAQ (constant)

Six questions about training, models, permissions, price, admin controls and languages.

### AI_PAGE_LOGOS (constant)

The customer wordmarks (LOGO_CLOUD_SAMPLE).

### aiPageFallbackAnswer (function)

(question: string) => AiAnswer: the workspace answer for a typed question that matches no prompt.

### DEFAULT_AI_PAGE_LABELS (constant)

The English strings.

### DEFAULT_AI_PAGE_HREFS (constant)

Where the hero, privacy and closing links go.

### AI_PAGE_DESIGNS (constant)

The design names, classic first: ["classic", "bold", "minimal"].

### AiPageDesign (type)

"classic" | "bold" | "minimal".

### AiPageProps (type)

Props of AiPage.

### AiPageLabels (type)

Every visible string.

### AiPageHrefs (type)

{ primary, secondary, announcement, privacy, cta, ctaSecondary }.

### AiPageSlot (type)

The classNames keys, from header to footer.

### AiPrompt (type)

{ id, label, icon?, prompt, thinking?, keywords?, answer }: a prompt chip and its answer.

### AiAnswer (type)

{ blocks, sources?, action?, insert? }: what the assistant says.

### AiAnswerBlock (type)

One piece of an answer: text, heading, bullets, table ({ columns, rows }) or tasks.

### AiAnswerTask (type)

{ title, owner, note, status, tone }: a task card in an answer.

### AiDoc (type)

The drawn app's sidebar and doc.

### AiCapability (type)

One bento card.

### AiCapabilityVisual (type)

"write" | "summarize" | "automate" | "ask" | "translate".

### AiStep (type)

One How it works card.

### AiStepKind (type)

"sources" | "reasoning" | "actions": the drawing inside a step.

### AiTrustPoint (type)

{ title, description, icon? }.

### AiTrustStat (type)

{ value, decimals?, prefix?, suffix?, label }.

### AiAdminSetting (type)

{ id, label, description, defaultChecked? }.

### AiAddOn (type)

{ name, price, monthlyPrice, description, features }.

### AiBundlePlan (type)

{ name, price, description, features, href }.

### AiQuote (type)

{ quote, name, role, company, avatar?, href?, metrics? }.

## Examples

- **Bold design**: design="bold": huge start-aligned type on a grid, a deeper mockup shadow, flat capability tiles, an inverted numbers band and an inverted quote.
- **Minimal design**: design="minimal": a transparent header, no glow, an outlined mockup and cards, no gray bands and a simple footer.
- **Brand accents, opening on blockers**: tone and ctaTone brand: the glow, the assistant and Add Acme AI turn orange, and the mockup opens on Find blockers.
- **Inside a site layout, no streaming**: No header or footer, answers appear at once, without logos or the quote, and 25 seats on the slider.
- **When adding fails**: onAddAi rejects: after the spinner the add-on card keeps the seats and shows the error above Add Acme AI.

## See also

- [Feature Page](https://wingo-ui.com/templates/feature-page) ([Markdown](https://wingo-ui.com/templates/feature-page.md))
- [Landing Page](https://wingo-ui.com/templates/landing-page) ([Markdown](https://wingo-ui.com/templates/landing-page.md))
- [AI Chat Page](https://wingo-ui.com/components/ai-chat-page) ([Markdown](https://wingo-ui.com/components/ai-chat-page.md))
- [Pricing Page](https://wingo-ui.com/components/pricing-page) ([Markdown](https://wingo-ui.com/components/pricing-page.md))
- [Hero Section](https://wingo-ui.com/components/hero-section) ([Markdown](https://wingo-ui.com/components/hero-section.md))

---

Canonical: https://wingo-ui.com/templates/ai-page
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt