Image: affectUI
Why it mattersEvery team building an agent product writes the same screens from scratch. affectUI gives them 40 of those screens.
Every team that builds a product powered by AI agents writes the same screens. A list of tool calls. A tree of sub-agents. An approval button for the agent's next move. affectUI is an open-source React library of those screens, picked up by 401 developers in 27 days.
The project is on GitHub at flohoeller/affectui. It is MIT licensed. The author started it on 3 October 2026 and last pushed changes today. The library gives you 40 free components. More are kept for a paid plan called affectUI Pro, which the README describes alongside the free list.
What's in the box, in affectUI's words
The README says "UI for AI agents. React components for what agents do: runs, tool calls, traces, handoffs and approvals. Plus the rest of your app: inputs, menus, charts, screens, illustrations and motion." Every component is one .tsx file with its styles inside. The README notes there is no Tailwind, no CSS setup, and no animation library.
The free agent components the README shows include a Tool Call Card. It is one line per call, with a timer and a status. A Decision Inbox shows open approvals with two answers each. A Thinking Loader is a small pill for AI replies.
The Pro set adds more. An Agent Tree shows an orchestrator and sub-agents as a live tree, with cost on every card. A Trace Waterfall shows every LLM call and tool call on a timeline. There is also an Agent Inbox, a Context Map, and an Agent Handoff diagram.
Install happens two ways, the README says. The shadcn CLI pulls a component into your project as source you own. A second option is affectUI's own MCP server. It lets Claude Code, Cursor or Codex add a component for you by name. The React version is 19.
Who affectUI says is using it
The README carries a trust row with named developers at Teamworks, RedNote, Cloudforce, Moonshot AI, Terminal49, Meitu and Beacons. These are the names affectUI puts on its own page. Reveneau has not confirmed any of them with the companies themselves. The companies cover sports software, a Chinese social app, cybersecurity, an AI lab, logistics, photo editing and a creator platform. Early users across different industries is one sign. A shared vocabulary is forming for what an agent looks like on screen.
The gap this library tries to fill is real. A team building a chat agent has shadcn/ui and many chart libraries. A team building an agent product has to invent a tool call display. It has to decide what a handoff looks like. It has to draw a trace timeline. And it has to build approvals that read as decisions, not alerts. Each team does it alone, so the design language is scattered.
affectUI's plan is to give the free part away and sell the harder pieces. Those are the live tree, the trace waterfall, and the context treemap. The 40 free items are enough to launch a plain agent product today. The author is one person. If the paid tier does not pay for his time, the project could stall. Teams that adopt it should read the licence. They should also keep a copy of the components in their own repository.
Source
This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.
Get AI News in your inbox
New developer tools, model and agent releases, and how teams are actually using them to release software. Short, and only when there is something worth reading.