# Installation

Install and compose mcpcn blocks in a React application.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



## Prerequisites [#prerequisites]

A React project with [Tailwind CSS](https://tailwindcss.com/) and [shadcn/ui](https://ui.shadcn.com/) configured.

If your project does not have a `components.json` file yet, initialize shadcn/ui first:

```bash
npx shadcn@latest init
```

## Installation [#installation]

Run the following command to add a component:

```bash
npx 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](/docs/registry).

```bash
npx shadcn@latest add @mcpcn/quick-reply
```

For widgets rendered in ChatGPT, add the optional [`apps-sdk-theme`](/docs/apps-sdk-ui) compatibility layer. It scopes OpenAI-aligned tokens and control geometry to the widget without replacing your existing shadcn/ui theme.

## Usage [#usage]

Import and render the installed component:

```tsx
import { QuickReply } from "@/components/ui/quick-reply";

export function SuggestedReplies() {
  return <QuickReply />;
}
```

Every root component renders its default composition when `children` are omitted.

## Composition [#composition]

Import child components directly when you need to customize the structure:

```tsx
"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.