---
id: sm-chat-ui
name: "chat-ui"
url: https://skills.yangsir.net/skill/sm-chat-ui
author: inferen-sh
domain: ai-frontend-engineering
tags: ["chat-ui", "user-interface", "web-components", "real-time-communication", "frontend-development"]
install_count: 14000
rating: 4.50 (560 reviews)
github: https://github.com/inferen-sh/skills
---

# chat-ui

> 专注于前端聊天界面开发，通过API为Agent提供交互能力，构建用户友好的对话体验。

**Stats**: 14,000 installs · 4.5/5 (560 reviews)

## Before / After 对比

### 用户交互体验与开发效率

| Metric | Before | After | Change |
|---|---|---|---|
| - | - | - | - |
| - | - | - | - |

## Readme

# chat-ui

# Chat UI Components

Chat building blocks from [ui.inference.sh](https://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](https://inference.sh/docs/agents/chatting) - Building chat interfaces

- [Agent UX Patterns](https://inference.sh/blog/ux/agent-ux-patterns) - Chat UX best practices

- [Real-Time Streaming](https://inference.sh/blog/observability/streaming) - Streaming responses

Component docs: [ui.inference.sh/blocks/chat](https://ui.inference.sh/blocks/chat)
Weekly Installs8.6KRepository[inferen-sh/skills](https://github.com/inferen-sh/skills)GitHub Stars159First Seen6 days agoSecurity Audits[Gen Agent Trust HubFail](/inferen-sh/skills/chat-ui/security/agent-trust-hub)[SocketPass](/inferen-sh/skills/chat-ui/security/socket)[SnykPass](/inferen-sh/skills/chat-ui/security/snyk)Installed onclaude-code6.9Kgemini-cli6.0Kcodex6.0Kamp6.0Kgithub-copilot6.0Kopencode6.0K

---
*Source: https://skills.yangsir.net/skill/sm-chat-ui*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-chat-ui/markdown*