About

Imported from inference-sh/skills (ui/chat-ui/SKILL.md) via skills.sh. Install upstream with npx skills add inference-sh/skills --skill chat-ui. Copyright stays with the author.

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

Chat UI Components

Name: chat-ui
Author: inference-sh

Chat building blocks from ui.inference.sh.

Chat UI Components

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 - Building chat interfaces
Agent UX Patterns - Chat UX best practices
Real-Time Streaming - Streaming responses

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

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/inference-sh-skills-chat-ui/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

inference-sh-skills-chat-ui.ocm.jsonjson

{
  "ocm": "1",
  "id": "inference-sh-skills-chat-ui",
  "kind": "skill",
  "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",
  "publisher": "inference-sh",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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"
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/inference-sh/skills",
      "path": "ui/chat-ui/SKILL.md",
      "ref": "HEAD",
      "url": "https://www.skills.sh/inference-sh/skills/chat-ui",
      "key": "inference-sh/skills/ui/chat-ui/SKILL.md"
    }
  },
  "instructions": "> **Install the belt CLI skill:** `npx skills add belt-sh/cli`\n\n# Chat UI Components\n\nChat building blocks from [ui.inference.sh](https://ui.inference.sh).\n\n![Chat UI Components](https://cloud.inference.sh/app/files/u/4mg21r6ta37mpaz6ktzwtt8krr/01kgvftp7hb8wby7z66fvs9asd.jpeg)\n\n## Quick Start\n\n```bash\n# Install chat components\nnpx shadcn@latest add https://ui.inference.sh/r/chat.json\n```\n\n## Components\n\n### Chat Container\n\n```tsx\nimport { ChatContainer } from \"@/registry/blocks/chat/chat-container\"\n\n<ChatContainer>\n  {/* messages go here */}\n</ChatContainer>\n```\n\n### Messages\n\n```tsx\nimport { ",
  "cost": {
    "context_tokens": 721
  }
}

Fetch it by URL: GET /api/v1/registry/inference-sh-skills-chat-ui/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.