React AI Actions

Interactive action buttons for AI chat interfaces. Build engaging conversational experiences with React, Next.js, and TypeScript, featuring tooltips and accessibility support with shadcn/ui integration.

AI Elements

Radix UI

Lucide React

Trying to implement AI Elements?

Join our Discord community for help from other developers.

Users expect copy buttons on AI responses. Add them or watch people right-click everything like savages. This component puts action buttons where they belong—right after the message content, not buried in some menu.

Chat message actions

Quick action buttons for AI responses with tooltips:

Loading component...

'use client';import { Action, Actions } from '@/components/ui/shadcn-io/ai/actions';import { Conversation, ConversationContent } from '@/components/ui/shadcn-io/ai/conversation';import { Message, MessageContent } from '@/components/ui/shadcn-io/ai/message';import {  CopyIcon,  RefreshCcwIcon,  ShareIcon,  ThumbsDownIcon,  ThumbsUpIcon,} from 'lucide-react';import { nanoid } from 'nanoid';import { useState } from 'react';const messages: {  key: string;  from: 'user' | 'assistant';  content: string;  avatar: string;  name: string;}[] = [  {    key: nanoid(),    from: 'user',    content: 'Hello, how are you?',    avatar: 'https://github.com/dovazencot.png',    name: 'Hayden Bleasel',  },  {    key: nanoid(),    from: 'assistant',    content: 'I am fine, thank you!',    avatar: 'https://github.com/openai.png',    name: 'OpenAI',  },];const Example = () => {  const [liked, setLiked] = useState(false);  const [disliked, setDisliked] = useState(false);  const [favorited, setFavorited] = useState(false);  const handleRetry = () => {};  const handleCopy = () => {};  const handleShare = () => {};  const actions = [    {      icon: RefreshCcwIcon,      label: 'Retry',      onClick: handleRetry,    },    {      icon: ThumbsUpIcon,      label: 'Like',      onClick: () => setLiked(!liked),    },    {      icon: ThumbsDownIcon,      label: 'Dislike',      onClick: () => setDisliked(!disliked),    },    {      icon: CopyIcon,      label: 'Copy',      onClick: () => handleCopy(),    },    {      icon: ShareIcon,      label: 'Share',      onClick: () => handleShare(),    },  ];  return (    <Conversation className="relative w-full">      <ConversationContent>        {messages.map((message) => (          <Message            className={`flex flex-col gap-2 ${message.from === 'assistant' ? 'items-start' : 'items-end'}`}            from={message.from}            key={message.key}          >            <MessageContent>{message.content}</MessageContent>            {message.from === 'assistant' && (              <Actions className="mt-2">                {actions.map((action) => (                  <Action key={action.label} label={action.label}>                    <action.icon className="size-4" />                  </Action>                ))}              </Actions>            )}          </Message>        ))}      </ConversationContent>    </Conversation>  );};export default Example;

Built with TypeScript and shadcn/ui for React applications, so it plays nice with your existing Next.js setup. Tooltips work properly, focus handling doesn't break tab navigation, and screen readers won't hate you.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai.json

bunx shadcn@latest add https://www.shadcn.io/registry/ai.json

Usage

import { Actions, Action } from "@/components/ai/actions";
import { ThumbsUpIcon } from "lucide-react";

<Actions className="mt-2">
  <Action label="Like">
    <ThumbsUpIcon className="size-4" />
  </Action>
</Actions>;

Why most action implementations suck

Most developers either forget action buttons entirely or put them in weird places. Users look for copy buttons immediately after reading a response—not in a dropdown menu, not in a toolbar somewhere else.

This React component uses ghost buttons by default because bordered buttons look busy in chat interfaces. If you disagree, use the variant prop. The buttons are 44px touch targets because mobile users need bigger tap areas (trust me on this one).

Usage with Vercel AI SDK

Real example with copy and regenerate using the Vercel AI SDK useChat hook in React applications:

"use client";

import { Actions, Action } from "@/components/ai/actions";
import { Message, MessageContent } from "@/components/ai/message";
import {
  Conversation,
  ConversationContent,
} from "@/components/ai/conversation";
import { RefreshCcwIcon, CopyIcon } from "lucide-react";
import { useChat } from "@ai-sdk/react";

export default function Chat() {
  const { messages, regenerate } = useChat();

  return (
    <Conversation>
      <ConversationContent>
        {messages.map((message, index) => (
          <Message from={message.role} key={message.id}>
            <MessageContent>
              {message.content}
              {message.role === "assistant" &&
                index === messages.length - 1 && (
                  <Actions className="mt-2">
                    <Action onClick={() => regenerate()} label="Retry">
                      <RefreshCcwIcon className="size-4" />
                    </Action>
                    <Action
                      onClick={() =>
                        navigator.clipboard.writeText(message.content)
                      }
                      label="Copy"
                    >
                      <CopyIcon className="size-4" />
                    </Action>
                  </Actions>
                )}
            </MessageContent>
          </Message>
        ))}
      </ConversationContent>
    </Conversation>
  );
}

