Introduction

mcpcn provides polished, accessible, and customizable React components for MCP Apps. It is built with Base UI and works with the shadcn CLI.

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?

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

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.

Copyimport {
  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