Agent Skills
› NeverSight/learn-skills.dev
› chat-ui
chat-ui
GitHub提供基于React/Next.js的聊天UI组件库，包含容器、消息列表、输入框及打字指示器。支持shadcn/ui集成与流式响应，用于快速构建AI助手或自定义聊天界面。
Trigger Scenarios
chat ui
chat component
message list
chat input
shadcn chat
react chat
chat interface
messaging ui
conversation ui
chat building blocks
Install
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.\nComponents: container, messages, input, typing indicators, avatars.\nCapabilities: chat interfaces, message lists, input handling, streaming.\nUse for: building custom chat UIs, messaging interfaces, AI assistants.\nTriggers: chat ui, chat component, message list, chat input, shadcn chat,\nreact chat, chat interface, messaging ui, conversation ui, chat building blocks"
}
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 inferencesh/skills@agent-ui
# Declarative widgets
npx skills add inferencesh/skills@widgets-ui
# Markdown rendering
npx skills add inferencesh/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
Version History
- e0220ca Current 2026-07-05 20:47
Dependencies
-
suggested
inferencesh/skills@agent-ui -
suggested
inferencesh/skills@widgets-ui -
suggested
inferencesh/skills@markdown-ui
