Composer

The follow-up input with focus chip, model selector and send button.

"use client";

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

import { PerplexityComposer } from "../components/perplexity-composer";

export default function PerplexityComposerExample() {
  return (
    <Card className="bg-pplx-bg ring-pplx-border w-full min-w-0 gap-0 rounded-2xl px-4 py-6">
      <PerplexityComposer className="mx-auto max-w-3xl" />
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/perplexity-composer

Enter sends and Shift+Enter adds a line. It’s a shadcn InputGroup with an InputGroupTextarea that grows with its content and a block-end addon of InputGroupButtons. The focus chip is a static label that shows the current mode. The send button turns into a stop button while busy.

Prop	Default	Description
`onSend`		Called with the trimmed text. The input clears when it’s set.
`onStop`		Called by the stop button while `busy`.
`busy`	`false`	Blocks sending and shows the stop button.
`placeholder`	`Ask a follow-up`	The input placeholder.
`focus`	`search`	The focus mode shown in the static chip. `focusOptions` supplies its label.
`focusOptions`	Search, Research	Labels for the focus modes.
`model`, `defaultModel`, `onModelChange`		The selected model, controlled or uncontrolled.
`models`	Perplexity’s Pro list	Passed to `PerplexityModelSelector`.

Used in

Perplexity

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