ai-elements-chatbot

仓库创建 2025年11月8日最近提交 29 天前SkillHot 收录 22 天前

▸ 精选理由

提供流式、工具调用和推理可视化的完整组件，适合快速搭建聊天界面。

这个 Skill 做什么

基于 shadcn/ui 的生产级 AI 聊天界面组件集合。

基于 shadcn/ui 的聊天组件包，包含消息流、工具/函数调用展示和推理可视化，支持流式输出并兼容 Vercel AI SDK v5 与 Tailwind。适合用来快速搭建生产级 AI 聊天界面、显示工具调用过程或调试流式响应。组件齐全、易集成，能显著缩短从原型到上线的开发周期。

▸ 展开 SKILL.md 英文原文

shadcn/ui AI chat components for conversational interfaces. Use for streaming chat, tool/function displays, reasoning visualization, or encountering Next.js App Router setup, Tailwind v4 integration, AI SDK v5 migration errors.

开发编程聊天组件前端组件React通用

180

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/secondsky/claude-skills/main/plugins/ai-elements-chatbot/skills/ai-elements-chatbot/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/secondsky/claude-skills/main/plugins/ai-elements-chatbot/skills/ai-elements-chatbot/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# AI Elements Chatbot Components

**Status**: Production Ready ✅ | **Last Verified**: 2025-11-18

---

## What Is AI Elements?

Production-ready chat UI components for AI applications:
- Built on shadcn/ui
- 30+ components (Message, Conversation, Response, etc.)
- Works with Vercel AI SDK v5
- Streaming support
- Tool/function call displays
- Reasoning visualization

---

## Quick Start (15 Minutes)

### Prerequisites

- Next.js 15+ (App Router)
- shadcn/ui initialized
- Tailwind v4
- AI SDK v5+

### 1. Initialize

```bash
pnpm dlx ai-elements@latest init
```

### 2. Add Components

```bash
pnpm dlx ai-elements@latest add message conversation response prompt-input
```

### 3. Create Chat Int

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有