Introduction

Next

Copy-paste UI components and production-ready AI stacks for building modern applications with the Vercel AI SDK.

shadcnagents gives you two things:

  1. UI Components — beautifully designed, accessible React components you copy into your project
  2. AI Stacks — production-ready implementations built with the Vercel AI SDK that you can drop into any Next.js app

This is not an npm package. You own the code. Copy what you need, customize it, ship it.

UI Components

117+ React components built with Tailwind CSS and motion/react. Each component is self-contained — no dependency on shadcnagents itself.

pnpm dlx shadcn add https://shadcnagents.com/r/texture-button

Browse all components in the component docs or the registry.

AI Stacks

100+ production-ready AI implementations organized by what you're building — chat interfaces, agents, tool integrations, workflows, and more.

Each stack includes:

  • Live preview — see the stack running in the browser
  • Full source code — every file needed to implement it
  • CLI install — one command to add it to your project
pnpm dlx shadcn add https://shadcnagents.com/r/basics-generate-text

Browse all stacks at /stacks or read the stacks overview.

Quick Start

Install dependencies

pnpm add ai @ai-sdk/anthropic

Add a stack

pnpm dlx shadcn add https://shadcnagents.com/r/ai-elements-chat

Use it

import { Chat } from "@/components/stacks/chat"
 
export default function Page() {
  return <Chat />
}

Free vs Pro

Every stack is marked as Free or Pro.

  • Free — 31 stacks with full source code and live previews, no account needed
  • Pro — 69+ additional stacks including chat clones (ChatGPT, Claude, Grok), orchestration patterns, durable workflows, and full example applications

FAQ