# Chat UI

Chat UI building blocks for React/Next.js from ui.inference.sh.

- Repository: https://github.com/inference-sh/skills (795 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-15
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add inference-sh/skills --skill chat-ui -g -a claude-code -y`
Codex: `npx skills add inference-sh/skills --skill chat-ui -g -a codex -y`
Cursor: `npx skills add inference-sh/skills --skill chat-ui -g -a cursor -y`
Gemini CLI: `npx skills add inference-sh/skills --skill chat-ui -g -a gemini-cli -y`

## 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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

> **Install the belt CLI skill:** `npx skills add belt-sh/cli`

# Chat UI Components

Chat building blocks from [ui.inference.sh](https://ui.inference.sh).

![Chat UI Components](https://cloud.inference.sh/app/files/u/4mg21r6ta37mpaz6ktzwtt8krr/01kgvftp7hb8wby7z66fvs9asd.jpeg)

## Quick Start

```bash
# Install chat components
npx shadcn@latest add https://ui.inference.sh/r/chat.json
```

## Components

### Chat Container

```tsx
import { ChatContainer } from "@/registry/blocks/chat/chat-container"

<ChatContainer>
  {/* messages go here */}
</ChatContainer>
```

### Messages

```tsx
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

```tsx
import { ChatInput } from "@/registry/blocks/chat/chat-input"

<ChatInput
  onSubmit={(message) => handleSend(message)}
  placeholder="Type a message..."
  disabled={isLoading}
/>
```

### Typing Indicator

```tsx
import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator"

{isTyping && <TypingIndicator />}
```

## Full Example

```tsx
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

The rest: https://github.com/inference-sh/skills/blob/HEAD/ui/chat-ui/SKILL.md