AI chat
An assistant panel that streams replies word by word behind a blinking caret, with thinking dots, suggested prompts, a send button that morphs into Stop and a credit meter that drains and rolls per message.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { AiChat } from '@/components/component-kit/items/block-ai-chat';
export function Example() { return <AiChat credits={40} maxCredits={50} onSend={(prompt) => console.log(prompt)} />;}Props
| Prop | Type | Default | Description |
|---|---|---|---|
suggestions | ChatSuggestion[] | 3 demo prompts | Suggested prompts with the canned reply each one streams back. |
credits | number | 12 | Credits at the start; the meter turns destructive at 20% and Top up appears when empty. |
maxCredits | number | 50 | Credits in a full meter. |
cost | number | 3 | Credits spent per message. |
speed | number | 38 | Milliseconds between streamed words. |
onSend | (prompt: string) => void | undefined | Called for every sent prompt; wire it to your /api/chat route. |
onUpgrade | () => void | undefined | Called when Top up is pressed after credits run out. |
compact | boolean | false | Shorter panel without suggested prompts. |
autoPlay | boolean | false | Ask each suggestion in turn and stream the reply on a loop. |