Models & providers

APIKeyInput

Masked API key input with show/hide toggle and live validation status.

Preview

Installation

pnpm add nyxis-ui

Usage

import { APIKeyInput } from 'nyxis-ui';
// or, for stricter tree-shaking:
// import { APIKeyInput } from 'nyxis-ui/api-key-input';

<APIKeyInput
  provider="anthropic"
  value={apiKey}
  onValueChange={setApiKey}
  validate={async (key) => (key.startsWith('sk-ant-') ? 'valid' : 'invalid')}
/>;