affectUI vs assistant-ui
assistant-ui is a chat framework: primitives such as Thread, Composer and Message plus runtimes that connect them to the AI SDK, LangGraph and other backends, MIT-licensed, with an optional Assistant Cloud for thread history. affectUI is not a runtime – it is finished, designed components for AI products, especially for agent work beyond the chat thread. Pick assistant-ui when you want chat state handled for you, affectUI when you want the views to look finished – or use both.
What each one is
- assistant-ui – a React library for AI chat: composable primitives, runtimes for the AI SDK, LangGraph and custom backends, streaming, auto-scroll, retries, attachments and tool UIs. MIT, with an optional hosted Assistant Cloud
- affectUI – 126 components, screens, blocks, illustrations and motion effects for AI products, each a single .tsx file with its own CSS and motion, taking plain props
Where they differ
- Kind: assistant-ui keeps the chat state – messages, branches, streaming – and renders it; affectUI renders what you pass in and leaves state to you
- Install: assistant-ui adds its npm packages, a runtime adapter, shadcn/ui components and Tailwind-based styles; affectUI adds one .tsx file per component and needs only React 19
- Scope: assistant-ui centers on the chat thread and the tool UIs inside it; affectUI covers the chat parts and the rest of an agent product – agent trees, traces, approvals, inboxes, costs and app screens
- Look: assistant-ui gives shadcn-style defaults you restyle; affectUI ships designed states and motion in two styles
- Price: assistant-ui is MIT with an optional paid cloud; affectUI has 40 free MIT items and a one-time Pro license
Using both together
assistant-ui lets you render a tool call with your own component, and that is a good place for affectUI: show a running tool as a Tool Call Card, or a call that needs a person as an Approval Card. Outside the thread, affectUI's agent views – a trace, an agent tree, a decision inbox – sit next to it in the same app.
- 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
- Approval Card – An agent asks before it acts – risk badge, preview, Approve and Deny with shortcuts, a pausing countdown, and a smooth morph into a resolved row
- Decision Inbox – Open decisions with two quick answers each – answered ones confirm and fold away
Which to pick
- You want a working chat with branching, retries and persistence quickly, and will style it yourself – assistant-ui
- You already have the chat state (from the AI SDK, LangGraph or your API) and want UI that looks finished – affectUI
- Your product is more agent than chat – runs, traces, approvals, several agents – affectUI covers those views
- Agent Inbox – All your background agent tasks in one calm list – live clocks and status tags, filter tabs with rolling counts, rows that unfold to the last steps with Approve, Reject, Retry or Open, and glide to their new place
- 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
- Chat Composer – Prompt composer with model picker, voice input, app connections and approval request
Questions
Is affectUI an alternative to assistant-ui?
Partly. Both have chat UI, but assistant-ui is a framework that manages chat state, while affectUI is components that render your state. They fit together: assistant-ui for the thread, affectUI for tool calls, approvals and agent views.
Does affectUI have a runtime or backend?
No. affectUI is UI only. Connect it to the AI SDK, LangGraph, assistant-ui or your own API by passing props.
Does affectUI need Tailwind or shadcn/ui?
No. It installs through the shadcn CLI, but each component carries its own CSS and doesn't import shadcn/ui.
Updated 2026-10-29