#What is mcpcn?

mcpcn is an open-source React component library built for developers creating MCP Apps and AI-powered interfaces. It combines Base UI primitives with the familiar shadcn registry workflow, allowing developers to install complete UI patterns directly into their projects rather than depending on a rigid component package. It is particularly useful for ChatGPT apps, Claude apps, MCP-powered tools, AI assistants, payment interfaces, messaging experiences, event applications, and other model-driven products that need polished, accessible, and customizable interfaces.

#Features ⚡

• Shadcn-Compatible Installation: Components are distributed through a registry and can be installed using the familiar shadcn CLI workflow.

• Base UI Powered: Components use Base UI primitives to provide accessible interaction patterns without relying on Radix UI.

• Ready-to-Use Blocks: Every block includes a polished default composition with demo data so developers can render interfaces immediately.

• Theme Aware: Semantic color tokens adapt to existing light and dark themes.

• Fully Composable: Child components can be imported individually and rearranged with standard JSX.

• Source-Code Ownership: Installed components live directly inside your application, so you can modify every detail without package lock-in.

• TypeScript Support: Typed data, appearance, and action contracts make integrations easier to maintain.

• MCP-Focused Patterns: Includes interfaces specifically designed for payments, messaging, forms, social content, maps, events, and model-driven applications.

• Apps SDK UI Alignment: The project includes optional UI patterns aligned with OpenAI's Apps SDK UI system.

• OpenUI Ready: Component documentation includes guidance for OpenUI integration.

• Zero Configuration: Components are designed to work immediately with sensible defaults.

#Pro and cons

Pro ✅:

• Completely free and open source

• MIT licensed

• Familiar shadcn CLI workflow

• Built specifically for MCP and AI applications

• Full source-code ownership

• Strong TypeScript support

• Accessible Base UI primitives

• Dark and light theme support

• Large variety of real application patterns

• No component package lock-in

• Easy to compose and customize

Cons ⚠️:

• Primarily targeted at React-based projects

• Smaller ecosystem compared with established general-purpose UI libraries

• Developers unfamiliar with MCP Apps may need additional setup knowledge

• Some blocks are highly specific to AI and MCP application use cases

• Application logic and backend MCP integration still need to be implemented separately

#Included Components/Templates

mcpcn ships with a growing collection of ready-to-use application blocks organized around real-world MCP interfaces.

• Contact Form

• Date & Time Picker

• Issue Report Form

• Order Confirm

• Payment Confirmed

• Amount Input

• Product List

• Table

• Option List

• Tag Select

• Quick Reply

• Progress Steps

• Status Badge

• Stat Card

• Hero

• Post Card

• Post List

• Post Detail

• Message Bubble

• Chat Conversation

• X Post

• Instagram Post

• LinkedIn Post

• YouTube Post

• Map Carousel

• Event Card

• Event List

• Event Detail

• Ticket Tier Select

• Event Confirmation

#Pricing 💸

mcpcn is completely free and open source. The project is distributed under the MIT License and does not currently list a paid Pro or commercial component tier. Developers can use and modify the source code in personal and commercial projects while following the license requirements.

• Free: $0

• Open source

• MIT License

• No paid Pro tier currently listed

• Commercial usage permitted under the MIT License

• Components can be modified directly inside your project

#Integrations 🧰

mcpcn is built around the modern React, shadcn, and MCP ecosystem.

• React

• TypeScript

• shadcn/ui

• shadcn CLI

• Base UI

• MCP Apps

• Model Context Protocol

• ChatGPT Apps

• Claude Apps

• OpenAI Apps SDK UI

• OpenUI

• Next.js-compatible React projects

• Light and dark theme systems