chat-ui
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
Best use case
chat-ui is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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
Teams using chat-ui should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/chat-ui/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How chat-ui Compares
| Feature / Agent | chat-ui | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Chat UI Components
Chat building blocks from [ui.inference.sh](https://ui.inference.sh).
## 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
| 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:
```tsx
<ChatMessage
role="assistant"
content="Hello!"
className="bg-muted"
/>
```
## Related Skills
```bash
# 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)Related Skills
cursor-ai-chat
Master Cursor AI Chat with @-mentions, inline edit, and conversation patterns. Triggers on "cursor chat", "cursor ai chat", "ask cursor", "cursor conversation", "chat with cursor", "Cmd+L", "inline edit".
gws-chat
Google Chat: Manage Chat spaces and messages.
gws-chat-send
Google Chat: Send a message to a space.
md2wechat
Convert Markdown to WeChat Official Account HTML. Use this whenever the user wants WeChat article conversion, draft upload, image generation for articles, cover or infographic generation, image-post creation, writer-style drafting, AI trace removal, or needs to inspect supported providers, themes, and prompt templates before running the workflow.
chat-compactor
Generate structured session summaries optimized for future AI agent consumption. Use when (1) ending a coding/debugging session, (2) user says "compact", "summarize session", "save context", or "wrap up", (3) context window is getting long and continuity matters, (4) before switching tasks or taking a break. Produces machine-readable handoff documents that let the next session start fluently without re-explaining.
azure-communication-chat-java
Build real-time chat applications with Azure Communication Services Chat Java SDK. Use when implementing chat threads, messaging, participants, read receipts, typing notifications, or real-time chat features.
baoyu-post-to-wechat
Post content to WeChat Official Account (微信公众号). Supports both article posting (文章) and image-text posting (图文).
ai-partner-chat
基于用户画像和向量化笔记提供个性化对话。当用户需要个性化交流、上下文感知的回应，或希望 AI 记住并引用其之前的想法和笔记时使用。
chatgpt-app-builder
Build ChatGPT Apps using the Apps SDK and MCP. Use when users want to: (1) Evaluate if their product should become a ChatGPT App (2) Design and implement MCP servers with widgets (3) Test apps locally and in ChatGPT (4) Prepare for App Store submission Triggers: "ChatGPT app", "Apps SDK", "build for ChatGPT", "ChatGPT integration", "MCP server for ChatGPT", "submit to ChatGPT"
chatkit-widget
Use when integrating OpenAI/ChatKit chat widgets into Next.js/React applications. Triggers for: embedding chat widgets, configuring widget appearance, implementing event handlers, setting up authenticated chat access, or customizing widget branding. NOT for: building custom chat UIs from scratch or backend AI model configuration.
building-chatgpt-apps
Guides creation of ChatGPT Apps with interactive widgets using OpenAI Apps SDK and MCP servers. Use when building ChatGPT custom apps with visual UI components, embedded widgets, or rich interactive experiences. Covers widget architecture, MCP server setup with FastMCP, response metadata, and Developer Mode configuration. NOT when building standard MCP servers without widgets (use building-mcp-servers skill instead).
building-chat-widgets
Build interactive AI chat widgets with buttons, forms, and bidirectional actions. Use when creating agentic UIs with clickable widgets, entity tagging (@mentions), composer tools, or server-handled widget actions. Covers full widget lifecycle. NOT when building simple text-only chat without interactive elements.