chat-ui

Name: chat-ui
Author: inference-sh

Chat UI building blocks for React/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat…

INSTALLATION

npx skills add https://github.com/inference-sh/skills --skill chat-ui

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

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

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 &#x26;&#x26; <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 &#x26;&#x26; <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 - Building chat interfaces

Agent UX Patterns - Chat UX best practices

Real-Time Streaming - Streaming responses

Component docs: ui.inference.sh/blocks/chat