Ask AI

PreviousNext

AI-powered chat interface component

"use client";

import { MessageCircle } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/ui/avatar";
import { Button } from "@/ui/button";

export type AskAIButtonProps = {
  avatarSrc?: string;
  avatarFallback?: string;
  className?: string;
  onClick?: () => void;
};

export function AskAIButton({
  avatarSrc = "https://github.com/montekkundan.png",
  avatarFallback = "MK",
  className,
  onClick,
}: AskAIButtonProps) {
  return (
    <div
      className={cn(
        "flex items-center justify-between rounded-lg bg-zinc-900 p-2",
        className
      )}
    >
      <Button
        className="border-zinc-700 bg-transparent text-white hover:bg-zinc-800"
        onClick={onClick}
        variant="outline"
      >
        Ask AI
      </Button>
      <Avatar>
        <AvatarImage alt="User" src={avatarSrc} />
        <AvatarFallback>{avatarFallback}</AvatarFallback>
      </Avatar>
    </div>
  );
}

export type AskAILabelProps = {
  label?: string;
  className?: string;
};

export function AskAILabel({
  label = "Ask AI about this page",
  className,
}: AskAILabelProps) {
  return (
    <span className={cn("flex items-center gap-3 text-zinc-400", className)}>
      <MessageCircle className="size-5" />
      {label}
    </span>
  );
}

Overview

The Ask AI component provides an interactive AI chat interface trigger. It includes a button with an avatar and a label to prompt users to engage with AI assistance.

Installation

bunx --bun shadcn@latest add https://sidekick.montek.dev/r/ask-ai.json

Usage

Basic

import { AskAIButton, AskAILabel } from '@/components/ui/ask-ai'
 
export default function Page() {
  return (
    <div className="flex flex-col gap-4">
      <AskAILabel />
      <AskAIButton onClick={() => console.log('AI chat opened')} />
    </div>
  )
}

Components

AskAILabel

Displays a label with an icon prompting users to ask AI.

Props:

  • label?: string - Custom label text (default: "Ask AI about this page")
  • className?: string - Additional CSS classes

AskAIButton

Interactive button with avatar to trigger AI chat.

Props:

  • avatarSrc?: string - Avatar image URL (default: user avatar)
  • avatarFallback?: string - Fallback initials for avatar (default: "MK")
  • className?: string - Additional CSS classes
  • onClick?: () => void - Click handler function