Ask AI

AI chats 157

About

A popover prompt launcher with an animated mascot trigger, one-click query links for major AI providers, and instant clipboard fallback.

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

Code

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

Usage.tsx

"use client";

import { AskAI } from "@/components/ui/ask-ai";

const PROMPT =
  "Hi! I'm on Aditya Ojha's portfolio (https://akoder.xyz). Based on this page, introduce him: what he builds, his stack, and what he is looking for. Then suggest what I should ask him about next.";

function Label({ children }: { children: React.ReactNode }) {
  return (
    <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
      {children}
    </span>
  );
}

export default function Demo() {
  return (
    <div className="flex w-full flex-col items-start p-6">
      <div className="flex flex-col items-start gap-3">
        <Label>Popover, open</Label>
        <AskAI
          prompt={PROMPT}
          defaultOpen
          side="bottom"
          align="start"
          tooltip="Ask an AI"
        />
      </div>

      {/* Reserves the space the portalled popover paints into. */}
      <div aria-hidden="true" className="h-[290px]" />

      <div className="flex flex-wrap items-start gap-8">
        <div className="flex flex-col items-start gap-3">
          <Label>Default</Label>
          <AskAI prompt={PROMPT} />
        </div>

        <div className="flex flex-col items-start gap-3">
          <Label>Compact</Label>
          <AskAI prompt={PROMPT} size="compact" label="Ask an AI" />
        </div>

        <div className="flex flex-col items-start gap-3">
          <Label>Blob only</Label>
          <AskAI prompt={PROMPT} blobOnly tooltip="Ask an AI" />
        </div>
      </div>
    </div>
  );
}