AI Settings Panel

A settings panel for controlling AI generation parameters. Provides sliders and inputs for temperature (0–2), max output tokens, and a system prompt textarea. All fields are fully controlled — wire them to your AI SDK configuration.

Model settings

import { AISettingsPanel } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add ai-settings-panel

Import

import.tsx

import { AISettingsPanel } from "@aetherstack/patterns"

Usage

ai-settings-panel.tsx

import * as React from "react"
import { AISettingsPanel } from "@aetherstack/patterns"

export function MySettings() {
  const [temperature, setTemperature] = React.useState(0.7)
  const [maxTokens, setMaxTokens] = React.useState(2048)
  const [systemPrompt, setSystemPrompt] = React.useState(
    "You are a helpful assistant."
  )

  return (
    <AISettingsPanel
      temperature={temperature}
      onTemperatureChange={setTemperature}
      maxTokens={maxTokens}
      onMaxTokensChange={setMaxTokens}
      systemPrompt={systemPrompt}
      onSystemPromptChange={setSystemPrompt}
    />
  )
}

Props

Prop	Type	Default	Description
temperature	number	0.7	Sampling temperature between 0 and 2. Lower values produce more deterministic output.
onTemperatureChange	(v: number) => void	—	Called with the new temperature value when the slider changes.
maxTokens	number	2048	Maximum number of output tokens to generate.
onMaxTokensChange	(v: number) => void	—	Called with the new max tokens value when the input changes.
systemPrompt	string	""	System prompt text shown in the textarea.
onSystemPromptChange	(v: string) => void	—	Called with the updated system prompt string on every keystroke.
className	string	—	Additional CSS classes applied to the panel container.

* Required

Accessibility

→Each control has an associated <label> with a for/id pairing.
→Temperature slider includes aria-valuemin, aria-valuemax, and aria-valuenow attributes.
→The system prompt textarea has a descriptive placeholder and aria-describedby linking to a helper hint.