Prerequisites
A React project with Tailwind CSS and shadcn/ui configured.
If your project does not have a components.json file yet, initialize shadcn/ui first:
$ pnpm dlx shadcn@latest init
Installation
Run the following command to add a component:
$ pnpm dlx shadcn@latest add https://mcpcn.dev/r/quick-reply.json
The CLI copies the component into your project and installs its npm and shadcn/ui dependencies. To install items by namespace, configure the @mcpcn registry alias.
$ pnpm dlx shadcn@latest add @mcpcn/quick-reply
For widgets rendered in ChatGPT, add the optional apps-sdk-theme compatibility layer. It scopes OpenAI-aligned tokens and control geometry to the widget without replacing your existing shadcn/ui theme.
Usage
Import and render the installed component:
import { QuickReply } from "@/components/ui/quick-reply";
export function SuggestedReplies() {
return <QuickReply />;
}Every root component renders its default composition when children are omitted.
Composition
Import child components directly when you need to customize the structure:
"use client";
import {
QuickReply,
QuickReplyItem,
QuickReplyList,
} from "@/components/ui/quick-reply";
const replies = [
{ label: "Approve" },
{ label: "Ask a question" },
{ label: "Cancel" },
];
export function SuggestedReplies() {
return (
<QuickReply actions={{ onSelectReply: (reply) => console.log(reply) }}>
<p className="mb-3 text-sm font-medium">Choose a response</p>
<QuickReplyList>
{replies.map((reply) => (
<QuickReplyItem key={reply.label} reply={reply} />
))}
</QuickReplyList>
</QuickReply>
);
}Child components that consume shared context must remain inside their root component.