AI Elements are patterns for building agentic interfaces. Each one is a composition of shadcn-vue components that you copy into your project. There is no package to install. The code is yours.
A Chat is a list of Message turns inside a Message Scroller. The steps an agent takes inside a turn, like Reasoning, Tool and Plan, are built on Trace, so every step has the same shape.
Coming from ai-elements-vue.com? See Migrating from AI Elements Vue.
Patterns
Migrating from AI Elements Vue
If you used AI Elements Vue from ai-elements-vue.com, here is what changes.
Existing projects
You do not need to migrate. When you installed components from ai-elements-vue.com, the code was copied into your project. It is yours, and it keeps working as is.
To move a wrapper onto shadcn-vue components, use the prompt in the Migrating from AI Elements Vue section of its pattern page. Paste it into your coding agent. It rebuilds the folder in components/ai-elements on Trace, Code Block and the other shadcn-vue components, and keeps every export and its props, so the code that uses it does not change.
For example, the Queue prompt rebuilds queue/ on Trace, and the Inline Citation prompt rebuilds inline-citation/ on Hover Card.
What replaces each element
Each folder from AI Elements Vue, and the shadcn-vue pattern or component that replaces it.
Elements without a replacement
We did not rebuild these elements. Few projects use them, and each one is also a small composition you can build from components shadcn-vue already has, listed below.
Your copy keeps working. If you still need one of these, open an issue and we will help you build it.
New projects
Build from shadcn-vue components instead.
Add the components
Copy a pattern
Open a pattern above and copy its code into your project. Each page lists any other components it needs.
Or ask your coding agent to do it:
Add the Reasoning pattern from https://www.shadcn-vue.com/docs/ai-elements/reasoning to my chat.Missing an element? Open an issue and tell us what you need.
