affectUI vs prompt-kit
prompt-kit is a free, MIT-licensed set of building blocks for AI chat – prompt input, message, markdown, reasoning, tool, steps, chain of thought and more – installed with the shadcn CLI on top of shadcn/ui and Tailwind CSS. affectUI covers the chat too, but goes further into agent work – agent trees, traces, approvals, inboxes, costs – and ships each component as one designed file without Tailwind or other dependencies. For a plain chat in your shadcn/ui theme, prompt-kit is enough; for agent views and a finished look, affectUI.
What each one is
- prompt-kit – about 20 components for AI chat interfaces (prompt input, message, markdown, code block, chat container, reasoning, tool, steps, chain of thought, sources, file upload, feedback bar, loaders) and blocks such as a chatbot and tool calling. Built on shadcn/ui and Tailwind CSS, installed with the shadcn CLI, MIT
- affectUI – 126 components, screens, blocks, illustrations and motion effects for AI products, each a single .tsx file with its own CSS and motion
Where they differ
- Setup: prompt-kit needs shadcn/ui set up first and Tailwind CSS, and some pieces pull in shadcn components and lucide-react; affectUI needs React 19 and nothing else
- Scope: prompt-kit focuses on the chat window; affectUI covers the chat and the agent product around it – multi-agent trees and lanes, trace waterfalls, approvals and autonomy, inboxes, cost and context views, app screens
- Look: prompt-kit takes on your shadcn/ui theme and stays plain so you style it; affectUI ships designed states and motion, in two styles (classic and clean)
- Price: prompt-kit is free; affectUI has 40 free MIT items and a one-time Pro license for the rest
Where they overlap
Both have the basic chat pieces: a tool call, a reasoning or thinking state, a loader and actions under a message. If those are all you need and your app already runs on shadcn/ui and Tailwind, prompt-kit fits in with no extra styles. affectUI's free versions of these – Tool Call Card, Thinking Loader and Message Actions – work in any React project and come with their states and motion designed.
- 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
- Thinking Loader – A small working pill for AI replies – an eight-ray spinner and a shimmering label that rolls through phases and settles on a check
- Message Actions – The quiet bar under an AI message – copy turns into a check, regenerate spins and unfolds a version switcher, thumbs pop and ask why, read aloud becomes a tiny equalizer
Which to pick
- A chat in your shadcn/ui theme, styled yourself, free – prompt-kit
- Agent views beyond the chat – traces, agent trees, approvals, costs – affectUI
- A project without Tailwind, or one that should look finished without design work – affectUI
- Both in one project: they install through the same shadcn CLI, and affectUI's styles stay inside its own components
- 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
- 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
Questions
Is affectUI an alternative to prompt-kit?
For the chat parts, yes – both have tool calls, thinking states and message actions. affectUI also covers agent views prompt-kit doesn't, such as agent trees, traces and approvals.
Does affectUI need shadcn/ui or Tailwind CSS?
No. It installs through the shadcn CLI, but each component carries its own CSS and doesn't import shadcn/ui.
Do both work with the Vercel AI SDK?
Yes. Both are UI components you feed with data – messages, status, tool arguments and results – from the AI SDK or any other backend.
Updated 2026-10-29