Provider composesCopy-paste blockperplexity-composeLive stage

Perplexity Compose

A copy-paste block that recreates the Perplexity prompt stage with Perplexity's rail, brand mark, prompt surface, model menu, and tool toggles. The block is not a package component: copy the file, or install it with the shadcn CLI, then edit the layout like any other file in your project. It is assembled entirely from Agent UI compose primitives, and every control is keyboard accessible.

Source you own: install the block with the shadcn CLI or copy components/blocks/composes/perplexity-compose.tsx. The preview below is the real file, and the code tab is the exact source.

components/blocks/composes/perplexity-compose.tsx

What do you want to know?

The code tab contains the full block, ready to copy.

Installation

Add the block with the shadcn CLI. It writes components/blocks/composes/perplexity-compose.tsx and installs its dependencies.

bash

npx shadcn@latest add https://agent-ui-27t.pages.dev/r/perplexity-compose.json

Prefer to own the file manually? Install the dependencies, then copy the source from the Files section.

bash

pnpm add @agent-ui/react lucide-react

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

Import the copied file and render it anywhere. The block accepts onSend, disabled, and className; wire onSend to any backend.

tsx

1import { PerplexityCompose } from "@/components/blocks/composes/perplexity-compose";
2 
3<PerplexityCompose onSend={(text) => console.log(text)} />

Files

One file. The same source is served by the shadcn registry endpoint, so the CLI and the docs can never drift.

components/blocks/composes/perplexity-compose.tsxtsx

tsx

