Model key

Preview

Install

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/model-key

Brings in: bidi, button, heading-level, heading-scope, input, locale, locked, radio-group, relative-time, tokens, use-announcer, use-focus-within, utils · npm: lucide-react@^1.67.0

Usage

"use client"

import * as React from "react"
import { ModelKey, type StoredModelKey } from "@/components/candor/model-key"

export default function Example() {
  // A real app checks the key with the provider on its server and stores only the key's record; this one accepts any
  // key that starts with "pa-" and keeps its last four characters as the part that's safe to show.
  const [stored, setStored] = React.useState<StoredModelKey | null>(null)
  return (
    <ModelKey
      className="max-w-lg"
      providers={[
        { id: "a", name: "Provider A", placeholder: "pa-…" },
        { id: "b", name: "Provider B", placeholder: "pb-…" },
      ]}
      stored={stored}
      unlocks={["Chat and agents on your own model and account", "Usage billed by the provider, not by us"]}
      without={["Audits, reports and monitors", "Everything you’ve already set up"]}
      onAdd={async (provider, key) => {
        await new Promise((r) => setTimeout(r, 600))
        if (!key.startsWith(`p${provider}-`)) return { ok: false, reason: "The provider answered: invalid key." }
        setStored({ provider, hint: `p${provider}-…${key.slice(-4)}`, addedAt: new Date().toISOString(), addedBy: "Dana Ortiz" })
        return { ok: true }
      }}
      onRemove={async () => {
        await new Promise((r) => setTimeout(r, 400))
        setStored(null)
      }}
    />
  )
}

<ModelKey>

Strings

Types

ModelKeyProvider

A model provider whose key the person can bring, as the app lists it.

{ id: string; /** Its name, e.g. "Anthropic". */ name: string; /** What its keys start with, shown as the field's placeholder, e.g. "sk-ant-…". */ placeholder?: string | undefined; /** Where data goes once this provider's key is added, in the app's words; replaces the default line. */ egress?: string | undefined; /** What to check when this provider refuses a key, in the app's words; replaces the default list. */ check?: string[] | undefined; }

StoredModelKey

The stored key, as the app's server describes it. The key itself is never here: only the part safe to show.

{ /** The provider's id, from `providers`. */ provider: string; /** The part of the key that's safe to show, e.g. "sk-ant-…4f2a". */ hint: string; /** When it was added, as an ISO time. */ addedAt: string; /** Who added it, by name. Left out, no name is shown. */ addedBy?: string | undefined; /** The provider refuses it now (revoked or expired there), in the app's or the provider's words. */ problem?: string | undefined; }

ModelKeyCheck

What checking a key found, as the app's server reports it. On `ok`, update `stored` with the key's record.

{ ok: true } | { ok: false; reason?: string | undefined }

Types from other items

The props above take these. Each is defined by another item; import it from the path shown.

HeadingLevel from @/lib/candor/heading-level

A heading's level in the page's outline: `1` is `<h1>`, `6` is `<h6>`. Every Candor item that draws a heading takes its `headingLevel` as this type; the level is where the heading sits in the outline, never how large it looks.

1 | 2 | 3 | 4 | 5 | 6