affectUI vs AI Elements
AI Elements is Vercel's set of chat and agent building blocks, built on shadcn/ui and Tailwind CSS and made for the AI SDK. affectUI is a set of finished, designed components for AI products – including agent views AI Elements doesn't have, like agent trees, trace waterfalls, approval inboxes and cost ledgers – each one .tsx file without Tailwind or other dependencies. Use AI Elements for chat tied closely to the AI SDK, affectUI for the product around it, or either one alone.
What each one is
- AI Elements – Vercel's component registry for AI apps: conversation, message, prompt input, reasoning, tool, sources and citations, plus pieces for code, voice and workflow canvases. Built on shadcn/ui, styled with Tailwind CSS 4, made to work with the AI SDK
- affectUI – 126 components, screens, blocks, illustrations and motion effects for AI products, each a single .tsx file with its own CSS and motion. UI only with plain props, so it works with any backend
Where they differ
- Setup: AI Elements expects React 19, Tailwind CSS 4, an initialized shadcn/ui and the AI SDK; affectUI needs React 19 and nothing else
- Backend: AI Elements is shaped around the AI SDK's messages and status; affectUI components take plain props, so the AI SDK, LangGraph or your own API fit the same way
- Look: AI Elements takes on your shadcn/ui theme and stays plain; affectUI ships designed states and motion, in two styles (classic and clean)
- Scope: AI Elements covers chat, code and workflow canvases; affectUI goes further into multi-agent work – agent trees, lanes, handoffs, queues, findings, cost and token ledgers, approvals, autonomy settings – and adds full app screens
- Price: AI Elements is free; affectUI has 40 free MIT items and a one-time Pro license for the rest
AI Elements is moving into shadcn/ui
As of October 2026, the AI Elements site says the project is moving to shadcn/ui and will be deprecated at the end of November 2026, and points new projects to install it from shadcn/ui. If you start a project now, check there for where the components live. affectUI isn't affected: it installs through the shadcn CLI from its own registry either way.
Using affectUI with the AI SDK
affectUI components don't read AI SDK state themselves – you pass it in as props. A tool part from useChat, for example, maps straight onto the Tool Call Card:
import { ToolCallCard } from "@/components/ui/tool-call-card";
// inside message.parts.map(...)
if (part.type.startsWith("tool-")) {
return (
<ToolCallCard
key={part.toolCallId}
name={part.type.slice(5)}
status={part.state === "output-available" ? "success" : part.state === "output-error" ? "error" : "running"}
args={part.input}
result={part.output}
error={part.errorText}
/>
);
}Which to pick
- You want chat that follows your shadcn/ui theme and is wired to the AI SDK with little code – AI Elements
- You want the product to look finished, or you need agent views beyond the chat – traces, agent trees, approvals, costs – affectUI
- You don't use Tailwind or the AI SDK – affectUI, since it needs neither
- Both work in one project: they install through the same shadcn CLI into different folders
- Agent Tree – Who started whom – an orchestrator and its sub-agents as a live tree, with status, cost and time on every card, costs rolling up each branch, and branches that fold to one line
- Trace Waterfall – Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent
- Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up
Questions
Is affectUI built on AI Elements?
No. affectUI components are self-contained and don't import AI Elements, shadcn/ui or Tailwind. Both install through the shadcn CLI, so they can live in the same project.
Does affectUI work with the Vercel AI SDK?
Yes. The components take plain props such as status, text, arguments and results, so you map what useChat or streamText returns onto them – see the tool call example above.
Does affectUI need Tailwind CSS?
No. Each component carries its own CSS with color variables, so it works with or without Tailwind.
Which is free?
AI Elements is free. affectUI has 40 free, MIT-licensed items – among them Tool Call Card, Thinking Loader and Message Actions – and a one-time Pro license for the rest.
Updated 2026-10-29