assistant-ui-primitives

Render chat threads, messages, and input with composable UI primitives.

182|8|Updated Apr 4, 2026
One-click install
npx skills add https://github.com/compozy/agh --skill assistant-ui-primitives
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: assistant-ui-primitives
Source: https://github.com/compozy/agh/tree/main/.agents/skills/assistant-ui/assistant-ui-primitives
Command: npx skills add https://github.com/compozy/agh --skill assistant-ui-primitives

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you customize Assistant UI chat experiences by providing composable, unstyled UI primitives for threads, message rendering, and the message composer—so you can implement your own design system without rewriting the core UI logic.

Core Features & Use Cases

  • ThreadPrimitive for chat structure: Render the entire conversation container, message viewport, empty state, and “scroll to bottom” behavior.
  • MessagePrimitive for message bodies: Render message content parts (text, images, tool calls, reasoning, sources/files) and handle conditional UI for branching and errors.
  • ComposerPrimitive for message input: Provide a structured input form with send/cancel controls plus attachment and dictation support.
  • ActionBarPrimitive for per-message actions: Add message-level controls like copy, edit, regenerate, speak, feedback, and markdown export while keeping UI behavior consistent.
  • Use case: When you’re integrating AGH-backed chat into your product and need an opinionated, branded UI, you can use these primitives as the foundation and wire them into your app’s styling and components.

Quick Start

Implement your chat layout by composing ThreadPrimitive.Root with ThreadPrimitive.Viewport and ThreadPrimitive.Messages, then render custom UserMessage and AssistantMessage components using MessagePrimitive.Content and MessagePrimitive.Error.

Frequently Asked Questions about assistant-ui-primitives

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a custom chat UI without rewriting core message rendering logic?

Composable UI primitives provide unstyled Radix-style components for rendering chat threads, message content, and message inputs. This lets you implement a branded chat interface using your own design system without rewriting core logic.

How do I render different message content parts like images and tool calls in a chat thread?

You render different message content parts by using the MessagePrimitive component to handle text, images, tool calls, reasoning, and sources. It manages conditional UI for branching and errors within the chat thread.

Can I use these chat UI primitives with my existing Tailwind styling and component mappings?

Yes, these unstyled chat UI primitives support custom component mappings and Tailwind styling. They are designed to be wired directly into your app's existing styling and components.

What is the best way to add per-message actions like copy, edit, and regenerate to a chat interface?

The best way to add per-message actions is using the ActionBarPrimitive component. It provides consistent UI behavior for message-level controls like copy, edit, regenerate, speak, feedback, and markdown export.

How do I set up a structured message input form with send, cancel, and attachment support?

You set up a structured message input form by implementing the ComposerPrimitive component. It provides the structured input form with send and cancel controls, plus attachment and dictation support.

Does this approach handle conversation branching and empty state viewports automatically?

Yes, the ThreadPrimitive handles the conversation container, viewport, empty state, and scroll to bottom behavior. MessagePrimitive manages conditional UI specifically for branching and errors.