shadcn-chatbot-kit与Vercel AI SDK集成教程：构建智能对话应用

【免费下载链接】shadcn-chatbot-kit🤖 Beautifully designed chatbot components based on shadcn/ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-chatbot-kit

shadcn-chatbot-kit是一个基于shadcn/ui生态系统构建的全面聊天机器人组件套件，它与Vercel AI SDK无缝集成，使开发者能够轻松构建智能对话应用。本教程将详细介绍如何将这两个强大工具结合使用，创建功能丰富的AI聊天界面。

准备工作：环境搭建

在开始集成之前，确保你的项目满足以下要求：

1. 已安装shadcn/ui及其现代CLI工具
2. React 18或更高版本
3. Node.js 18+环境

首先，克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/sh/shadcn-chatbot-kit cd shadcn-chatbot-kit

如果你还没有设置shadcn/ui，请按照官方安装指南进行安装：

npx shadcn-ui@latest init

安装Vercel AI SDK

shadcn-chatbot-kit设计为与Vercel AI SDK开箱即用。安装必要的依赖：

npm install @ai-sdk/react

核心集成步骤

1. 导入useChat钩子

在你的聊天组件中，从Vercel AI SDK导入useChat钩子：

import { useChat } from "@ai-sdk/react"

2. 配置聊天功能

使用useChat钩子设置聊天功能，指定API端点和其他配置：

const { messages, input, handleInputChange, handleSubmit, append, stop, status, setMessages, } = useChat({ api: "/api/chat", body: { model: selectedModel, }, })

3. 集成shadcn-chatbot-kit组件

将Vercel AI SDK返回的属性传递给shadcn-chatbot-kit的Chat组件：

<Chat className="grow" messages={messages} handleSubmit={handleSubmit} input={input} handleInputChange={handleInputChange} isGenerating={isLoading} stop={stop} append={append} setMessages={setMessages} transcribeAudio={transcribeAudio} suggestions={[ "What is the weather in San Francisco?", "Explain step-by-step how to solve this math problem: If x² + 6x + 9 = 25, what is x?", "Design a simple algorithm to find the longest palindrome in a string.", ]} />

自定义模型选择

shadcn-chatbot-kit允许用户选择不同的AI模型。你可以实现一个模型选择器，让用户在不同的AI模型之间切换：

const MODELS = [ { id: "llama-3.3-70b-versatile", name: "Llama 3.3 70B" }, { id: "openai/gpt-oss-120b", name: "GPT-OSS 120B" }, ] // 在组件中使用Select组件实现模型选择 <Select value={selectedModel} onValueChange={setSelectedModel}> <SelectTrigger className="w-[180px]"> <SelectValue placeholder="Select Model" /> </SelectTrigger> <SelectContent> {MODELS.map((model) => ( <SelectItem key={model.id} value={model.id}> {model.name} </SelectItem> ))} </SelectContent> </Select>

核心功能与特性

shadcn-chatbot-kit与Vercel AI SDK集成后，提供了丰富的功能：

• 自动滚动消息区域：智能滚动行为确保用户始终看到最新消息
• 自动调整大小的消息输入框：支持文件上传
• 内置提示建议：帮助用户快速开始对话
• 消息操作：包括复制、评分响应等功能
• 优雅的加载状态和过渡效果：提升用户体验
• 消息中的Markdown支持：丰富内容展示形式
• 文件附件和图片预览：支持多种媒体类型
• 深色模式支持：适应不同使用环境

自定义AI集成

虽然shadcn-chatbot-kit与Vercel AI SDK无缝集成，但它也支持自定义AI实现。组件设计为与提供者无关，允许你集成任何AI服务：

1. 创建自定义钩子，实现与你的AI服务的通信
2. 遵循shadcn-chatbot-kit的接口规范
3. 将自定义钩子返回的属性传递给Chat组件

详细的自定义集成指南可以在docs/official.md中找到。

故障排除与常见问题

Q: 为什么我的聊天界面没有显示消息？

A: 确保你正确设置了API端点，并且useChat钩子返回的messages数组被正确传递给Chat组件。

Q: 如何添加自定义消息操作？

A: 你可以通过修改registry/default/ui/chat-message.tsx文件来自定义消息操作按钮。

Q: 支持哪些AI模型？

A: Vercel AI SDK支持多种AI模型，包括OpenAI、Anthropic、Google等提供商的模型。你可以在apps/www/registry/default/example/chat-demo.tsx中查看支持的模型列表。

总结

通过本教程，你已经了解了如何将shadcn-chatbot-kit与Vercel AI SDK集成，构建功能强大的智能对话应用。这种组合提供了优雅的UI组件和强大的AI功能，使你能够快速开发出专业级别的聊天界面。

无论是构建客服机器人、AI助手还是任何需要自然语言交互的应用，shadcn-chatbot-kit与Vercel AI SDK的集成都能为你提供坚实的基础。开始探索吧，创建属于你的智能对话体验！

【免费下载链接】shadcn-chatbot-kit🤖 Beautifully designed chatbot components based on shadcn/ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-chatbot-kit