ModelBadge

Compact chip showing model name, version, provider, and optional live status dot.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

ModelBadgeCompact chip showing model name, version, provider, and optional live status dot.

type ModelBadgeProps = {
  model: string;
  provider?: string;
  status?: "active" | "idle";
  version?: string;
};

export function ModelBadge({
  model,
  provider,
  status = "idle",
  version,
}: ModelBadgeProps) {
  return (
    <div className="pk-model-badge">
      {status === "active" && (
        <span className="pk-model-dot pk-model-dot--active" />
      )}
      <span className="pk-model-name">{model}</span>
      {version && <span className="pk-model-version">{version}</span>}
      {provider && <span className="pk-model-provider">{provider}</span>}
    </div>
  );
}

Props

Prop	Type	Default	Description
`model`*	`string`	—	Model identifier
`provider`	`string`	—	Provider name (Anthropic, OpenAI, etc.)
`version`	`string`	—	Version tag
`status`	`"active" \| "idle"`	`"idle"`	Shows pulsing dot when active