Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React AI Chatbot
Next: React AI Agent

React AI Actions

React AI actions component with icon button toolbar and optional tooltips for message interactions

Those little icon buttons under AI messages—copy, regenerate, thumbs up/down—this is how you build them. Actions is your container, Action is each button. Pass a tooltip and users get a nice hover hint. Icons go as children, screen reader text is handled automatically via the label or tooltip. We use ghost buttons by default so they're subtle until hovered. Drop this under MessageContent or wherever you need quick actions. Simple pattern, but you'll use it everywhere in chat UIs.

Actions preview

Scroll to load preview

Installation

React AI Message

Chat message bubbles

React AI Toolbar

Canvas action toolbar

React AI Confirmation

Action confirmation UI

React AI Conversation

Chat container

React AI Suggestion

Quick reply buttons

React AI Branch

Message versioning

FAQ

Was this page helpful?

Sign in to leave feedback.

React AI Chatbot

Complete ChatGPT-style chatbot interface with streaming responses, reasoning display, model selection, sources, and message branching for React and Next.js

React AI Agent

React AI agent component for displaying AI agent configurations with tools and instructions