A
Aether UI
AI

AI Settings

A fully controlled settings panel with three cards: API Configuration (key with show/hide toggle and model selector), Generation Parameters (temperature and max-tokens sliders), and System Prompt (resizable textarea). All values are controlled via callback props.

API Configuration

Generation Parameters

0.70

Controls randomness — 0 is deterministic, 2 is very creative.

2048

System Prompt

This prompt is sent at the start of every conversation.

import { AISettings } from "@aetherstack/blocks"

Installation

terminal
npx aether-ui add ai-settings

Import

import.tsx
import { AISettings } from "@aetherstack/blocks"

Usage

ai-settings.tsx
"use client"

import * as React from "react"
import { AISettings } from "@aetherstack/blocks"

const MODELS = [
  { id: "gpt-4o", name: "GPT-4o", provider: "OpenAI" },
  { id: "gpt-4o-mini", name: "GPT-4o mini", provider: "OpenAI" },
  { id: "claude-3-5-sonnet", name: "Claude 3.5 Sonnet", provider: "Anthropic" },
]

export function SettingsPage() {
  const [apiKey, setApiKey] = React.useState("")
  const [model, setModel] = React.useState("gpt-4o")
  const [temperature, setTemperature] = React.useState(0.7)
  const [maxTokens, setMaxTokens] = React.useState(2048)
  const [systemPrompt, setSystemPrompt] = React.useState("You are a helpful assistant.")

  return (
    <AISettings
      apiKey={apiKey}
      onApiKeyChange={setApiKey}
      model={model}
      onModelChange={setModel}
      models={MODELS}
      temperature={temperature}
      onTemperatureChange={setTemperature}
      maxTokens={maxTokens}
      onMaxTokensChange={setMaxTokens}
      systemPrompt={systemPrompt}
      onSystemPromptChange={setSystemPrompt}
    />
  )
}

Props

PropTypeDefaultDescription
apiKeystring""Current API key value.
onApiKeyChange(value: string) => void—Called when the API key input changes.
modelstring—Currently selected model ID.
onModelChange(value: string) => void—Called when a different model is selected.
modelsModel[][]Available models to show in the selector. Each has id, name, and provider.
temperaturenumber0.7Current temperature value (0–2).
onTemperatureChange(value: number) => void—Called when the temperature slider changes.
maxTokensnumber2048Current max tokens value (256–8192).
onMaxTokensChange(value: number) => void—Called when the max tokens slider changes.
systemPromptstring""Current system prompt text.
onSystemPromptChange(value: string) => void—Called when the system prompt textarea changes.
classNamestring—Additional classes on the root element.

* Required

Accessibility

  • →All form fields are associated with a <Label> element.
  • →The API key visibility toggle includes aria-label='Show API key' or 'Hide API key'.
  • →Sliders use the Slider primitive which renders an accessible range input.
  • →The model selector uses the Select primitive with proper keyboard navigation.