System Message

AI chats 54

About

A banner-style alert component for surfacing warnings, errors, or contextual instructions inside AI chat interfaces, with optional icon and call-to-action button.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds System Message to your project and fits it to your theme.

Code

How System Message is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { SystemMessage } from "@/components/ui/system-message";

export default function SystemMessageDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <SystemMessage variant="action">
        This conversation is visible to your team. Avoid sharing sensitive
        personal data.
      </SystemMessage>

      <SystemMessage variant="warning" fill>
        Context window is close to the limit. Summarize the conversation or
        archive older messages.
      </SystemMessage>

      <SystemMessage
        variant="error"
        cta={{ label: "Retry", onClick: () => {} }}
      >
        The tool integration failed. Review the API credentials before retrying
        the request.
      </SystemMessage>
    </div>
  );
}