BoardUI 今日发布

BoardUI 是一款面向 AI 原生产品界面的 React 设计系统，提供聊天、思维指示器、Agent 日志、组合器和侧边栏等 AI 产品特有组件，以及每个仪表盘都需要的表格、卡片和表单组件，全部使用同一种视觉语言设计，可作为源码直接复制到项目中。该项目也是其自身官网——BoardUI 的主页本身就是一个运行中的 AI 聊天界面，用户用自己的模型密钥即可体验完整功能。

核心功能

BoardUI 组件库包含 62 个免费组件，分为应用层组件和基础组件两类：

• Agent 聊天界面：完整的 AI 聊天应用，含侧边栏、流式回复、思维指示器、停止控制、聊天历史本地存储
• Agent 思维指示器：多种思维过程可视化样式（点波、点旋转、星星、无限循环），带时间戳标签
• Agent 日志组件：共享流式日志组件，含渐入动画和曲线引导，支持任务列表和网页搜索背后
• 应用外壳：含侧边栏、手机抽屉和标题内容卡片的页面框架
• 数据表格：基于 TanStack 的数据表格，支持排序、选择和分页
• 认证卡片：支持社交登录和邮箱注册的登录/注册卡片组件
• 通知中心：标签式通知收件箱，支持分组和已读状态管理
• 设计令牌系统：400+ 语义化设计令牌，支持亮色和暗色主题

特色优势

BoardUI 在设计上具有以下差异化特点：

• 源码交付而非 npm 依赖：npx boardui add 将组件文件直接复制到项目中，可随意修改，无需担心运行时依赖问题
• Agent 原生支持：内置 MCP Server 和 Agent Skill，Claude Code、Cursor 等 Agent 可直接浏览组件目录并安装
• 单一视觉语言：Figma 设计优先，400+ 语义化令牌保证所有组件视觉一致性
• 默认无障碍：基于 React Aria Components 构建，Tailwind CSS v4 支持，无需运行时 CSS
• 一键部署示例应用：Vercel 一键部署按钮，粘贴一个 API Key 即可拥有完整可用的 AI 聊天应用

应用场景

BoardUI 适合以下典型场景：

• AI 产品原型开发：快速搭建具有专业视觉质感的 AI 聊天界面和数据看板
• 内部工具开发：利用设计系统组件快速构建企业内部 AI 辅助工具
• Agent 开发框架：为自建 Agent 产品提供经过设计的用户界面组件
• SaaS 产品仪表盘：使用表格、卡片、通知等通用组件快速构建数据密集型界面

适用人群

• 使用 Claude Code、Cursor 等 AI 编程工具的前端开发者
• 需要快速为 AI 产品搭建用户界面的产品团队
• 希望组件可修改可定制而非受限于第三方库的前端工程师
• 追求设计一致性的全栈开发者

出品方

BoardUI 由独立开发团队维护，暂无公开融资信息。项目采用 MIT 许可证开源，组件可免费用于商业项目。

更新动态

BoardUI 持续更新中，最近的更新包括新增 MCP Server 实现、Agent Skill 集成和更多的应用层组件。社区可通过 GitHub Issue 反馈问题或提交组件需求。

官网链接

• 官网：https://www.boardui.com
• GitHub：https://github.com/BoardUI/boardui
• MCP 配置文档：https://www.boardui.com/mcp