▲ Introducing AI Elements by Vercel The shadcn component library for building AI-native apps. $ npx ai-elements

Shoutout to the GOAT @ryanharaki_ for the collab on this. Also if you're familiar with the Kibo AI components, I donated them to Vercel to form the foundation of project! We've made some fantastic improvements though... 👇

1/ New Components As AI interfaces evolve, we're seeing more patterns emerge from concepts like RAG, MCP and Deep Research. To help build for these, we've created these additional components... 🖱️ Actions 🌉 Image 💬 InlineCitation 🌀 Loader ✅ Task 🖥️ WebPreview

2/ CodeBlock simplified for typical AI responses Code blocks in Markdown are typically simple. The Kibo UI code block, while very powerful, is too much overhead for this. We've rebuilt the Code Block component so it's a lot simpler.

3/ @v0 style icons Components like Reasoning, Source and Task now have icons prefixing their Trigger title, like you'd find on v0. This makes them much nicer to look at when used in a more agentic fashion.

4/ Animations All collapsible components (Task, Sources, Reasoning, etc.) have animations when you open and close them! A nice little quality of life improvement.

5/ A better Response component The Response component's react-markdown implementation is now wrapped in our markdown-sanitizers package (thank u @cramforce) to help secure your AI agents. It also has intelligent parsing that auto-completes unterminated formatting and hides incomplete links. Additionally, it can render mathematical equations now!

6/ Seamless integration with AI SDK Component types have been improved for more seamless integration with AI SDK. You can still bring any provider you'd like though 😅

7/ Misc rendering improvements There's been a ton of small tweaks around the place. For example, Tool component parameters are rendered in a CodeBlock!

We hope you enjoy AI Elements! Follow me @haydenbleasel for updates. Also, Like/Repost the quote below if you can:

@vercel @shadcn Shouldn't this Props subheading be named Components?

@vercel @shadcn

@vercel @shadcn You've done an awesome job btw! I think we'll be migrating to these elements tomorrow :)

@vercel @shadcn this is awesome

@vercel @shadcn DOPE

@vercel @shadcn insane! do you plan to use this in Chat SDK repo instead of the custom UI components?

@vercel @shadcn ok kinda based

@vercel @shadcn Welcome! Would love to see artifacts.

@vercel @shadcn Banger

@vercel @shadcn Very cool! I'm curious, the JSON on looks to be a single item schema, and it's installed with ?components=name... is this a new thing on Shadcn side?

@vercel @shadcn That's a dynamically generated registry pattern that I'll be sharing more about real soon 😄

@vercel @shadcn Nice! Do you have a utility to help build that? Maintaining the json against the codebase isnt amazing DX at the moment

@vercel @shadcn Working on it this weekend! Will share next week

@vercel @shadcn Hey, did you manage to work/publish this anywhere?

@vercel @shadcn holy shit

@vercel @shadcn Congrats on the 🚢!

@vercel @shadcn Looking great 🔥 what's wrong with Why build two of the same? Genuinely asking

@vercel @shadcn Love it

@vercel @shadcn 🔥

@vercel @shadcn dope 🤌🏽

@vercel @shadcn Love it!

@vercel @shadcn @zernonia 👀 port to vue?

@vercel @shadcn This is awesome !

@vercel @shadcn 👍。can’t wait to try this one.

@vercel @shadcn this is so fire

@vercel @shadcn Congrats. Very nice components, I’ll use it for sure

@vercel @shadcn Congrats on the launch boss. Clean gradient animation here, couldn't help but notice the "flicker" when the cursor leaves the element. Just thought it stood out compared to the animation of the AI SDK logo. Props to you and the team styll 🫡

@vercel @shadcn one of the best dx @shadcn ui has given to devs... it just simplifies everything... 🔥

@vercel @shadcn I noticed the Chat SDK repo (ai-chatbot) has not been updated in a month or so. Do you think we should expect Chat SDK to be updated to use AI Elements and have some new features like MCP server management? Or is Chat SDK replaced by AI Elements?

@vercel @shadcn Yessir, eventually we expect Chat SDK components to merge with AI Elements so they're like iterative building blocks for AI-native web applications. I'll let you know once we start working on it 😅

@vercel @shadcn This looks very promising

@vercel @shadcn goated

@vercel @shadcn So cool. This is wonderful.

@vercel @shadcn looks super cool, gonna give it a try

@vercel @shadcn Can’t wait to instrument

@vercel @shadcn You guys cooked! 👨🏻‍🍳

@vercel @shadcn @developedbyed

@vercel @shadcn Ahhh, very nice!!!

@vercel @shadcn this is actually huge. @BraceSproul demo coming soon for langgraph integration?

@vercel @shadcn Those are some really components. My fav component is the loader 😉

@vercel @shadcn this is so good. you have to export the useCarousel hook from the shadcn primitive for the inlinechat element, but everything else is beautiful.