ai-elements
Pre-built React components for AI chat interfaces built on shadcn/ui and the AI SDK.
- Includes conversation, message, tool display, and prompt input components designed for AI-native applications
- Installs directly into your project codebase via CLI, making components fully customizable and extensible with standard React patterns
- Requires Next.js, AI SDK, shadcn/ui, and Node.js 18+; integrates seamlessly with Vercel's AI Gateway for model access
- All components support standard HTML attributes and Tailwind CSS styling, allowing direct modification of installed component files
AI Elements
AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster. It provides pre-built components like conversations, messages and more.
Installing AI Elements is straightforward and can be done in a couple of ways. You can use the dedicated CLI command for the fastest setup, or integrate via the standard shadcn/ui CLI if you've already adopted shadcn's workflow.
IMPORTANT: Run all CLI commands using the project's package runner:
npx ai-elements@latest,pnpm dlx ai-elements@latest, orbunx --bun ai-elements@latest— based on the project'spackageManager. Examples below usenpx ai-elements@latestbut substitute the correct runner for the project.
Prerequisites
Before installing AI Elements, make sure your environment meets the following requirements:
- Node.js, version 18 or later
- A Next.js project with the AI SDK installed.
- shadcn/ui installed in your project. If you don't have it installed, running any install command will automatically install it for you.
- We also highly recommend using the AI Gateway and adding
AI_GATEWAY_API_KEYto yourenv.localso you don't have to use an API key from every provider. AI Gateway also gives $5 in usage per month so you can experiment with models. You can obtain an API key here.