Skip to content
Button
Tag
✓
Bobo-element
npm install @bobocn/elementAI 原生组件，开箱即用
为智能对话、流式输出、代码展示等 AI 应用场景而生
为什么选择 Bobo-elements
围绕 AI 应用界面补齐高频交互，同时保留双框架基础组件能力
AI 原生 · 直接组合
内置流式文本、思维链、代码块、聊天消息、Token 信息和对话列表，适合快速搭建智能应用界面。
双框架 · 一套体验
Vue3 与 React 组件目录独立，API 和视觉体验保持一致，团队切换框架时不用重学一套组件。
TypeScript · 类型安全
100% TypeScript 编写，完整的类型推导与智能提示，开发体验拉满。
样式共享 · 视觉统一
基础组件和 AI 组件共用样式体系，Vue 与 React 项目可以保持一致的产品界面。
交互细节 · 开箱即用
对复制、加载、自动滚动、清除按钮、光标状态等常见 AI 产品交互做了内置处理。
26 个组件 · 覆盖全场景
9 个 AI 原生组件配合 17 个基础组件，从对话体验到表单、反馈和数据展示都能衔接使用。
组件总览
9 个 AI 原生组件 + 17 个基础组件，覆盖全场景开发需求
AI 组件 AI
面向 AI 对话、流式输出、代码解释、Markdown 渲染和历史消息列表的高频组件。
表单组件
快速上手
两行代码即可在你的项目中使用
Vue3
import { BButton } from '@bobocn/element/vue'
<template>
<BButton type="primary">
点击我
</BButton>
</template>React
import { Button } from '@bobocn/element/react'
function App() {
return (
<Button type="primary">
Click Me
</Button>
)
}开始使用 Bobo-elements
快速集成到你的 Vue3 或 React 项目中