AI Elements: shadcn/ui components for AI interfaces, copied into your repo

What ships in the registry

AI Elements is a component library and custom registry built on top of shadcn/ui, aimed at AI-native applications. The README says it provides pre-built, customizable React components specifically designed for AI applications, and names conversations, messages, code blocks and reasoning displays.

The gap it fills is narrow and real. The Vercel AI SDK gives you the transport and the hooks, and shadcn/ui gives you buttons and dialogs, but neither gives you a message list that renders streaming markdown, a thinking indicator that collapses a chain of thought, or a code block that survives partial output arriving token by token. Those are the pieces every chat interface needs and every team rebuilds.

The component list visible in the release notes goes well past the four the README names. There is PromptInput with tooltip and keyboard configuration, a screenshot action built on getDisplayMedia, SpeechInput wired into a chatbot prompt footer, a FileTree with separate select and toggle behaviour, JSXPreview for streaming JSX, TerminalStatus, Shimmer, Persona, and a way to download a conversation as markdown.

This is a UI kit for the chat surface, not a framework. It renders what your model returns and does not decide what to send.

Copied into your repo, not imported

The distribution model is the thing to understand before adopting it, and it is the shadcn/ui model rather than the npm model.

The README explains that components are installed into your configured shadcn/ui components directory, typically @/components/ai-elements/, and become part of your codebase, which allows for full customization. Nothing is added to node_modules that you import from. The source lands in your repository and you own it.

The upside is that there is no version conflict and no black box. If the reasoning display does not do what you want, you edit the file.

The downside is that upgrades are not automatic. A fix upstream does not reach you until you run the add command again, and if you have edited the file, that is a merge you perform by hand. For a component library this is a deliberate trade, and it means AI Elements is best adopted knowing you will maintain a fork in place.

The CLI itself detects your package manager, npm, pnpm, yarn or bun, fetches the registry from elements.ai-sdk.dev, and drives the shadcn/ui CLI underneath.

Installing it

The README recommends running the CLI directly with npx, or using the shadcn CLI against the registry URL:

# Use directly (recommended)
npx ai-elements@latest

# Or using shadcn cli
npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/all.json

The bare command installs every component. For a smaller footprint the README gives the add form with a component name:

npx ai-elements@latest add message

The examples it lists are message, conversation and code-block, and the shadcn CLI route accepts a per-component registry URL such as .../api/registry/message.json.

Running the bare form sets up shadcn/ui if it is not already configured, installs all components, and adds the dependencies they need. Configuration comes from your existing components.json, so the install directory is whatever you already told shadcn/ui to use.

For the recommended setup the README says to configure Vercel AI Gateway and put AI_GATEWAY_API_KEY in .env.local, to use shadcn/ui's CSS Variables mode, and to enable TypeScript.

Wiring the components to useChat

The quick start example in the README composes two components around the AI SDK's useChat hook. The imports come from the local components directory rather than from a package:

"use client";

import { useChat } from "@ai-sdk/react";
import {
  Conversation,
  ConversationContent,
} from "@/components/ai-elements/conversation";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";

The render maps over the messages from useChat and emits a Message per entry with from={message.role}, wrapping MessageResponse inside MessageContent. That nesting is the pattern across the library: a container component, a content component, and a leaf that handles one kind of rendering, in this case markdown response parsing.

Note the "use client" directive at the top. These are client components, which is expected for anything driven by a streaming hook, and it means the chat surface is not server-rendered.

The README lists a Quick Start section but no runnable example beyond this, so expect to read the components you just installed to find the props you need.

Prerequisites that narrow the audience

The README states four requirements, and each one excludes someone.

Node.js 18 or later is the easy one. The second is a Next.js project with the AI SDK installed, which rules out Vite, Remix, SvelteKit and anything not built on React. The third is shadcn/ui already initialised with npx shadcn@latest init. The fourth is Tailwind CSS configured, and the README adds a constraint here: AI Elements supports CSS Variables mode only.

That last constraint bites. If your project uses Tailwind's older theme configuration rather than CSS variables, the components will not pick up your theme correctly, and you are looking at a migration before the first install.

So the realistic user is a team on Next.js, Tailwind with CSS variables, shadcn/ui and the Vercel AI SDK. That is a large and specific audience, and it is also the Vercel stack end to end. The repository topics list exactly that: ai, elements, shadcn-ui, vercel.

If you are on Vue or Svelte, the registry does not help you, and the components would have to be ported by hand.

What the release notes say about streaming

Reading the changelog is the fastest way to see where the sharp edges are, and they are all in streaming.

Version 1.9.0, published on 2026-03-12, fixes JSXPreview flashing between rendered content and parse errors during streaming, by stripping incomplete tags cut off mid-attribute and falling back to the last successfully rendered JSX when a parse error occurs. It fixes Persona crashing in Vite dev mode by deferring WebGL2 context creation, because React Strict Mode's double-mount cycle was exhausting the browser's context limit. It separates select and toggle actions in FileTreeFolder so the chevron expands and the name selects.

Version 1.8.3, published on 2026-02-04, adds a JSX Preview component, adds markdown download for a conversation, fixes a type generic issue in Reasoning, fixes Reasoning components auto-closing, and migrates linting to Oxlint.

That is the profile of a young component library: most of the work is making partial and malformed output render without flicker. Anyone adopting it should expect to hit their own version of these issues with unusual model output.

Building it yourself as the alternative

The real alternative is not another library, it is not using one. A chat interface built directly on the AI SDK's useChat hook plus ordinary shadcn/ui primitives is maybe a few hundred lines: a scroll container, a map over messages, and a markdown renderer.

Choosing that route gives you exactly the behaviour you want and no upstream to chase, and it costs you the streaming edge cases the changelog above is full of, which you will then discover yourself over the following months.

Libraries that install as a normal npm dependency, such as assistant-ui, take the opposite position from shadcn's copy-in model: you import from node_modules, you get fixes on install, and you override behaviour through props and slots rather than by editing files. That is better for teams who do not want to own component source and worse for teams who need to change something the props do not expose.

The decision is whether you want source you can edit or a dependency you can upgrade. AI Elements is firmly the first.

Licence and upkeep

The repository reports its licence as NOASSERTION, meaning the automatic detector could not map it to a standard licence, and the README does not state one. There is a LICENSE file at the root, so read it before shipping, particularly since components installed into your codebase are compiled into your product rather than linked as a dependency.

That distinction matters for compliance. A copied component is your code now, and whatever licence it carries travels with your distribution.

Release cadence is uneven. Version 1.9.0 was published on 2026-03-12, with 1.8.4 and 1.8.3 in early February 2026. The last push to the repository was on 2026-09-01, so about six months of commits sit outside a tag.

The repository is a pnpm and turbo monorepo with apps/, packages/, skills/ and a changeset workflow, plus oxlint for linting and a .claude/ directory. Contributing means editing components in packages/elements and opening a PR to main.

Editorial conclusion

Adopt AI Elements if you are already on Next.js, Tailwind in CSS Variables mode, shadcn/ui and the Vercel AI SDK, and you want a chat surface with streaming markdown, reasoning displays and code blocks without writing them. Skip it on any other stack, because the prerequisites are the Vercel stack end to end, and skip it if you want fixes to arrive by running install, since components are copied into your repository and upgrades are manual merges. Read the LICENSE file before shipping, because the repository licence is reported as NOASSERTION and copied components become part of your product. Start with npx ai-elements@latest add message rather than the full install, and check that your Tailwind setup is in CSS Variables mode first.

Frequently asked questions

Official sources

1. Issues
2. Project website
3. README
4. Releases
5. vercel/ai-elements on GitHub