1"use client";
2 
3import * as React from "react";
4import {
5  AudioLines,
6  ChevronDown,
7  Computer,
8  Library,
9  Mic,
10  PanelLeft,
11  Plus,
12  Puzzle,
13  Search,
14  Workflow,
15} from "lucide-react";
16import {
17  ComposeDisclaimer,
18  ComposeSendButton,
19  ComposeTextarea,
20  ModelChip,
21  createCompose,
22  useCompose,
23  type ComposeProps,
24} from "@agent-ui/react";
25 
26const Root = createCompose({
27  id: "perplexity",
28  maxWidth: "max-w-none",
29  placeholder: "Ask anything…",
30  models: [
31    { id: "sonar-pro", name: "Sonar Pro", hint: "Deep research" },
32    { id: "sonar", name: "Sonar", hint: "Fast answers" },
33    { id: "sonar-reasoning", name: "Sonar Reasoning", hint: "Reasoning" },
34  ],
35  initialToggles: { search: true },
36});
37 
38function PerplexityMark({ className }: { className?: string }) {
39  return (
40    <svg viewBox="0 0 24 24" className={className} aria-hidden="true" fill="none">
41      <path
42        d="M12 2v20M2 12h20M4.9 4.9l14.2 14.2M19.1 4.9 4.9 19.1"
43        stroke="currentColor"
44        strokeWidth="1.6"
45      />
46      <path
47        d="M12 2 8 6h8l-4-4Zm0 20 4-4H8l4 4ZM2 12l4-4v8l-4-4Zm20 0-4 4V8l4 4Z"
48        fill="currentColor"
49      />
50    </svg>
51  );
52}
53 
54/** Perplexity: oatmeal rail with teammate promo, answer-first canvas, segmented tools. */
55function PerplexityComposeLayout() {
56  const { toggles, toggle, send } = useCompose();
57  return (
58    <div className="flex min-h-[400px] w-full bg-white text-[13px] text-[#13343b]">
59      <aside className="hidden w-[176px] shrink-0 flex-col @[560px]:flex bg-[#f3f3ee] px-2.5 py-3">
60        <div className="flex items-center gap-2 px-1">
61          <PerplexityMark className="h-4 w-4" />
62          <Search className="ml-1 h-3.5 w-3.5 opacity-60" aria-hidden="true" />
63          <PanelLeft className="ml-auto h-4 w-4 opacity-60" aria-hidden="true" />
64        </div>
65        <nav className="mt-4 flex flex-col gap-0.5">
66          {[
67            { icon: Plus, label: "New" },
68            { icon: Computer, label: "Computer" },
69            { icon: Workflow, label: "Automations" },
70            { icon: Library, label: "Artifacts" },
71            { icon: Puzzle, label: "Plugins" },
72          ].map(({ icon: Icon, label }) => (
73            <button
74              key={label}
75              type="button"
76              className="flex items-center gap-2.5 rounded-lg px-1.5 py-[6px] text-left text-[12px] hover:bg-black/[0.05]"
77            >
78              <Icon className="h-[15px] w-[15px] opacity-75" aria-hidden="true" />
79              {label}
80            </button>
81          ))}
82        </nav>
83 
84        <div className="mt-4 flex items-center justify-between px-1.5 text-[10.5px] font-medium text-[#13343b]/60">
85          Teammates <ChevronDown className="h-3 w-3" aria-hidden="true" />
86        </div>
87        <div className="mt-1.5 rounded-xl border border-black/[0.08] bg-white p-2.5 shadow-[0_1px_2px_rgba(0,0,0,0.03)]">
88          <div className="flex items-start justify-between">
89            <p className="text-[11px] font-semibold leading-snug">Hire your first teammate</p>
90            <span className="flex -space-x-1" aria-hidden="true">
91              <span className="h-3 w-3 rounded-full bg-[#f4c95d]" />
92              <span className="h-3 w-3 rounded-full bg-[#c084fc]" />
93              <span className="h-3 w-3 rounded-full bg-[#42b8a4]" />
94            </span>
95          </div>
96          <p className="mt-1 text-[9.5px] leading-snug text-[#13343b]/55">
97            Teammates are persistent agents that work for you.
98          </p>
99          <button
100            type="button"
101            className="mt-2 w-full rounded-md bg-[#e8e8e3] py-1 text-[10px] font-medium"
102          >
103            Create new teammate
104          </button>
105        </div>
106 
107        <div className="mt-3 flex items-center justify-between px-1.5 text-[10.5px] font-medium text-[#13343b]/60">
108          Projects <ChevronDown className="h-3 w-3" aria-hidden="true" />
109        </div>
110        <p className="px-1.5 py-1 text-[10px] text-[#13343b]/40">No projects</p>
111        <div className="mt-2 flex items-center justify-between px-1.5 text-[10.5px] font-medium text-[#13343b]/60">
112          Recents <ChevronDown className="h-3 w-3" aria-hidden="true" />
113        </div>
114        <p className="px-1.5 py-1 text-[10px] text-[#13343b]/40">No recent sessions</p>
115 
116        <div className="mt-auto flex flex-col gap-2">
117          <button
118            type="button"
119            className="w-full rounded-md border border-black/10 bg-transparent py-1 text-[10.5px] font-medium"
120          >
121            View plans
122          </button>
123          <button type="button" className="flex items-center gap-1.5 px-1 text-[12px] font-medium">
124            <span className="grid h-5 w-5 place-items-center rounded-full bg-[#20808d] text-[9px] text-white">
125              P
126            </span>
127            Sign In
128          </button>
129        </div>
130      </aside>
131 
132      <div className="relative flex min-w-0 flex-1 flex-col items-center px-5 pb-7 pt-8">
133        <PerplexityMark className="mt-auto h-6 w-6 text-[#13343b]" />
134        <h1 className="mt-3 text-center text-[24px] font-normal tracking-[-0.01em] text-[#13343b]">
135          What do you want to know?
136        </h1>
137 
138        <div
139          data-agent-id="compose-card"
140          className="mt-4 flex w-full max-w-[470px] flex-col rounded-2xl border border-black/[0.08] bg-white p-3 shadow-[0_2px_10px_rgba(19,52,59,0.05)] transition-[border-color,box-shadow] duration-200 focus-within:border-[#20808d]/35 focus-within:shadow-[0_4px_20px_rgba(32,128,141,0.12)]"
141        >
142          <ComposeTextarea
143            aria-label="Ask anything"
144            placeholder="Ask anything…"
145            rows={1}
146            className="min-h-[38px] px-0.5 py-1 text-[14.5px] leading-6 text-[#13343b] placeholder:text-[#13343b]/35"
147          />
148          <div className="mt-2 flex items-center justify-between gap-2">
149            <div className="flex min-w-0 items-center gap-1.5">
150              <button
151                type="button"
152                aria-label="Attach"
153                className="grid h-7 w-7 place-items-center rounded-full text-[#13343b]/70 hover:bg-black/5"
154              >
155                <Plus className="h-4 w-4" aria-hidden="true" />
156              </button>
157              <div className="flex items-center rounded-full bg-[#f3f3ee] p-0.5">
158                <button
159                  type="button"
160                  aria-label="Toggle web search"
161                  aria-pressed={toggles.search}
162                  onClick={() => toggle("search")}
163                  className="flex items-center gap-1 rounded-full bg-white px-2 py-1 text-[11px] font-medium shadow-[0_1px_2px_rgba(0,0,0,0.08)] transition-opacity aria-pressed:opacity-100 opacity-60"
164                >
165                  <Search className="h-3 w-3" aria-hidden="true" /> Search
166                </button>
167                <button
168                  type="button"
169                  aria-label="Computer mode"
170                  className="flex items-center gap-1 rounded-full px-2 py-1 text-[11px] text-[#13343b]/60"
171                >
172                  <Computer className="h-3 w-3" aria-hidden="true" /> Computer
173                </button>
174              </div>
175            </div>
176            <div className="flex shrink-0 items-center gap-1">
177              <ModelChip
178                tone="light"
179                className="[&>button]:h-7 [&>button]:px-1 [&>button]:text-[11px] [&>button]:text-[#13343b]/60 [&>button]:hover:bg-transparent"
180              />
181              <button
182                type="button"
183                aria-label="Dictation"
184                className="grid h-7 w-7 place-items-center rounded-full text-[#13343b]/60 hover:bg-black/5"
185              >
186                <Mic className="h-3.5 w-3.5" aria-hidden="true" />
187              </button>
188              <ComposeSendButton
189                aria-label="Send message"
190                className="h-7 w-7 bg-[#13343b] text-white hover:bg-[#13343b]/85 disabled:bg-[#13343b] disabled:text-white disabled:opacity-100"
191                icon={<AudioLines className="h-3.5 w-3.5" strokeWidth={2.4} />}
192              />
193            </div>
194          </div>
195        </div>
196 
197        <div className="mt-3 grid w-full max-w-[470px] grid-cols-2 gap-2">
198          <button
199            type="button"
200            onClick={() => send("Search anything")}
201            className="rounded-xl bg-[#f6f6f2] p-3 text-left transition-colors hover:bg-[#eeeeea]"
202          >
203            <p className="flex items-center gap-1.5 text-[11.5px] font-medium">
204              <Search className="h-3.5 w-3.5" aria-hidden="true" /> Search anything
205            </p>
206            <p className="mt-1 text-[10px] leading-snug text-[#13343b]/55">
207              Get fast and accurate answers from the most trusted sources.
208            </p>
209          </button>
210          <button
211            type="button"
212            onClick={() => send("Get work done with Computer")}
213            className="rounded-xl bg-[#eef4f2] p-3 text-left transition-colors hover:bg-[#e5efec]"
214          >
215            <p className="flex items-center gap-1.5 text-[11.5px] font-medium">
216              <Computer className="h-3.5 w-3.5" aria-hidden="true" /> Get work done with Computer
217              <span className="rounded bg-[#d7efe9] px-1 py-px text-[8px] font-bold uppercase text-[#20808d]">
218                New
219              </span>
220            </p>
221            <p className="mt-1 text-[10px] leading-snug text-[#13343b]/55">
222              Hand off your projects to get polished, reliable deliverables around the clock.
223            </p>
224          </button>
225        </div>
226 
227        <ComposeDisclaimer className="mt-auto pt-5 text-[9.5px] text-[#13343b]/50">
228          <a href="#" className="underline">
229            Terms of Service
230          </a>{" "}
231          ·{" "}
232          <a href="#" className="underline">
233            Privacy Notice
234          </a>
235        </ComposeDisclaimer>
236      </div>
237    </div>
238  );
239}
240 
241export function PerplexityCompose(props: ComposeProps) {
242  return (
243    <Root {...props}>
244      <PerplexityComposeLayout />
245    </Root>
246  );
247}
248

Built with

The block imports these Agent UI primitives. Each one is a package export with its own docs page, so you can change the layout without giving up the behaviour.

Accessibility

All controls expose accessible names; the textarea supports Enter to send and Shift+Enter for a new line.

Perplexity also has a full product page.

Metadata, model list, and the same block in a dedicated route.

Open Perplexity

Use it with the rest of the library

PerplexityCompose composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

248 lines · copy-ready