RuntimeModePicker
API reference and demos for RuntimeModePicker.
Import
Section titled “Import”import { RuntimeModePicker } from "@flanksource/clicky-ui/ai";No dedicated Storybook demo is available for this component yet.
The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.
| Prop | Type | Default | Description |
|---|---|---|---|
families |
SpecRuntimeFamily[] |
[ { id: "claude", label: "Claude", provider: "anthropic", modes: [ { id: "api", label: "API", icon: UiCloud, title: "Anthropic API", provider: "anthropic", }, { id: "agent", label: "Agent", icon: UiRobotAi, title: "Claude Agent SDK", provider: "anthropic", }, { id: "cli", label: "CLI", icon: UiTerminal, title: "Claude Code CLI", provider: "anthropic", }, { id: "cmux", label: "cmux", icon: UiColumns, title: "Claude multiplexer", provider: "anthropic", }, ], }, { id: "codex", label: "Codex", provider: "openai", modes: [ { id: "api", label: "API", icon: UiCloud, title: "OpenAI API", provider: "openai", }, { id: "agent", label: "Agent", icon: UiRobotAi, title: "Codex agent", provider: "openai", }, { id: "cli", label: "CLI", icon: UiTerminal, title: "Codex CLI", provider: "openai", }, { id: "cmux", label: "cmux", icon: UiColumns, title: "Codex multiplexer", provider: "openai", }, ], }, { id: "gemini", label: "Gemini", provider: "google", catalogPrefix: "googleai", modes: [ { id: "api", label: "API", icon: UiCloud, title: "Gemini API" }, { id: "cli", label: "CLI", icon: UiTerminal, title: "Gemini CLI" }, ], }, { id: "deepseek", label: "DeepSeek", provider: "deepseek", modes: [{ id: "api", label: "API", icon: UiCloud, title: "DeepSeek API" }], }, ] |
— |
models |
ChatModel[] |
[] |
Model catalog used to decide whether the current model survives a family switch. |
onChange* |
(…) => void |
— | — |
value* |
AISpecRuntimeSpec |
— | — |