Chat Ui

by inference-sh0aabdc6f47f7No license763 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 2 days ago

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

Instructions onlySoftware Development Design & Creative

AI-generated overview

Provides React/Next.js chat UI building blocks: container, messages, input, typing indicator and avatars.

What it does: This skill supplies chat interface building blocks for React and Next.js projects, covering a chat container, message components for user, assistant and system roles, a chat input, and a typing indicator. It shows how to install the components through the shadcn CLI and how to compose them into a working chat view. It also notes styling with Tailwind CSS and shadcn/ui design tokens, and points to related skills and documentation.
When to use it: Use it when building a custom chat or messaging interface in React or Next.js, such as an AI assistant front end. It fits when you need ready-made message lists, input handling and typing indicators rather than a full agent component.
Requirements: A React or Next.js project with Tailwind CSS and shadcn/ui. Installing the components uses the shadcn CLI via npx, which requires network access. The skill ships no scripts; it is instructions and code examples only.

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

Chat UI Components

Chat building blocks from ui.inference.sh.

[Chat UI Components]

Quick Start

Components

Chat Container

tsx

import { ChatContainer } from "@/registry/blocks/chat/chat-container"
<ChatContainer>  {/* messages go here */}</ChatContainer>

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!"/>

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}/>

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 />}

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>  )}

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:

Related Skills

bash

# Full agent component (recommended)npx skills add inference-sh/skills@agent-ui
# Declarative widgetsnpx skills add inference-sh/skills@widgets-ui
# Markdown renderingnpx skills add inference-sh/skills@markdown-ui

# Full agent component (recommended)npx skills add inference-sh/skills@agent-ui
# Declarative widgetsnpx skills add inference-sh/skills@widgets-ui
# Markdown renderingnpx 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

Source and attribution

Source:inference-sh/skillsinui/chat-uiat commit0aabdc6

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Role	Description
`user`	User messages (right-aligned)
`assistant`	AI responses (left-aligned)
`system`	System messages (centered)

Chat Ui

Chat UI Components

Quick Start

Components

Chat Container

Messages

Chat Input

Typing Indicator

Full Example

Message Variants

Styling

Related Skills

Documentation

Source and attribution

More from inference-sh/skills

Widgets Ui

Tools Ui

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Dpop Adoption

Gemini Live Api

Gemini Api