SuperAPI AI 工具集

chat-ui

前端与建站

查看项目

更新于 10-15 22:37

技能介绍

用途:为 React/Next.js 应用提供聊天界面构建块,来自 ui.inference.sh,用于快速搭建对话式 UI。

主要能力:提供 ChatContainer(容器)、ChatMessage(消息)、ChatInput(输入框)、TypingIndicator(打字指示器)和头像等组件。消息支持 user(右对齐)、assistant(左对齐)、system(居中)三种角色变体。组件使用 Tailwind CSS 和 shadcn/ui 设计令牌,可通过 className 自定义样式。

使用方式:通过命令安装组件:npx shadcn@latest add https://ui.inference.sh/r/chat.json。随后从 @/registry/blocks/chat 导入组件使用。ChatMessage 接收 role 与 content 属性;ChatInput 接收 onSubmit、placeholder、disabled 属性;TypingIndicator 在加载时条件渲染。完整示例中组合 ChatContainer、ChatMessage、TypingIndicator 与 ChatInput,并用 useState 管理消息列表与加载状态,handleSend 负责追加用户消息并调用 API。

相关技能:完整智能体组件可用 npx skills add inference-sh/skills@agent-ui;声明式组件用 npx skills add inference-sh/skills@widgets-ui;Markdown 渲染用 npx skills add inference-sh/skills@markdown-ui。

适用场景:需要在 React/Next.js 项目中快速集成聊天交互界面的开发者。

限制:资料未提供收费、价格、平台兼容范围及具体性能数据,暂未提供。