# Introduction

Copy-paste React components for MCP Apps, built with Base UI and the shadcn CLI.

> 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).





**mcpcn** provides polished, accessible, and customizable React components for [MCP Apps](https://modelcontextprotocol.io/). It is built with [Base UI](https://base-ui.com/) and works with the [shadcn CLI](https://ui.shadcn.com/docs/cli).

## Philosophy [#philosophy]

mcpcn follows the shadcn model for MCP App interfaces: copy the components into your project, own the source code, and customize them without waiting for a package API to change.

Model-driven interfaces often need more than a collection of isolated primitives. They need complete patterns for messages, forms, payments, events, lists, maps, and social content. mcpcn provides those patterns with useful defaults while keeping their structure open for composition.

The goal is simple: make MCP Apps feel like the rest of your product—consistent, accessible, responsive, and easy to adapt.

## Why mcpcn? [#why-mcpcn]

Most MCP App interfaces are assembled from one-off markup or rigid components. mcpcn is designed for teams that want to move quickly without giving up control:

* **Own your code:** Install source files into your application and change every detail.
* **Start fast:** Render a complete default component immediately after installation.
* **Compose freely:** Import child components directly and replace or rearrange sections with ordinary JSX.
* **Stay compatible:** Use the same CLI, aliases, utilities, and primitives as a shadcn/ui project.

## Composition first [#composition-first]

Each compound component owns shared data and behavior through context. Its child components are exported individually, so you can use the default composition or build your own without dot notation.

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

const replies = [{ label: "Show details" }, { label: "Continue" }];

export function SuggestedReplies() {
  return (
    <QuickReply actions={{ onSelectReply: (reply) => console.log(reply) }}>
      <QuickReplyList>
        {replies.map((reply) => (
          <QuickReplyItem key={reply.label} reply={reply} />
        ))}
      </QuickReplyList>
    </QuickReply>
  );
}
```

Omit `children` when you want the ready-to-use default composition.

## Features [#features]

<div className="not-prose mt-4 grid gap-4 sm:grid-cols-2">
  <FeatureCard icon="ZapIcon" title="Ready to use" description="Every block includes a polished default composition with demo data." />

  <FeatureCard icon="SunMoonIcon" title="Theme aware" description="Semantic color tokens adapt to your existing light and dark themes." />

  <FeatureCard icon="LayoutGridIcon" title="Composable" description="Context-backed child components can be imported and arranged directly." />

  <FeatureCard icon="Code2Icon" title="TypeScript" description="Typed data, appearance, and action contracts make integrations predictable." />

  <FeatureCard icon="ClipboardCopyIcon" title="Copy and paste" description="The source code lives in your project, with no component package lock-in." />

  <FeatureCard icon="BlocksIcon" title="shadcn compatible" description="Install blocks and their dependencies with the familiar shadcn CLI." />
</div>