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

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

Styling

Components use Tailwind CSS and shadcn/ui design tokens:

小蔥技能站7w4.net每天更新，海量AI技能等你發現。

<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

這個 Skill 提供了聊天介面所需的元件和詳細使用說明，文件清晰易懂，安裝使用方便，適合快速搭建聊天功能。主要優點是提供了完整的示例和樣式定製方法；不足是缺少 API 詳細引數說明和錯誤處理建議，對新手可能不夠友好。總體質量中等偏上，文件實用但仍有完善空間。