Examples

Advanced toolbar with grouped actions and keyboard shortcuts:

Loading component...

'use client';import { Action, Actions } from '@/components/ui/shadcn-io/ai/actions';import { Separator } from '@/components/ui/separator';import { Conversation, ConversationContent } from '@/components/ui/shadcn-io/ai/conversation';import { Message, MessageContent } from '@/components/ui/shadcn-io/ai/message';import {  CopyIcon,  DownloadIcon,  RefreshCcwIcon,  ShareIcon,  EditIcon,  TrashIcon,  MoreHorizontalIcon,  CodeIcon,} from 'lucide-react';import { nanoid } from 'nanoid';import { useState } from 'react';const messages: {  key: string;  from: 'user' | 'assistant';  content: string;}[] = [  {    key: nanoid(),    from: 'user',    content: 'What\'s the weather like today?',  },  {    key: nanoid(),    from: 'assistant',    content: 'It\'s sunny with a high of 72°F. Perfect day for a walk!',  },];const Example = () => {  const [copied, setCopied] = useState(false);  const handleCopy = () => {    setCopied(true);    setTimeout(() => setCopied(false), 2000);  };  return (    <Conversation className="relative w-full">      <ConversationContent>        {messages.map((message) => (          <Message            className={`flex flex-col gap-2 ${message.from === 'assistant' ? 'items-start' : 'items-end'}`}            from={message.from}            key={message.key}          >            <MessageContent>{message.content}</MessageContent>            {message.from === 'assistant' && (              <Actions className="mt-2 flex-wrap">                <div className="flex items-center gap-1">                  <Action                    tooltip={copied ? 'Copied!' : 'Copy (⌘C)'}                    onClick={handleCopy}                    variant={copied ? 'secondary' : 'ghost'}                  >                    <CopyIcon className="size-4" />                  </Action>                  <Action tooltip="View code (⌘K)" onClick={() => {}}>                    <CodeIcon className="size-4" />                  </Action>                  <Action tooltip="Download" onClick={() => {}}>                    <DownloadIcon className="size-4" />                  </Action>                </div>                                <Separator orientation="vertical" className="h-6 mx-1" />                                <div className="flex items-center gap-1">                  <Action tooltip="Regenerate (⌘R)" onClick={() => {}}>                    <RefreshCcwIcon className="size-4" />                  </Action>                  <Action tooltip="Edit response" onClick={() => {}}>                    <EditIcon className="size-4" />                  </Action>                </div>                                <Separator orientation="vertical" className="h-6 mx-1" />                                <div className="flex items-center gap-1">                  <Action tooltip="Share" onClick={() => {}}>                    <ShareIcon className="size-4" />                  </Action>                  <Action tooltip="Delete" onClick={() => {}} variant="ghost">                    <TrashIcon className="size-4" />                  </Action>                  <Action tooltip="More options" onClick={() => {}}>                    <MoreHorizontalIcon className="size-4" />                  </Action>                </div>              </Actions>            )}          </Message>        ))}      </ConversationContent>    </Conversation>  );};export default Example;

Contextual actions with loading states

Show different actions based on message state with loading indicators:

Loading component...

