boardui - 面向智能体界面的 React 设计系统

boardui 是一个面向智能体（agentic）界面的 React 设计系统。按项目自述，它把 AI 产品需要的组件和普通仪表盘需要的组件放进同一套视觉语言里，并且不是以依赖包的形式引入，而是把源码文件直接复制进你的项目。它适合正在做 AI 聊天、智能体控制台或数据仪表盘的前端团队，也适合希望让编码智能体按统一规范生成界面的开发者。仓库本身是免费层的全部内容，其官网首页就是一个可运行的 AI 聊天示例。

维护者与状态

项目由 BoardUI 维护，仓库地址为 github.com/BoardUI/boardui。仓库创建于 2026-09-01，最后提交时间为 2026-09-05。截至 2026-09-29，星标数为 550。事实表显示该项目尚无正式 release，因此目前没有可引用的版本号，使用时应以仓库当前状态为准。许可证为 MIT。

主要能力

以下内容均来自项目自述（README），属于维护者的自我描述，未经独立验证。

据项目说明，boardui 的定位有几点：一是为智能体产品而建，聊天、思考指示器、智能体日志、输入框和侧边栏，与它们周围的表格、卡片和表单放在一起；二是「源码而非依赖」，通过 npx boardui add 把文件复制进项目，之后可以随意修改；三是统一的视觉语言，先做 Figma，包含 400 多个语义 token，亮色与暗色共用同一套类名；四是默认可访问性，底层使用 React Aria Components，上层是 Tailwind CSS v4，无运行时 CSS；五是「智能体原生」，提供 MCP server、agent skill、AGENTS.md 规则和 llms.txt，让编码智能体按这套系统来构建。

仓库内容方面，README 称包含全部 62 个免费条目，以源码形式提供，涵盖基础组件、应用区块、token 与字号体系。仓库还带一个应用：根路径 / 是一个聊天界面，另有使用两个免费图表的仪表盘，以及登录和注册页面，全部由仓库内的组件搭建。聊天记录保存在访客浏览器中，不使用数据库。其中 app/api/chat/route.ts 在服务端读取密钥并流式返回回复，密钥不会到达浏览器。

组件分为两类。应用区块包括 Agent Chat（可用的聊天应用，含应用侧边栏、流式回复、思考指示器、带停止控制的输入胶囊、本地线程切换的聊天历史栏，以及未配置密钥时的提示）、Agent Log（共享的流式日志机制，含逐字显示、带柔和裁切边缘的模糊淡入，以及自绘的曲线树状引导线）、Agent Thinking（思考指示器，含点波、点旋、星形和无限循环变体，带微光标签与计时器）、App Shell、Auth Card、Composer Loader、Data Table（基于 TanStack，支持排序、选择与分页）、Important Alerts Card、Notification Center、Orders Chart Card、Patient Info Card、Revenue Chart Card、Settings Modal、Sidebar、Stat Cards、Theme Toggle 等。基础组件包括 Announcement、Avatar、Badge、Breadcrumb、Button、Button Group、Carousel、Checkbox、Checkbox Card、Chip、Close Button、Date Picker、Date Range Picker、Divider、Dropdown、File Upload、Icon Button 等。

使用入口

仓库地址：github.com/BoardUI/boardui。官网：www.boardui.com。

据 README，本地运行方式为：

npm install
cp .env.example .env.local
# then put your key in AI_API_KEY
npm run dev

把组件安装进已有 Next.js 项目，可以用 CLI：

npx boardui@latest list
npx boardui@latest add data-table
npx boardui@latest add --all

也可以让编码智能体代劳。README 称 BoardUI 提供 MCP server，Claude Code、Cursor 及其他 MCP 客户端可以浏览目录并代为安装，添加方式为：

claude mcp add boardui -- npx -y boardui@latest mcp

其他客户端在 MCP 配置中加入同一个 server 即可。之后用自然语言描述需求，例如「安装全部免费 BoardUI 组件」会一次性安装整个免费目录，「给仪表盘加一个数据表格和统计卡片」则只安装这些并接好线。README 称 AGENTS.md 中的规则会让智能体构建的内容沿用 BoardUI 的 token 与字号体系。

关于模型密钥，README 说明只需要一个变量，服务商会从密钥本身识别：sk-ant- 开头对应 Anthropic，sk-or- 对应 OpenRouter，sk- 对应 OpenAI，AIza 对应 Google Gemini，vck_ 对应 Vercel AI Gateway，gsk_ 对应 Groq，xai- 对应 xAI。可以用 CHAT_MODEL 指定其他模型；对于密钥没有可识别形状的服务商，如 Mistral 或 DeepSeek，需要额外设置 AI_PROVIDER；对于任何 OpenAI 兼容服务（Ollama、LM Studio、vLLM、LiteLLM、Together），设置 AI_BASE_URL 与 CHAT_MODEL。各服务商惯用的环境变量名同样可用。

许可与限制

许可证为 MIT。项目自述中提到的限制与边界包括：该仓库由 BoardUI 的源码生成，不接受 pull request，贡献方式见仓库中的 CONTRIBUTING.md；聊天记录只保存在访客浏览器中，没有数据库；密钥虽然不会到达浏览器，但聊天本身对任何拿到你 URL 的人开放，因此 README 建议在服务商支持时为密钥设置消费上限，用它来约束成本；组件安装面向 Next.js 项目，底层依赖 React Aria Components 与 Tailwind CSS v4。事实表显示项目尚无正式 release，仓库创建与最后提交都集中在 2026 年 9 月初，使用前建议先查看仓库当前状态与文档。