AI Input

An input is a component that allows a user to send a message to a large language model.

Powered by

Lucide

Installation

npx kibo-ui@latest add ai

Features

Auto-resizing textarea that adjusts height based on content
Automatic submit button icons based on status
Support for keyboard shortcuts (Cmd/Ctrl + Enter to submit)
Customizable min/max height for the textarea
Flexible toolbar with support for custom actions and tools
Built-in model selection dropdown
Responsive design with mobile-friendly controls
Clean, modern styling with customizable themes
Form-based submission handling

Examples

Custom Model Icons

AI Conversation

A conversation is a component that wraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the bottom.

AI Message

A message component that displays a chat interface message from either a user or an AI.