# Chat Ui

> Chat UI building blocks for React/Next.js from ui.inference.sh. Components: ChatContainer, ChatMessages, ChatInput, MessageBubble, MessageContent, MessageReasoning, MessageStatusIndicator, Markdown. Capabilities: chat interfaces, message lists, input handling, streaming, file uploads, drag-and-drop, auto-scroll, reasoning/thinking blocks, markdown rendering with code highlighting. Use for: buildi…

- **Type:** Skill
- **Install:** `agentstack add skill-quaylabshq-skill-graph-chat-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [quaylabshq](https://agentstack.voostack.com/s/quaylabshq)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [quaylabshq](https://github.com/quaylabshq)
- **Source:** https://github.com/quaylabshq/skill-graph/tree/main/skills/reforged/chat-ui

## Install

```sh
agentstack add skill-quaylabshq-skill-graph-chat-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Chat UI Components

Navigable reference graph for chat building blocks from [ui.inference.sh](https://ui.inference.sh). Install via shadcn registry.

## Components

| Component | Reference |
|-----------|-----------|
| Overview + ChatContainer | [references/components/overview.md](references/components/overview.md) |
| ChatMessages + Auto-Scroll | [references/components/chat-messages.md](references/components/chat-messages.md) |
| ChatInput + File Attachments | [references/components/chat-input.md](references/components/chat-input.md) |
| Message Display (Bubble, Content, Reasoning, Status) | [references/components/message-display.md](references/components/message-display.md) |
| Markdown Renderer | [references/components/markdown.md](references/components/markdown.md) |

## Integration

| Topic | Reference |
|-------|-----------|
| Installation + Provider Setup | [references/integration/setup.md](references/integration/setup.md) |
| Hooks + State Management | [references/integration/hooks-and-state.md](references/integration/hooks-and-state.md) |
| File Upload System | [references/integration/file-uploads.md](references/integration/file-uploads.md) |

## Patterns

| Pattern | Reference |
|---------|-----------|
| Full Agent Assembly | [references/patterns/full-agent.md](references/patterns/full-agent.md) |
| Customization + Styling | [references/patterns/customization.md](references/patterns/customization.md) |

## Extensions

| Topic | Reference |
|-------|-----------|
| Future Extensions + Related Skills | [references/extensions.md](references/extensions.md) |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [quaylabshq](https://github.com/quaylabshq)
- **Source:** [quaylabshq/skill-graph](https://github.com/quaylabshq/skill-graph)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-quaylabshq-skill-graph-chat-ui
- Seller: https://agentstack.voostack.com/s/quaylabshq
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.