Overview
Modes
Switch between discrete AI operating modes like Creative, Precise, or Safe
modebehaviorcontrol
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modes | ModeOption[] | required | Array of mode options with id, label, optional description/icon, and optional disabled flag |
selectedModeId | string | required | ID of the currently selected mode |
onModeChange | (modeId: string) => void | required | Callback fired when mode selection changes |
title | string | "Modes" | Optional heading shown above mode controls |
variant | "segmented" | "tabs" | "segmented" | Display style for mode selection |
Docs
Modes provide a high-level behavior switch that changes how the assistant operates without requiring users to tune low-level model parameters. Instead of adjusting multiple sliders, users pick a named operating mode like Creative, Precise, or Safe. This pattern is especially useful for non-technical users who need clear intent-level control over output behavior.
Variants
- Segmented control — A compact horizontal switch for fast toggling between a small set of modes.
- Tabs — Tab-style selection with optional per-mode descriptions for richer context.
- Inline chip picker — Mode chips near the prompt field for quick context switching during chat.
Use Cases
- Switching between brainstorming and execution workflows
- Applying safer defaults for compliance or sensitive domains
- Choosing concise vs expressive output behavior by task
- Providing simple control surfaces for non-technical teams
- Rapidly changing assistant behavior without prompt rewrites
Best Practices
- Use clear, human-readable mode labels that describe behavior outcomes.
- Show active mode persistently so users understand current AI behavior.
- Pair each mode with a short description of expected output differences.
- Keep the number of modes small to reduce decision fatigue.
- Allow runtime switching without resetting user context or history.