Model Selector

The Model chip and its provider list with badges and locks.

"use client";

import { useState } from "react";

import { Card } from "@/components/ui/card";

import { PerplexityModelSelector } from "../components/perplexity-model-selector";
import { PERPLEXITY_MODELS } from "../constants/perplexity";

const MODELS = PERPLEXITY_MODELS.map((model, index) =>
  index < 3 ? { ...model, locked: false } : model
);

export default function PerplexityModelSelectorExample() {
  const [model, setModel] = useState("sonar-2");

  return (
    <Card className="bg-pplx-bg ring-pplx-border flex w-full min-w-0 flex-row justify-center gap-0 rounded-2xl p-6 pt-24">
      <PerplexityModelSelector
        model={model}
        models={MODELS}
        onModelChange={setModel}
      />
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/perplexity-model-selector

A shadcn DropdownMenu with a radio group that opens upward from the Model chip. It starts with an “Access the top AI models” row, then lists each model with its provider logo, a Max or New shadcn Badge and a lock. Locked models are disabled. The selected unlocked model gets a check.

Prop	Default	Description
`models`	Perplexity’s Pro list	The models to list.
`model`		The selected model id.
`onModelChange`		Called with the id of an unlocked model.
`label`	`Model`	The chip label.
`promoLabel`	`Access the top AI models`	The first row.

interface PerplexityModel {
  id: string;
  label: string;
  provider: PerplexityModelProvider;
  badge?: "max" | "new";
  locked?: boolean;
}

Used in

Perplexity

A full recreation of a Perplexity thread with search steps, citations with hover cards and the composer.