affectui - 面向 AI 智能体的 React 组件库

affectui 是一个面向 AI 智能体界面的 React 组件库。据项目自述，它覆盖两类需求：一类是智能体本身会产生的界面元素，例如运行过程、工具调用、调用链、智能体之间的交接、审批与上下文窗口；另一类是应用其余部分所需的输入框、菜单、图表、页面区块、插图和动效。它适合正在构建 AI 产品前端、希望快速拿到可读可改源码的 React 开发者，也适合让编码助手直接往项目里添加组件的团队。

维护者与状态

项目由 flohoeller 维护，仓库创建于 2026-10-03，最后提交时间为 2026-10-29。截至 2026-10-29，仓库获得 379 个星标。事实表显示该项目尚无正式 release，也就是说目前没有可引用的版本号，使用者需要直接跟随仓库主分支或通过组件注册表按需取用单个组件。

主要能力

以下内容均来自项目 README 的自述，属于维护者的描述而非中立评测：

• 为智能体而做。 项目称其组件针对智能体的真实行为设计，包括子智能体树、工具调用、带每步成本的调用链、交接、审批和上下文窗口，呈现的是实时状态而非静态稿。
• 对 AI 工具友好。 项目提供 MCP 服务器与 llms.txt，让 Claude Code、Cursor、Codex 或 v0 等工具自行检索组件、读取文档并添加到项目中。
• 单文件交付。 每个组件是一个 .tsx 文件，样式写在文件内部，不需要 Tailwind，也不需要额外的 CSS 配置或动画库。
• 动效与暗色模式。 README 称包含形变、错峰出现、滚动数字和平滑状态切换，并遵循 prefers-reduced-motion；当祖先元素带有 dark 类或 data-theme="dark" 时自动切换暗色。
• 可访问性与响应式。 项目自述使用真实的按钮与标签、支持键盘操作，并在关键处使用 live region；布局基于容器查询，组件按自身可用空间而非窗口宽度自适应。
• 组件范围。 README 列出的免费组件包括按钮、变更摘要、评论串、决策收件箱、邮件草稿、筛选菜单、消息操作栏、通知堆叠、验证码输入、个人资料菜单、进度追踪、反应栏、分段控件、智能推荐、思考加载指示器、提示面板和工具调用卡片等；另有 Logo Marquee、Testimonial Wall 两个区块，以及 Agent Team、Cover Flow、地区地图等插图。README 同时说明，标注为 Pro 的条目属于 affectUI Pro，不在该仓库中。

使用入口

仓库地址为 flohoeller/affectui，项目官网为 affectui.com，组件文档与安装命令可在官网各组件页面查看。

据 README，安装前需要 React 19（是否使用 TypeScript 均可），适用于 Next.js、Vite、Remix 或纯 React 项目；若使用 shadcn CLI，还需要 @/* 导入别名。安装方式有三种：

• 用 shadcn CLI 按注册表地址添加单个组件，文件会落到 components/ui 目录：

npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json

• 在 components.json 中注册命名空间后使用短名安装：

{
  "registries": {
    "@affectui": "https://www.affectui.com/r/{name}.json"
  }
}

npx shadcn@latest add @affectui/reaction-bar

• 直接从仓库的 components/、illustrations/ 或 motion/ 目录复制文件到自己的项目中再导入。

README 还说明可以接入 MCP 服务器，让编码助手代为检索和添加组件，或直接把助手指向 llms.txt 使用；具体配置以其文档为准。

许可与限制

项目采用 MIT 许可证。需要注意的边界条件包括：项目自述要求 React 19，使用 shadcn CLI 时需要配置 @/* 导入别名；仓库中不包含标注为 Pro 的组件，这部分属于 affectUI Pro，不在开源仓库范围内；事实表显示项目尚无正式 release，接口与文件结构可能随提交变化，接入前建议锁定具体提交或自行留存组件源码。此外，README 中的能力描述均为项目自述，实际表现需在目标项目中自行验证。