AI Product Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// 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

• designdefault "classic"
  "classic" | "bold" | "minimal"

  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.

• defaultPromptdefault "summarize"
  string

  The id of the prompt answered in the mockup on load.

• defaultSeatsdefault 10
  number

  Where the add-on's seat slider starts (1 to 100).

• streamingdefault true
  boolean

  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.

• ctaVariantdefault "inverted"
  "inverted" | "soft" | "split"

  The closing band: a solid band, a gray band, or copy beside the actions. Applies to the classic design.

• glowdefault true
  boolean

  The soft light and dot field behind the hero, in the tone. Applies to the classic design.

• alternatedefault true
  boolean

  Gray bands on every other section. Applies to the classic and bold designs.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The glow, the active chip, the assistant's accents, icon tiles, checks and the announcement badge.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The hero's Try Acme AI free, Add Acme AI, the closing band and Get started in the header.

• promptsdefault "AI_PAGE_PROMPTS"
  AiPrompt[]

  { 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.

• docdefault "AI_PAGE_DOC"
  AiDoc

  The drawn app beside the assistant: workspace, sidebar, the doc's title, goal, milestones and notes.

• capabilitiesdefault "AI_PAGE_CAPABILITIES"
  AiCapability[]

  { id, title, description, icon?, visual?, href? } bento cards; visual picks a drawing (write, summarize, automate, ask, translate).

• stepsdefault "AI_PAGE_STEPS"
  AiStep[]

  { id, kind, kicker, title, description, icon?, details } How it works cards; kind draws sources, a reasoning checklist or actions to approve.

• trustPointsdefault "AI_PAGE_TRUST_POINTS"
  AiTrustPoint[]

  { title, description, icon? } privacy promises.

• trustStatsdefault "AI_PAGE_TRUST_STATS"
  AiTrustStat[]

  { value, decimals?, prefix?, suffix?, label } numbers that count up.

• adminSettingsdefault "AI_PAGE_ADMIN_SETTINGS"
  AiAdminSetting[]

  { id, label, description, defaultChecked? } switches in the drawn admin panel; an empty array hides it.

• addOndefault "AI_PAGE_ADDON"
  AiAddOn

  { name, price, monthlyPrice, description, features }: the add-on card with the seat calculator.

• businessdefault "AI_PAGE_BUSINESS"
  AiBundlePlan

  { name, price, description, features, href }: the inverted plan that includes Acme AI.

• quotedefault "AI_PAGE_QUOTE"
  AiQuote

  { quote, name, role, company, avatar?, href?, metrics? }: the customer quote and its results.

• faqdefault "AI_PAGE_FAQ"
  FaqItem[]

  Questions of the FAQ (FaqSection items).

• logosdefault "AI_PAGE_LOGOS"
  LogoCloudItem[]

  Customer wordmarks under the hero.

• hrefsdefault "DEFAULT_AI_PAGE_HREFS"
  Partial<AiPageHrefs>

  { primary, secondary, announcement, privacy, cta, ctaSecondary }: where the hero, privacy and closing links go.

• labelsdefault "DEFAULT_AI_PAGE_LABELS"
  Partial<AiPageLabels>

  Every visible string; billedYearly, seatsValue and addedDescription are functions.

• showLogosdefault true
  boolean

  The customer logos under the hero.

• showCapabilitiesdefault true
  boolean

  The capability bento.

• showStepsdefault true
  boolean

  How it works.

• showTrustdefault true
  boolean

  The privacy promises, admin panel and numbers.

• showQuotedefault true
  boolean

  The customer quote.

• showPricingdefault true
  boolean

  The add-on and Business cards.

• showFaqdefault true
  boolean

  The FAQ.

• showCtadefault true
  boolean

  The closing band.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  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.

• animateIndefault true
  boolean

  The hero rises in on mount, the first answer streams once and the numbers count up; off in thumbnails and under reduced motion.

• localedefault "en-US"
  string

  Intl locale for prices and numbers.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  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