Skip to main content
ParticleUI

AI Chat Interface

Full-featured AI chat UI with message bubbles, model selector, copy button, and typing indicator.

AI AssistantBeta
Hello! I'm your AI assistant. How can I help you build something great today?
10:54 PM
U
Can you show me how to use the GlowCard component?
10:55 PM
Of course! The GlowCard tracks your cursor and shows a radial spotlight effect. Here's a basic example: ```tsx import { GlowCard } from "@/components/ui/glow-card" <GlowCard className="p-6"> <h2>Hello world</h2> <p>Move your cursor over this card!</p> </GlowCard> ``` You can customize the `glowColor`, `glowSize`, and `glowOpacity` props to match your design.
10:55 PM

AI can make mistakes. Verify important information.

Installation

1

Run the CLI

$npx particleui-cli add ai-chat

Usage

TSX
import { AIChat } from "@/components/blocks/ai-chat"

export default function Page() {
  return <AIChat />
}

Props

PropTypeDefaultRequired
titlestringno
placeholderstringno
modelstringno

Details

Source filecomponents/blocks/ai-chat.tsx
Typeblock
Categoriesai, blocks
npm dependencieslucide-react
Registry depsbutton, input, avatar, scroll-area, select, badge
Claude skill