Vercel Platforms

A command-line interface for installing Vercel Platforms components - a component library built on top of shadcn/ui to help you build platforms on Vercel faster.

Overview

Vercel Platforms provides pre-built, customizable React components specifically designed for platforms on Vercel, including conversations, messages, code blocks, reasoning displays, and more. The CLI makes it easy to add these components to your Next.js project.

Installation

You can use the Vercel Platforms CLI directly with npx, or install it globally:

# Use directly (recommended)
npx @vercel/platforms@latest

# Or using shadcn cli
npx shadcn@latest add https://vercel.com/platforms/registry/all.json

Prerequisites

Before using Vercel Platforms, ensure your project meets these requirements:

• Node.js 18 or later
• Next.js project with Vercel SDK installed
• shadcn/ui initialized in your project (npx shadcn@latest init)
• Tailwind CSS configured (Vercel Platforms supports CSS Variables mode only)

Usage

Install All Components

Install all available Vercel Platforms components at once:

npx @vercel/platforms@latest

This command will:

• Set up shadcn/ui if not already configured
• Install all Vercel Platforms components to your configured components directory
• Add necessary dependencies to your project

Install Specific Components

Install individual components using the add command:

npx @vercel/platforms@latest add <component-name>

Examples:

# Install the message component
npx @vercel/platforms@latest add message

# Install the conversation component
npx @vercel/platforms@latest add conversation

# Install the code-block component
npx @vercel/platforms@latest add code-block

Alternative: Use with shadcn CLI

You can also install components using the standard shadcn/ui CLI:

# Install all components
npx shadcn@latest add https://vercel.com/platforms/registry/all.json

# Install a specific component
npx shadcn@latest add https://vercel.com/platforms/registry/message.json

Available Components

Vercel Platforms includes the following components:

(TBD)

Quick Start Example

After installing components, you can use them in your React application:

(TBD)

How It Works

The Vercel Platforms CLI:

1. Detects your package manager (npm, pnpm, yarn, or bun) automatically
2. Fetches component registry from https://vercel.com/platforms/registry/registry.json
3. Installs components using the shadcn/ui CLI under the hood
4. Adds dependencies and integrates with your existing shadcn/ui setup

Components are installed to your configured shadcn/ui components directory (typically @/components/vercel-platform/) and become part of your codebase, allowing for full customization.

Configuration

Vercel Platforms uses your existing shadcn/ui configuration. Components will be installed to the directory specified in your components.json file.

Recommended Setup

For the best experience, we recommend:

1. Vercel AI Gateway: Set up Vercel AI Gateway and add AI_GATEWAY_API_KEY to your .env.local
2. CSS Variables: Use shadcn/ui's CSS Variables mode for theming
3. TypeScript: Enable TypeScript for better development experience

Made with ❤️ by Vercel