Agent Skills
› NeverSight/learn-skills.dev
› chat-ui
chat-ui
GitHub提供基于React/Next.js和shadcn/ui的聊天UI组件库，包含容器、消息列表、输入框及打字指示器。适用于构建自定义聊天界面、消息系统及AI助手前端。
触发场景
chat ui
chat component
message list
chat input
shadcn chat
react chat
chat interface
messaging ui
conversation ui
chat building blocks
安装
npx skills add NeverSight/learn-skills.dev --skill chat-ui -g -y
SKILL.md
Frontmatter
{
"name": "chat-ui",
"description": "Chat UI building blocks for React\/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat interfaces, message lists, input handling, streaming. Use for: building custom chat UIs, messaging interfaces, AI assistants. Triggers: chat ui, chat component, message list, chat input, shadcn chat, react chat, chat interface, messaging ui, conversation ui, chat building blocks"
}
Install the belt CLI skill:
npx skills add belt-sh/cli
Chat UI Components
Chat building blocks from ui.inference.sh.
Quick Start
# Install chat components
npx shadcn@latest add https://ui.inference.sh/r/chat.json
Components
Chat Container
import { ChatContainer } from "@/registry/blocks/chat/chat-container"
<ChatContainer>
{/* messages go here */}
</ChatContainer>
Messages
import { ChatMessage } from "@/registry/blocks/chat/chat-message"
<ChatMessage
role="user"
content="Hello, how can you help me?"
/>
<ChatMessage
role="assistant"
content="I can help you with many things!"
/>
Chat Input
import { ChatInput } from "@/registry/blocks/chat/chat-input"
<ChatInput
onSubmit={(message) => handleSend(message)}
placeholder="Type a message..."
disabled={isLoading}
/>
Typing Indicator
import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator"
{isTyping && <TypingIndicator />}
Full Example
import {
ChatContainer,
ChatMessage,
ChatInput,
TypingIndicator,
} from "@/registry/blocks/chat"
export function Chat() {
const [messages, setMessages] = useState([])
const [isLoading, setIsLoading] = useState(false)
const handleSend = async (content: string) => {
setMessages(prev => [...prev, { role: 'user', content }])
setIsLoading(true)
// Send to API...
setIsLoading(false)
}
return (
<ChatContainer>
{messages.map((msg, i) => (
<ChatMessage key={i} role={msg.role} content={msg.content} />
))}
{isLoading && <TypingIndicator />}
<ChatInput onSubmit={handleSend} disabled={isLoading} />
</ChatContainer>
)
}
Message Variants
| Role | Description |
|---|---|
user |
User messages (right-aligned) |
assistant |
AI responses (left-aligned) |
system |
System messages (centered) |
Styling
Components use Tailwind CSS and shadcn/ui design tokens:
<ChatMessage
role="assistant"
content="Hello!"
className="bg-muted"
/>
Related Skills
# Full agent component (recommended)
npx skills add inference-sh/skills@agent-ui
# Declarative widgets
npx skills add inference-sh/skills@widgets-ui
# Markdown rendering
npx skills add inference-sh/skills@markdown-ui
Documentation
- Chatting with Agents - Building chat interfaces
- Agent UX Patterns - Chat UX best practices
- Real-Time Streaming - Streaming responses
Component docs: ui.inference.sh/blocks/chat
版本历史
- c3c0a1e 当前 2026-07-23 06:53
依赖关系
-
suggested
belt-sh/cli -
suggested
inference-sh/skills@agent-ui -
suggested
inference-sh/skills@widgets-ui -
suggested
inference-sh/skills@markdown-ui