'use client';import { Action, Actions } from '@/components/ui/shadcn-io/ai/actions';import { Conversation, ConversationContent } from '@/components/ui/shadcn-io/ai/conversation';import { Message, MessageContent } from '@/components/ui/shadcn-io/ai/message';import { Loader } from '@/components/ui/shadcn-io/ai/loader';import {  CopyIcon,  RefreshCcwIcon,  StopCircleIcon,  CheckIcon,  PlayIcon,  PauseIcon,} from 'lucide-react';import { nanoid } from 'nanoid';import { useState, useEffect } from 'react';type MessageState = 'idle' | 'generating' | 'complete' | 'error';const messages: {  key: string;  from: 'user' | 'assistant';  content: string;  state: MessageState;}[] = [  {    key: nanoid(),    from: 'user',    content: 'Can you recommend a good book?',    state: 'complete',  },  {    key: nanoid(),    from: 'assistant',    content: 'I\'d recommend "The Midnight Library" by Matt Haig. It\'s a beautiful story about life\'s infinite possibilities.',    state: 'generating',  },];const Example = () => {  const [messageStates, setMessageStates] = useState<Record<string, MessageState>>({});  const [isGenerating, setIsGenerating] = useState(true);  useEffect(() => {    // Simulate generation completion    const timer = setTimeout(() => {      setIsGenerating(false);    }, 3000);    return () => clearTimeout(timer);  }, []);  const handleStop = () => {    setIsGenerating(false);  };  const handleRetry = (messageKey: string) => {    setMessageStates(prev => ({ ...prev, [messageKey]: 'generating' }));    setTimeout(() => {      setMessageStates(prev => ({ ...prev, [messageKey]: 'complete' }));    }, 2000);  };  const handleCopy = () => {    // Copy logic  };  return (    <Conversation className="relative w-full">      <ConversationContent>        {messages.map((message, index) => {          const currentState = messageStates[message.key] || (            index === 1 ? (isGenerating ? 'generating' : 'complete') : message.state          );          return (            <Message              className={`flex flex-col gap-2 ${message.from === 'assistant' ? 'items-start' : 'items-end'}`}              from={message.from}              key={message.key}            >              <MessageContent>                {currentState === 'generating' ? (                  <div className="flex items-center gap-2">                    <Loader size={16} />                    <span>Generating response...</span>                  </div>                ) : (                  message.content                )}              </MessageContent>              {message.from === 'assistant' && (                <Actions className="mt-2">                  {currentState === 'generating' ? (                    <>                      <Action                         tooltip="Stop generation"                         onClick={handleStop}                        variant="secondary"                      >                        <StopCircleIcon className="size-4" />                      </Action>                      <Action tooltip="Pause" onClick={() => {}} disabled>                        <PauseIcon className="size-4" />                      </Action>                    </>                  ) : currentState === 'complete' ? (                    <>                      <Action                         tooltip="Copy response"                         onClick={handleCopy}                      >                        <CopyIcon className="size-4" />                      </Action>                      <Action                         tooltip="Regenerate"                         onClick={() => handleRetry(message.key)}                      >                        <RefreshCcwIcon className="size-4" />                      </Action>                      <Action                         tooltip="Run code"                         onClick={() => {}}                      >                        <PlayIcon className="size-4" />                      </Action>                    </>                  ) : currentState === 'error' ? (                    <>                      <Action                         tooltip="Retry"                         onClick={() => handleRetry(message.key)}                        variant="destructive"                      >                        <RefreshCcwIcon className="size-4" />                      </Action>                    </>                  ) : null}                </Actions>              )}            </Message>          );        })}      </ConversationContent>    </Conversation>  );};export default Example;

Features

Action buttons that don't look like an afterthought in React applications
Tooltips that actually help (not just label repetition)
Proper keyboard navigation that doesn't break in Next.js projects
Clipboard API integration (falls back to execCommand for older browsers)
Works with any Vercel AI SDK setup in JavaScript applications
Complete TypeScript definitions that make sense
Free open source component designed for conversational AI interfaces
Built for modern React frameworks and code generation tools

API Reference

Actions

Container for grouping action buttons.

Prop	Type	Description
`...props`	`HTMLAttributes<HTMLDivElement>`	HTML attributes to spread to the root div

Action

Individual action button with optional tooltip.

Prop	Type	Default	Description
`tooltip`	`string`	-	Optional tooltip text shown on hover
`label`	`string`	-	Accessible label for screen readers
`variant`	`ButtonVariant`	`"ghost"`	Button variant from shadcn/ui
`size`	`ButtonSize`	`"sm"`	Button size preset
`...props`	`ComponentProps<Button>`	-	Spreads to underlying Button component

Keyboard interactions

Actions support full keyboard navigation for accessibility:

Key	Description
`Tab`	Move focus to next action button
`Shift + Tab`	Move focus to previous action button
`Enter` / `Space`	Activate focused action
`Escape`	Close tooltip if open

Common gotchas

Tooltip z-index issues: Our tooltips use Radix Portal so they don't get buried under modals in React applications. Most implementations mess this up.

Users spam click async actions: Always disable the button during API calls in Next.js projects. Otherwise users will click "Regenerate" five times and wonder why their app is broken.

Forgetting disabled state explanations: If an action is disabled, the tooltip should explain why in JavaScript applications. "Copy (generating...)" is better than just a grayed-out button.

Touch targets too small: 44px minimum for mobile. This React component handles this with padding, but if you override styles, remember this.

Missing screen reader support: Even if you have visible tooltips, add aria-label for TypeScript accessibility. Screen reader users shouldn't have to guess what buttons do.

Integration with other components

Drop these into Message components for instant chat interfaces in React applications. Pairs well with Branch if you're building version control for AI responses in Next.js projects. This free open source component family is designed to work together without style conflicts in modern JavaScript frameworks.

Chat message actions

Installation

Usage

Why most action implementations suck

Usage with Vercel AI SDK

Examples

Contextual actions with loading states

Features

API Reference

Actions

Action

Keyboard interactions

Common gotchas

Integration with other components

Questions developers actually ask

On this page

React AI Actions

Reactai/actions

Reactai/conversation

Reactai/message

Reactai/actions

Reactai/conversation

Reactai/message

Reactseparator

Reactai/actions

Reactai/conversation

Reactai/message

Reactai/loader

Can I use custom icons instead of Lucide?

How do I add keyboard shortcuts?

How do I handle async actions?

Should I hide unavailable actions?

How do I override the default styles?

On this page