Zum Inhalt springen
UI Kit
Accent

AI Features

Sektionen, die zeigen, was KI in einem Produkt leistet, in sechs Aufbauten: Assistent im Produkt, vom Auftrag zum Ergebnis, ein Agent bei der Arbeit, mit und ohne KI, Modellwahl mit Datenschutz und eine Live-Fläche.

6 Variants
Kategorie wechseln

KI-Funktionen

Assistent im Produkt

Ein Assistent neben der App, das Gespräch spielt sich ab, sobald es sichtbar wird.

Im Studio öffnen

Vom Auftrag zum Ergebnis

Beispielaufträge tippen sich selbst, das Ergebnis erscheint als fertige Arbeit.

Im Studio öffnen

Agent bei der Arbeit

Ein Agent arbeitet seine Schritte nacheinander ab, am Ende öffnet sich das Ergebnis.

Im Studio öffnen

Mit und ohne KI

Dieselbe Aufgabe zweimal, jeder Schritt als Balken, der gesparte Anteil am Ende.

Im Studio öffnen

Modellwahl und Datenschutz

Ein Modell nach Tempo und Tiefe wählen, die Datenschutz-Zusagen stehen daneben.

Im Studio öffnen

Live-Fläche

Text ändern, eine Art wählen und zusehen, wie das Ergebnis entsteht. Die Demo-Funktion läuft im Browser.

Im Studio öffnen

Details

Was KI-Funktionen mitbringt, aus Registry und Quellcode gelesen.

Bereich
Marketing
Variants
6
Version
1.0.1 · seit 1.0.0
Datei
components/ui/ai-features.tsx
Bringt mit
utilskiticonsectionbutton
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 33 eigene Texte
Studio
Alle 6 Variants bearbeitbar
In Sammlungen
KI-Produkt
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle AiFeaturesProps aus components/ui/ai-features.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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

Eingebaute Texte

Diese Texte schreibt KI-Funktionen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 33 Texte anzeigen
assistantEnglisch AssistantDeutsch Assistent
askEnglisch Ask anythingDeutsch Frag etwas
sendEnglisch SendDeutsch Senden
thinkingEnglisch ThinkingDeutsch Denkt nach
examplesEnglisch ExamplesDeutsch Beispiele
resultEnglisch ResultDeutsch Ergebnis
promptEnglisch PromptDeutsch Auftrag
goalEnglisch GoalDeutsch Ziel
runningEnglisch WorkingDeutsch Arbeitet
queuedEnglisch QueuedDeutsch Wartet
doneEnglisch DoneDeutsch Fertig
replayEnglisch Run againDeutsch Noch einmal
finishedEnglisch Finished inDeutsch Fertig nach
stepsEnglisch stepsDeutsch Schritte
withoutEnglisch Without AIDeutsch Ohne KI
withEnglisch With AIDeutsch Mit KI
totalEnglisch TotalDeutsch Gesamt
savedEnglisch savedDeutsch gespart
minutesEnglisch minDeutsch Min.
modelEnglisch ModelDeutsch Modell
speedEnglisch SpeedDeutsch Tempo
qualityEnglisch DepthDeutsch Tiefe
privacyEnglisch PrivacyDeutsch Datenschutz
inputEnglisch Your textDeutsch Dein Text
outputEnglisch OutputDeutsch Ergebnis
generateEnglisch GenerateDeutsch Erzeugen
generatingEnglisch WritingDeutsch Schreibt
copyEnglisch CopyDeutsch Kopieren
copiedEnglisch CopiedDeutsch Kopiert
resetEnglisch Reset textDeutsch Text zurücksetzen
demoEnglisch Runs in your browser, nothing is sent.Deutsch Läuft in deinem Browser, nichts wird gesendet.
modeEnglisch ModeDeutsch Art
wordsEnglisch wordsDeutsch Wörter

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • KI-Funktionen reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-busy, aria-checked, aria-controls, aria-label, aria-labelledby, aria-live und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen img, radio, radiogroup, tab, tablist und tabpanel.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 17 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich KI-Funktionen?

Mit aiw add @ai-website/ai-features. Der Befehl legt die Datei components/ui/ai-features.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind icon, section und button. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat KI-Funktionen?

6 Varianten, Assistent im Produkt, Vom Auftrag zum Ergebnis, Agent bei der Arbeit, Mit und ohne KI, Modellwahl und Datenschutz und Live-Fläche. Du wählst sie mit der Prop variant, zum Beispiel variant="prompt-result".

Kann ich die Texte von KI-Funktionen übersetzen?

Ja. KI-Funktionen bringt 33 eigene Texte auf Deutsch und Englisch mit, etwa „Assistent“, „Frag etwas“ und „Senden“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent KI-Funktionen einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini KI-Funktionen mit aiw_components und installieren sie mit aiw_add @ai-website/ai-features. Nenn im Prompt die Variante, etwa variant="assistant", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich KI-Funktionen ohne Code anpassen?

Ja, im Studio. Alle 6 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden AiFeatures-Code zum Kopieren.

Ähnliche Components

Mehr aus Marketing, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben AI Features stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert