shadcn-chatbot-kit

一个基于shadcn/ui生态系统构建的全面聊天机器人组件套件，与该生态系统完全兼容。在几分钟内即可搭建美观且可定制的人工智能聊天机器人，同时保持对组件的完全控制。

✨ 特性

• 💬 丰富的聊天界面：精美的交互和动画效果，带来极致体验
• 📎 高级附件功能：
  • 上传文件的智能预览
  • 长文本自动转换为附件
  • 支持Markdown并提供语法高亮
• 🧠 思考过程：可视化区块展示大语言模型的推理与思考过程（🚧 开发中）
• 🛠️ 工具集成：
  • 可视化工具执行状态
  • 支持取消正在运行的操作
  • 智能中断提示
• 🎨 完全可主题化：利用shadcn/ui的主题系统实现彻底的视觉定制
• 🌓 暗色/亮色模式：内置主题切换支持
• 🎯 开发者体验：
  • 与shadcn CLI无缝协作
  • 简单的组件安装与更新
  • 可组合的API设计，方便自定义实现
• 🎤 语音输入：支持语音转文字，实现免提交互（🚧 开发中）
• 📦 复制&粘贴组件：只安装你需要的组件，完全掌控你的组件
• 🔧 高度可定制：可修改组件的任意方面以满足你的需求
• 📱 响应式设计：在所有设备尺寸上都能完美适配
• 🚀 现代代码：采用最新的Web标准与最佳实践构建

🧩 组件

该套件包含构建一个功能齐全聊天机器人的所有必要组件：

• 聊天：预构建的聊天组件，也可使用可组合组件自行构建自定义聊天
• 自动滚动消息区域：针对新消息的智能滚动行为
• 消息输入：
  • 自动调整大小的文本域
  • 文件上传支持
  • 附件文件预览
• 提示建议：为用户提供快捷操作按钮帮助
• 消息操作：内置复制、评价回复及其他实用按钮
• 加载状态：优雅的加载指示器与过渡效果

📦 安装

1. 首先，在你的项目中按照shadcn/ui的安装指南进行安装。

2. 确保你使用的是现代化的shadcn CLI（而非旧版的shadcn-ui）。

3. 使用CLI安装组件。

访问文档，获取详细的安装说明及可用组件的完整列表。

🚀 快速开始

注意：此示例使用了Vercel AI SDK。请先按照官方快速入门指南完成设置，再使用本示例。

"use client"

import { useChat } from "ai/react"

import { Chat } from "@/components/ui/chat"

export function ChatDemo() {
  const { messages, input, handleInputChange, handleSubmit, status, stop } =
    useChat()


  const isLoading = status === 'submitted' || status === 'streaming'

  return (
    <Chat
      messages={messages}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isGenerating={isLoading}
      stop={stop}
    />
  )
}

🎨 自定义

所有组件均基于shadcn/ui的样式系统构建，可通过CSS变量实现完全自定义。 访问我们的主题定制器，直观地设计你的聊天机器人的外观。

🤝 贡献

我们始终欢迎贡献！你可以：

• 提交Bug报告与功能请求
• 开启Pull Request改进代码库
• 分享反馈与建议

👨‍⚖️ 许可证

根据MIT许可证授权。

shadcn-chatbot-kit 快速上手指南

环境准备

• 系统要求：Node.js 18+，npm 8+ 或 yarn 1.22+
• 前置依赖：
  • 已安装 shadcn/ui（推荐使用官方 CLI）
  • 使用现代 shadcn CLI（非旧版 shadcn-ui）
  • 推荐使用 Next.js 14+ App Router 项目（与 Vercel AI SDK 兼容）

✅ 建议使用国内镜像源加速：npm config set registry https://registry.npmmirror.com

安装步骤

1. 确保已按 shadcn/ui 安装文档 完成基础配置。

2. 使用 shadcn CLI 安装聊天组件：

npx shadcn-ui@latest add chat

如需安装其他组件（如文件上传、提示词建议等），可重复执行命令添加：

npx shadcn-ui@latest add message-input prompt-suggestions

3. 查看完整组件列表与安装说明：shadcn-chatbot-kit 文档

基本使用

使用 Vercel AI SDK 快速集成一个可交互的聊天界面：

"use client"

import { useChat } from "ai/react"
import { Chat } from "@/components/ui/chat"

export function ChatDemo() {
  const { messages, input, handleInputChange, handleSubmit, status, stop } =
    useChat()

  const isLoading = status === 'submitted' || status === 'streaming'

  return (
    <Chat
      messages={messages}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isGenerating={isLoading}
      stop={stop}
    />
  )
}

⚠️ 使用前请先完成 Vercel AI SDK 快速入门 配置。

组件默认支持深色/浅色主题，可通过 shadcn/ui 的 CSS 变量进行全量自定义，主题预览：主题定制器