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, or bunx --bun ai-elements@latest - based on the project's packageManager. Examples below use npx ai-elements@latest but 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_KEY to your env.local so 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.

Installing Components