AI features

Sections that show what AI does in a product, in six layouts: an assistant in the app, prompt to result, an agent working through steps, with and without AI, model choice with privacy and a live playground.

6 variants

Switch category

Assistant in the product

An assistant panel beside the app, the conversation plays in when it scrolls into view.

Open in Studio

Installv1.0.1

aiw add @ai-website/ai-features

Brings along utils, kit, icon, section, button

Usage

<AiFeatures variant="assistant" media={…} conversation={[{ role, text }]} suggestions={[…]} points={[…]} />

Source

Prompt to result

Example prompts type themselves, the result appears as a finished piece of work.

Open in Studio

Installv1.0.1

aiw add @ai-website/ai-features

Brings along utils, kit, icon, section, button

Usage

<AiFeatures variant="prompt-result" examples={[{ label, prompt, result }]} />

Source

Agent at work

An agent works through its steps one by one, the result opens at the end.

Open in Studio

Installv1.0.1

aiw add @ai-website/ai-features

Brings along utils, kit, icon, section, button

Usage

<AiFeatures variant="agent" task={{ goal, steps: [{ title, detail, icon }], result, time }} />

Source

With and without AI

The same job twice, each step as a bar, the saved share at the end.

Open in Studio

Installv1.0.1

aiw add @ai-website/ai-features

Brings along utils, kit, icon, section, button

Usage

<AiFeatures variant="comparison" without={[{ label, minutes }]} withAi={[{ label, minutes }]} />

Source

Model choice and privacy

Pick a model by speed and depth, the privacy promises stay in view.

Open in Studio

Installv1.0.1

aiw add @ai-website/ai-features

Brings along utils, kit, icon, section, button

Usage

<AiFeatures variant="models" models={[{ id, name, description, speed, quality, tag }]} privacy={[{ icon, title, description }]} />

Source

Live playground

Edit the text, pick a mode and watch the output write itself. The demo function runs in the browser.

Open in Studio

Installv1.0.1

aiw add @ai-website/ai-features

Brings along utils, kit, icon, section, button

Usage

<AiFeatures variant="playground" modes={[{ id, label, icon }]} sample="…" generate={(text, mode) => …} />

Source

Details

What AI features brings along, read from the registry and the source.

Area: Marketing
Variants: 6
Version: 1.0.1 · since 1.0.0
File: components/ui/ai-features.tsx
Brings along: utilskiticonsectionbutton
npm packages: None
Languages: English and German, 33 texts of its own
Studio: All 6 variants editable
In collections: AI product
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The AiFeaturesProps interface from components/ui/ai-features.tsx, with the comments from the code.

variantoptional
AiFeaturesVariant
assistantprompt-resultagentcomparisonmodelsplayground
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
actionsoptional
React.ReactNode
pointsoptional
string[]
Short points beside the visual
mediaoptional
React.ReactNode
assistant: the app behind the panel, the conversation and suggested questions
conversationoptional
AiMessage[]
suggestionsoptional
string[]
examplesoptional
AiExample[]
prompt-result
taskoptional
{ goal: string; steps: AiAgentStep[]; result: React.ReactNode; time?: string }
agent
withoutoptional
{ label: string; minutes: number }[]
comparison
withAioptional
{ label: string; minutes: number }[]
modelsoptional
AiModel[]
models: choices and privacy promises
privacyoptional
{ icon?: IconName; title: string; description?: string }[]
modesoptional
AiMode[]
playground: modes, the sample text and the function that writes the output
sampleoptional
string
generateoptional
(text: string, mode: string) => string

Built-in texts

AI features writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 33 texts

Key	English	German
assistant	English Assistant	German Assistent
ask	English Ask anything	German Frag etwas
send	English Send	German Senden
thinking	English Thinking	German Denkt nach
examples	English Examples	German Beispiele
result	English Result	German Ergebnis
prompt	English Prompt	German Auftrag
goal	English Goal	German Ziel
running	English Working	German Arbeitet
queued	English Queued	German Wartet
done	English Done	German Fertig
replay	English Run again	German Noch einmal
finished	English Finished in	German Fertig nach
steps	English steps	German Schritte
without	English Without AI	German Ohne KI
with	English With AI	German Mit KI
total	English Total	German Gesamt
saved	English saved	German gespart
minutes	English min	German Min.
model	English Model	German Modell
speed	English Speed	German Tempo
quality	English Depth	German Tiefe
privacy	English Privacy	German Datenschutz
input	English Your text	German Dein Text
output	English Output	German Ergebnis
generate	English Generate	German Erzeugen
generating	English Writing	German Schreibt
copy	English Copy	German Kopieren
copied	English Copied	German Kopiert
reset	English Reset text	German Text zurücksetzen
demo	English Runs in your browser, nothing is sent.	German Läuft in deinem Browser, nichts wird gesendet.
mode	English Mode	German Art
words	English words	German Wörter

Read from the source of the component.

AI features handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-busy, aria-checked, aria-controls, aria-label, aria-labelledby, aria-live and aria-selected, so screen readers announce purpose and state.
Uses the roles img, radio, radiogroup, tab, tablist and tabpanel.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 17 places in the code switch motion off then.

Frequent questions

How do I install AI features?

With aiw add @ai-website/ai-features. The command puts components/ui/ai-features.tsx into your project, the code is yours from then on. It brings along icon, section and button. It needs no further npm packages.

Which variants does AI features have?

6 variants, Assistant in the product, Prompt to result, Agent at work, With and without AI, Model choice and privacy and Live playground. You pick one with the variant prop, for example variant="prompt-result".

Can I translate the texts of AI features?

Yes. AI features carries 33 texts of its own in English and German, such as “Assistant”, “Ask anything” and “Send”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with AI features?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find AI features with aiw_components and install it with aiw_add @ai-website/ai-features. Name the variant in your prompt, for example variant="assistant", and the assistant writes your content straight into the props.

Can I adjust AI features without code?

Yes, in the Studio. All 6 variants are editable there, texts, lists and switches. The Studio writes the matching AiFeatures code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to AI features on a page.

AI features

Assistant in the product

Prompt to result

Agent at work

With and without AI

Model choice and privacy

Live playground

Details

Props

Built-in texts

Accessibility

Motion

Part of these collections

Part of these collections

Frequent questions

Similar components, Often combined with

Similar components

Often combined with