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

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

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

Prop	Type	Default	Required
title	string	—	no
placeholder	string	—	no
model	string	—	no

Details

Source filecomponents/blocks/ai-chat.tsx

Typeblock

Categoriesai, blocks

npm dependencieslucide-react

Registry depsbutton, input, avatar, scroll-area, select, badge

Claude skill—