# 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

Source: https://skillsagentes.com/skills/skills-101/superpowers/chat-ui
Repository: https://github.com/skills-101/superpowers
Author: skills-101
License: not specified
Updated: hace 3 meses
Context cost: 108 tok installed, 839 tok once triggered, 839 tok with every bundled file
Bundle: 1 file, 3 KB
Permissions requested: none declared

## Install

```bash
npx -y skills add skills-101/superpowers --skill chat-ui --agent claude-code
```

## What it does

- Instala componentes de chat para React/Next.js vía shadcn (ChatContainer, ChatMessage, ChatInput, TypingIndicator)
- Proporciona bloques listos para construir interfaces de chat con roles user/assistant/system
- Ofrece un ejemplo completo de chat con manejo de estado de mensajes y carga

## Use it when

- Al construir UIs de chat personalizadas
- Al crear interfaces de mensajería o asistentes de IA
- Al necesitar listas de mensajes, input de chat o indicadores de escritura

## What triggers it

- "Crea una interfaz de chat con shadcn para mi app de Next.js"
- "Necesito un componente de input de chat con indicador de escritura"
- "Agrega una lista de mensajes estilo chat con roles user y assistant"

## Before you install

- Requiere shadcn CLI y un proyecto React/Next.js con Tailwind CSS configurado.
- Needs on PATH: npx

## Files

- SKILL.md — 3 KB

## SKILL.md

Not reproduced here. Read it at https://github.com/skills-101/superpowers/blob/main/ui/chat-ui/SKILL.md

---

Skills Agentes — https://skillsagentes.com/skills/skills-101/superpowers/chat-ui