AI setup

Models, settings, memory, privacy and the first steps.

3 components · 14 variants

Switch category

AI settings

Settings of an AI assistant. Memory you can see and edit, custom instructions with a live preview, data controls with export and delete, connected apps with access per scope and rules for a whole workspace.

Memory
Custom instructions
Data controls
Connected apps
Workspace rules

Props and details

Memory

Every remembered fact with where it came from, grouped, searchable, editable in place and forgettable with undo. One switch pauses memory.

Open in Studio

Installv1.0.0

aiw add @ai-website/ai-settings

Brings along utils, kit, icon, reveal, motion, switch

Usage

<AiSettings variant="memory" memories={[{ id, text, source, group }]} memoryOn />

Source

Custom instructions

Two fields with counters, tone presets as a choice and a preview whose sample answer changes with the preset. Save only lights up after a change.

Open in Studio

Installv1.0.0

aiw add @ai-website/ai-settings

Brings along utils, kit, icon, reveal, motion, switch

Usage

<AiSettings variant="instructions" about="…" style="…" presets={[{ id, label, sample }]} sampleQuestion="…" />

Source

Data controls

Training off by default, how long chats are kept, temporary chats, an export and deleting every chat behind a typed confirmation.

Open in Studio

Installv1.0.0

aiw add @ai-website/ai-settings

Brings along utils, kit, icon, reveal, motion, switch

Usage

<AiSettings variant="data-controls" retention={["30 days", "90 days", "1 year", "Forever"]} />

Source

Connected apps

Every connected app with its scopes as switches and the last use. Rows open with a soft height change, disconnect is one click.

Open in Studio

Installv1.0.0

aiw add @ai-website/ai-settings

Brings along utils, kit, icon, reveal, motion, switch

Usage

<AiSettings variant="connected-apps" connections={[{ id, name, icon, access: [{ id, label, on }], lastUsed, connected }]} />

Source

Workspace rules

Rules for everyone in a workspace on sensitive data, training, logs and allowed models, applied together and logged.

Open in Studio

Installv1.0.0

aiw add @ai-website/ai-settings

Brings along utils, kit, icon, reveal, motion, switch

Usage

<AiSettings variant="workspace-policy" rules={[{ id, label, description, icon, on, impact }]} models={[{ id, name, allowed }]} />

Source

model-picker

Model picker

Five ways to choose the model behind an AI feature. A compact dropdown, cards with speed, depth, context and cost, a comparison table, the automatic choice explained as a route, and defaults per task with a cost limit.

Dropdown
Model cards
Comparison table
Auto routing
Defaults per task

Props and details

Dropdown

A compact switch for the composer, with auto choice, speed and cost per model and a locked model that says which plan it needs. Arrow keys and Escape work.

Open in Studio

Installv1.0.1

aiw add @ai-website/model-picker

Brings along utils, kit, icon, reveal, motion

Usage

<ModelPicker variant="dropdown" models={[{ id, name, description, speed, depth, context, cost, costLevel, locked }]} auto defaultValue="core" />

Source

Model cards

Every model as a card with speed and reasoning as meters, context, cost and what it is good for. Cards are a radio group, the chosen one carries a ring.

Open in Studio

Installv1.0.1

aiw add @ai-website/model-picker

Brings along utils, kit, icon, reveal, motion

Usage

<ModelPicker variant="cards" models={[…]} defaultValue="core" onChange={(id) => …} />

Source

Comparison table

Models as columns with meters, context, cost and abilities, the best value of each row marked. Phones show one model at a time with a sliding switch.

Open in Studio

Installv1.0.1

aiw add @ai-website/model-picker

Brings along utils, kit, icon, reveal, motion

Usage

<ModelPicker variant="compare-table" models={[…]} defaultValue="core" />

Source

Auto routing

Example requests on the left, models on the right and a line between them that shows which model the auto mode picks and why.

Open in Studio

Installv1.0.1

aiw add @ai-website/model-picker

Brings along utils, kit, icon, reveal, motion

Usage

<ModelPicker variant="auto-routing" models={[…]} routes={[{ id, task, kind, icon, model, reason }]} />

Source

Defaults per task

A default model for each kind of task and a limit for the cost of one request, saved together. Changes enable save and reset.

Open in Studio

Installv1.0.1

aiw add @ai-website/model-picker

Brings along utils, kit, icon, reveal, motion

Usage

<ModelPicker variant="task-defaults" models={[…]} tasks={[{ id, label, icon, description, model }]} maxCost={{ value, min, max, unit }} />

Source

ai-onboarding

AI onboarding

The first minutes with an AI assistant. What it can do with an example that types itself, a first task to start with, the data sources to connect with what each one reads, and an honest page on limits and promises.

What it can do
First task
Connect sources
Limits and promises

Props and details

What it can do

Abilities as tabs, each with a request that types itself and the result that follows. Arrow keys move between them, phones swipe the row.

Open in Studio

Installv1.0.0

aiw add @ai-website/ai-onboarding

Brings along utils, kit, icon, reveal, motion

Usage

<AiOnboarding variant="capabilities" name="…" capabilities={[{ id, title, description, icon, prompt, result }]} step={{ current: 1, total: 3 }} />

Source

First task

A handful of tasks that work right away, each with time and what it needs, or a task in your own words. Starting opens the chat with it.

Open in Studio

Installv1.0.0

aiw add @ai-website/ai-onboarding

Brings along utils, kit, icon, reveal, motion

Usage

<AiOnboarding variant="first-task" tasks={[{ id, label, icon, time, needs }]} step={{ current: 3, total: 3 }} />

Source

Connect sources

Data sources with what the assistant would read from each, connected one by one with a check that springs in, and a counter in the footer.

Open in Studio

Installv1.0.0

aiw add @ai-website/ai-onboarding

Brings along utils, kit, icon, reveal, motion

Usage

<AiOnboarding variant="connect-sources" sources={[{ id, name, icon, description, reads, connected }]} step={{ current: 2, total: 3 }} />

Source

Limits and promises

Before the first chat, what the assistant is good at, what it is not made for and three promises about data stand honestly side by side.

Open in Studio

Installv1.0.0

aiw add @ai-website/ai-onboarding

Brings along utils, kit, icon, reveal, motion

Usage

<AiOnboarding variant="limits-promise" can={[…]} cannot={[…]} promises={[{ title, description, icon }]} />

Source

Similar components

More from App, the same area of the kit.

Often combined with

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

On this page

Memory

Custom instructions

Data controls

Connected apps

Workspace rules

Dropdown

Model cards

Comparison table

Auto routing

Defaults per task

What it can do

First task

Connect sources

Limits and promises

Similar components, Often combined with

Similar components

Often combined with