primitives

Export unstyled React UI primitives for building customizable chat interfaces.

1|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/012e/thesis --skill primitives-012e
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: primitives
Source: https://github.com/012e/thesis/tree/main/.agents/skills/primitives
Command: npx skills add https://github.com/012e/thesis --skill primitives-012e

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The primitives provide a consistent, customizable set of React components to assemble chat UIs without reinventing core UI elements, saving time and ensuring visual coherence across a product.

Core Features & Use Cases

  • ThreadPrimitive, ComposerPrimitive, MessagePrimitive, and ActionBarPrimitive give a modular foundation for building chat interfaces with predictable behavior and styling.
  • References and example usage guide developers on composing messages, threads, and toolbars, enabling rapid prototyping and production-ready integrations.
  • Use Case: Create a chat window with a thread viewport, message rendering, and a functional composer to collect user input and display assistant responses.

Quick Start

Import the primitives from @assistant-ui/react and render a basic ThreadPrimitive with a Composer to start a minimal chat UI.

Frequently Asked Questions about primitives

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

FAQPage Schema
How do I build a chat interface in React without starting from scratch?

React chat UI primitives provide modular components like ThreadPrimitive and ComposerPrimitive to assemble thread viewports, message rendering, and input areas without reinventing core UI elements.

What are unstyled React primitives for customizable chat UIs?

Unstyled React chat UI primitives are modular components such as ThreadPrimitive, ComposerPrimitive, MessagePrimitive, and ActionBarPrimitive that give developers a foundation for building chat interfaces with predictable behavior and custom styling.

Can I use these chat UI primitives with my existing React assistant project?

These chat UI primitives integrate directly with @assistant-ui/react, allowing you to import and render components like ThreadPrimitive within your existing React project to rapidly prototype or deploy production-ready chat interfaces.

What's the best way to add a message thread and composer to a React chat application?

The best way to add a message thread and composer is importing ThreadPrimitive, MessagePrimitive, and ComposerPrimitive from @assistant-ui/react to render a chat window with a thread viewport and functional input collection.

How do I render assistant responses and user messages in a React chat thread?

You render assistant responses and user messages in a React chat thread by composing MessagePrimitive components within a ThreadPrimitive viewport, enabling structured message rendering and functional assistant response display.

Are there limitations to using unstyled primitives for React chat interfaces?

Unstyled primitives for React chat interfaces provide structural components like ThreadPrimitive and ComposerPrimitive, meaning you must apply your own styling and visual design rather than receiving out-of-the-box styled chat UI elements.