Instala la habilidad CLI belt:
npx skills add belt-sh/cli
Componentes de Chat UI
Componentes básicos de chat de ui.inference.sh.
Inicio Rápido
# Instala los componentes de chat
npx shadcn@latest add https://ui.inference.sh/r/chat.json
Componentes
Contenedor de Chat
import { ChatContainer } from "@/registry/blocks/chat/chat-container"
<ChatContainer>
{/* los mensajes van aquí */}
</ChatContainer>
Mensajes
import { ChatMessage } from "@/registry/blocks/chat/chat-message"
<ChatMessage
role="user"
content="Hola, ¿cómo puedes ayudarme?"
/>
<ChatMessage
role="assistant"
content="¡Puedo ayudarte con muchas cosas!"
/>
Entrada de Chat
import { ChatInput } from "@/registry/blocks/chat/chat-input"
<ChatInput
onSubmit={(mensaje) => handleSend(mensaje)}
placeholder="Escribe un mensaje..."
disabled={isLoading}
/>
Indicador de Escritura
import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator"
{isTyping && <TypingIndicator />}
Ejemplo Completo
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)
// Enviar a la 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>
)
}
Variantes de Mensajes
| Rol | Descripción |
|---|---|
user | Mensajes de usuario (alineados a la derecha) |
assistant | Respuestas de la IA (alineadas a la izquierda) |
system | Mensajes del sistema (centrados) |
Estilización
Los componentes usan Tailwind CSS y tokens de diseño de shadcn/ui:
<ChatMessage
role="assistant"
content="¡Hola!"
className="bg-muted"
/>
Habilidades Relacionadas
# Componente completo de agente (recomendado)
npx skills add inference-sh/skills@agent-ui
# Widgets declarativos
npx skills add inference-sh/skills@widgets-ui
# Renderizado de Markdown
npx skills add inference-sh/skills@markdown-ui
Documentación
- Chateando con Agentes - Construcción de interfaces de chat
- Patrones de UX para Agentes - Mejores prácticas de UX en chat
- Streaming en Tiempo Real - Respuestas en streaming
Documentación de componentes: ui.inference.sh/blocks/chat