CategoryWeightCategory scoreContribution
Securityprompt, exec, net, exfil, eval
35%
35.0 pts
Supply chainhash, typosquat, maintainer, lockfile
20%
20.0 pts
Maintenancestaleness, pinning, CI
15%
15.0 pts
TransparencySKILL.md, perms, README
15%
15.0 pts
Communityinstalls, verify, response
15%
15.0 pts
Findings & checks · 0 flagged
Security
✓—All security checks passedNo findings in this category for the latest scan.pass
Supply chain
✓—All supply chain checks passedNo findings in this category for the latest scan.pass
Maintenance
✓—All maintenance checks passedNo findings in this category for the latest scan.pass
Transparency
✓—All transparency checks passedNo findings in this category for the latest scan.pass
Community
✓—All community checks passedNo findings in this category for the latest scan.pass
Every scanned point with the score it earned and what moved between them.
601a457
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
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"
Install the belt CLI skill: npx skills add belt-sh/cliChat UI Components
Chat building blocks from ui.inference.sh.
Quick Start
# Install chat components
npx shadcn@latest add https://ui.inference.sh/r/chat.jsonComponents
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-uiDocumentation
- 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