Chat ElementsPreview
UI-only chat building blocks for composing AI interfaces without Cubitt owning your runtime data.
Overview
Chat Elements are smaller composable pieces for AI chat interfaces. They are visual components only: consumers own messages, transport, persistence, tool state, and stream orchestration.
Use them when you want Cubitt styling and composition pieces without adopting a larger chat runtime contract.
Open full chat example
Usage
import {
Conversation,
Message,
PromptInput,
} from "@tilt-legal/cubitt-components/chat-elements";Setup
MessageResponse uses Streamdown for markdown rendering. Consumer apps need streamdown installed and should include Streamdown in Tailwind's source scan, with the path adjusted for their app:
@source "../node_modules/streamdown/dist/*.js";PromptInput owns its own transient composer state. No Chat Elements provider needs to be installed globally.
Components
Conversation
Scroll container, content layout, empty state, and scroll-to-bottom affordance.
Message
User and assistant message shells, markdown responses, attachments, and actions.
Prompt Input
Text editor form, submit state, action menu, attachment display, and speech composition.
Shimmer
Lightweight animated text for streaming or thinking states.
Task
Collapsible task/progress rows for agent work.
Sources
Collapsible source lists for response-level references.
Inline Citation
Inline cited text with preview-card and carousel source details.
Speech Input
Standalone voice capture button for dictation flows.
Boundary
These components intentionally do not prescribe a message schema beyond small UI-facing prop types. Use your own chat hooks, AI SDK transport, backend routes, and persistence model, then pass the relevant values into the visual elements.