Install
npx ai-elements@latestWho it's for
This guide is for frontend developers who want to build AI-native application interfaces faster on top of shadcn/ui. Officially, AI Elements is written as a component library built on shadcn/ui.
Before you start, all of these must hold: Node.js 18 or later; an existing Next.js project with AI SDK installed; shadcn/ui already initialized in the project (the page writes npx shadcn@latest init). Tailwind CSS must also be configured, and AI Elements supports CSS Variables mode only. If any item is missing, do not run the install.
This is a component install, not an Agent marketplace plugin. Do not generalize npx ai-elements@latest into an IDE plugin that does not appear.
Complete a first try in 3 minutes
Use only the recommended install command given on the page:
npx ai-elements@latest
Precondition: the current directory is that Next.js project with shadcn/ui already initialized and the AI SDK installed; Node.js is 18+; Tailwind is in CSS Variables mode. The install location is your configured components directory, plus project dependencies.
Side-effect confirmation point: the page states that installing all components will: Set up shadcn/ui if it is not already configured; install all AI Elements components into the configured components directory; and add necessary dependencies to the project. That changes files and package dependencies. If the directory is wrong, or you only want to check preconditions first, stop. Confirm, then run it.
Success signal: the command finishes normally, new components appear in the components directory, and dependencies are written. The first try is only a check: open one newly installed component file and confirm it landed in your configured directory. Do not immediately wire it into a chat page or production route that does not appear in the excerpt. If a wizard still wants to change more files, stop at the confirmation point.
Use cases
Case 1: Run the official install in a project that meets the preconditions. After confirming Node.js 18+, Next.js + AI SDK, completed npx shadcn@latest init, and Tailwind in CSS Variables mode, run npx ai-elements@latest. The evidence covers this recommended command and the prerequisite list. The completion criterion stops at a successful install and components entering the configured directory. Do not add individual component names or a registry URL that do not appear.
Case 2: First see what “install all components” will do, then decide whether to continue. The excerpt states it will set up shadcn/ui if needed, install all AI Elements into the components directory, and add necessary dependencies. On the first try, if you are not ready to accept those writes, do not run the command; only check whether those three side effects are acceptable. The observable success signal is that you can compare the current project and confirm shadcn is initialized and the target components directory exists. Do not read “install all” as permission to skip the Tailwind CSS Variables limit.
Limits
The primary install path is only npx ai-elements@latest. npx shadcn@latest init is a precondition, not a second primary installer. You need Node.js 18+, Next.js + AI SDK, initialized shadcn/ui, and Tailwind supports CSS Variables mode only. Install changes the components directory and dependencies. Uninstall and per-component selection are not written and cannot be treated as a safety conclusion.