AIButton

A smart, provider-aware button component that instantly opens prompts in AI tools like ChatGPT or Perplexity. Fully themeable, variant-based, and designed for seamless integration into Astro projects without JavaScript by default. Perfect for enhancing UX with AI actions directly from your UI.

Install

pnpm dlx hybrid-astro-ui@latest add ai-button

npx hybrid-astro-ui@latest add ai-button

yarn dlx hybrid-astro-ui@latest add ai-button

bunx hybrid-astro-ui@latest add ai-button

Usage

---
import { AIButton } from "@/src/components/hybrid-astro-ui/ai-button"
---
<AIButton 
    provider="openai" 
    prompt="Hybrid-Astro-UI using a hybrid model: zero-JS Astro + progressive enhancement with web components."
>
    Open in ChatGPT
</AIButton>
<AIButton 
    provider="perplexity" 
    prompt="Hybrid-Astro-UI using a hybrid model: zero-JS Astro + progressive enhancement with web components." 
>
    Open in Perplexity
</AIButton>

Variant: outline

Variant: destructive

Variant: link

Props

• variant: “default” | “outline” | “destructive” | “link”
• size: “sm” | “md” | “lg” | “icon”
• provider: “openai” | “perplexity”
• class: “string”