39 Pro components and page blocks

Get Pro
uibrik

Streaming Chat

Pro

Preview

Customize

Speed22w/s
Blur4px

Usage

import { StreamingChat } from "@/components/uibrik/streaming-chat/streaming-chat";

<StreamingChat />

Installation

Pro

Streaming Chat is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/streaming-chat

Props

StreamingChat
voice
Type boolean
true
Dictation button. It only shows in browsers that support speech recognition.
attach
Type boolean
true
File button, drag and drop, and paste.
speed
Type number
22
Words per second for the built-in demo model.
blur
Type number
4
Blur a new word starts with. 0 turns the blur off.
placeholder
Type string
"Ask anything"
Hint shown in the empty input.
respond
Type (prompt: string, signal: AbortSignal, files: File[]) => AsyncIterable<string>
–
Where replies come from. Yield text pieces as they arrive. Leave out to use the built-in demo model.
accept
Type string
""
Which files to take, as an <input accept> string such as "image/*,.pdf". Empty takes any.
maxFiles
Type number
6
Most files one message can carry.
maxFileSizeMb
Type number
10
Largest single file, in MB.
suggestions
Type string[]
3 prompts
Prompts offered before the first message. Pass [] to hide them.
thinkingLabels
Type string[]
4 labels
Shown in turn, a few seconds apart, while waiting for the first word. The last one holds.
className
Type string
–
Size the chat by giving it a height, e.g. h-[640px] max-w-2xl.